Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Inserting CSS inside a JS script, in diferent skins, for ProBoards Forums

    Hello.
    I am new here.
    And I have a forum hosted by proboards.
    http://www.CharmedSkins.co.nr

    ProBoards has a feature to allow members to choose diferent skins (forum layouts), that are created by the admins of the forums.
    You can see what skin you are using.
    Just go to Source Code > Find "var pb_skinid = X;"
    X = number of the skin.
    You, as a guest, will see "var pb_skinid = 1;"
    But I only have one skin too.

    They also allow us to costumize our pages with anything we would like to add to the body of the page. They have something called headers/footers option, where we can insert JS, CSS, HTML, etc, into the forum pages.

    A bad thing about ProBoards, is that they do not have headers/footers for diferent skins. If we put a CSS code to make a: hover links go black, all the hover links, in all skins will go black.

    Which is why some people came to a nice solution for JS for diferent skins:
    Code:
    <script type="text/javascript">
    <!--
    
    if(pb_skinid == 1){
    
    // gigantic masses of code here
    
    }else if(pb_skinid == 2){
    
    // more gigantic masses of code
    
    }
    
    // -->
    </script>
    That way we have diferent JS for diferent skins.

    But the problem is, I do not know how to do that in CSS. So, instead of having to host files, I would like to know, if is it possible to put CSS inside a Javascript code ?

    I have already tried this:
    Code:
    <script type="text/javascript">
    <!--
    var thecss = 'all css in here';
    document.write(thecss);
    //-->
    </script>
    And also tried:
    Code:
    <script type="text/javascript">
    <!--
    document.write('all the css in here');
    //-->
    </script>
    But nothing works.

    Does anyone know how do I insert CSS inside JS ?

    Thank you

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Hi Charmed,

    The method you describe for inserting style through CSS should be working in my opinion. So something else seems to be wrong.

    What exactly have you tried to type in your example. Did you actually remember to include the <style> tag? Did you write something like

    Code:
    <script type="text/javascript">
    <!--
    document.write('<style type="text/css">body{color:pink}</style>');
    //-->
    </script>
    Can you should tell us at which point in final code does the user-defined script go?

    And, when it didn't work, were there any error messages?
    Last edited by koyama; 12-16-2006 at 01:28 AM.

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried using the tags and not using the tags.

    Like this:
    Code:
    <script type="text/javascript">
    <!--
    document.write('<style type="text/css">
    <!--
    body
    {
    color:pink;
    }
    -->
    </style>');
    //-->
    </script>
    And like this:
    Code:
    <script type="text/javascript">
    <!--
    document.write('body
    {
    color:pink;
    }');
    //-->
    </script>
    No error messages came. Simply, all the CSS i inserted does not work, that includes: gradients, bg image, text area costumization, links costumization, etc.

    Sorry I do not understand this question "Can you should tell us at which point in final code does the user-defined script go?"

    Do you think what is cause the trouble is because I post the CSS stylesheet in diferent lines, instead of only one (like you posted) ?
    Or do you think these things ( "<!--" and "-->" ) are making it not work ?
    Last edited by Charmed; 12-16-2006 at 01:33 AM.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Yes, your assumption is correct. This won't work.

    Linebreaks terminate JavaScript statements (just like semicolons), so you must not split the lines. Try to paste in my version.

  • #5
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope, did not work :-/

    I am trying in this forum:
    http://charmedblues.proboards75.com

    Code:
    document.write('<style type="text/css"> body { background-image: url(http://i3.photobucket.com/albums/y93/lost_place/cblues/bg/bg.gif); background-position: center top; background-repeat: repeat-y; } input, select { background-color: #E7F3F9; color: #235471; border: 1px solid #3580AC; } option { background-color: #E7F3F9; color: #235471;}a:hover{color: #235471;text-decoration: none;}.menubg{background-image: url(http://i3.photobucket.com/albums/y93/lost_place/cblues/titlebg.gif); background-repeat: repeat-x;}.titlebg{background-image: url(http://i3.photobucket.com/albums/y93/lost_place/cblues/titlebg.gif); background-repeat: repeat-x;}.catbg{background-image: url(http://i3.photobucket.com/albums/y93/lost_place/cblues/catbg.gif); background-repeat: repeat-x;}.newstitlebg{background-image: url(http://i3.photobucket.com/albums/y93/lost_place/cblues/titlebg.gif); background-repeat: repeat;}.anndiv{background-image: url('http://i3.photobucket.com/albums/y93/lost_place/cblues/annbg.gif');}</style>');
    It did not work :-/

    Do you see anything wrong ?

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    I see something wrong. In the last part of the statement you have some pair of unescaped quotes. JavaScript will think that you are ending your string. Just remove the 2 single quotes within the last url().
    Code:
    document.write('<style type="text/css"> body { background-image: url(http://i3.photobucket.com/albums/y93/lost_place/cblues/bg/bg.gif); background-position: center top; background-repeat: repeat-y; } input, select { background-color: #E7F3F9; color: #235471; border: 1px solid #3580AC; } option { background-color: #E7F3F9; color: #235471;}a:hover{color: #235471;text-decoration: none;}.menubg{background-image: url(http://i3.photobucket.com/albums/y93/lost_place/cblues/titlebg.gif); background-repeat: repeat-x;}.titlebg{background-image: url(http://i3.photobucket.com/albums/y93/lost_place/cblues/titlebg.gif); background-repeat: repeat-x;}.catbg{background-image: url(http://i3.photobucket.com/albums/y93/lost_place/cblues/catbg.gif); background-repeat: repeat-x;}.newstitlebg{background-image: url(http://i3.photobucket.com/albums/y93/lost_place/cblues/titlebg.gif); background-repeat: repeat;}.anndiv{background-image: url(http://i3.photobucket.com/albums/y93/lost_place/cblues/annbg.gif);}</style>');

  • #7
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    YOUR MY ANGEL !!!!!!!!
    Check out the forum
    It is running perfectly !!!
    Thank you SOOOOOOO VERY VERY VERY MUCH !!!!!! ;D ;D ;D

    Seriously, Thank you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •