...

View Full Version : Inserting CSS inside a JS script, in diferent skins, for ProBoards Forums



Charmed
12-15-2006, 10:31 PM
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:

<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:

<script type="text/javascript">
<!--
var thecss = 'all css in here';
document.write(thecss);
//-->
</script>
And also tried:

<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 :)

koyama
12-15-2006, 11:53 PM
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


<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?

Charmed
12-16-2006, 12:30 AM
I tried using the tags and not using the tags.

Like this:

<script type="text/javascript">
<!--
document.write('<style type="text/css">
<!--
body
{
color:pink;
}
-->
</style>');
//-->
</script>
And like this:

<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?" :confused:

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 ? :)

koyama
12-16-2006, 12:38 AM
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.

Charmed
12-16-2006, 12:45 AM
Nope, did not work :-/

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


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 ? :)

koyama
12-16-2006, 01:01 AM
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().

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>');

Charmed
12-16-2006, 01:08 AM
YOUR MY ANGEL !!!!!!!!
Check out the forum :D
It is running perfectly !!!
Thank you SOOOOOOO VERY VERY VERY MUCH !!!!!! ;D ;D ;D

Seriously, Thank you :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum