The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

CSS code for specific pages?

View previous topic View next topic Go down

Completed CSS code for specific pages?

Post by ToTheFuture on December 12th 2011, 4:23 am

Hi, is there any way I can apply CSS to certain pages only, ones that are not editable in templates? For example, if forum.com/f1-name was to have a different background colour.
Or is there also a way to do the reverse? Where I can choose an element (body_bg I think, as only an example again) and then specify CSS properties for that element if this is on a certain page of the forums?
I feel like Nera might know the answer because she is good at that especially. Thank you all! Very Happy

ToTheFuture
Forumember

Posts : 374
Reputation : 15
Language : English, Français

Back to top Go down

Completed Re: CSS code for specific pages?

Post by !_NICK_! on December 12th 2011, 4:38 am

Hello,

I highly doubt this is possible, but it might be.

!_NICK_!
Active Poster

Male Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.

Back to top Go down

Completed Re: CSS code for specific pages?

Post by LGforum on December 12th 2011, 10:29 am

Obviously changing things in your CSS would change them for every page. So inserting the CSS through javascript would be the way.

Code:

$(function() {
if(window.location.indexOf('/f1-')>0) {
 document.getElementById('page-body').innerHTML+="<style>YOUR CSS HERE</style>";
} });

You can change '/f1-' to what page you want (it doesn't have to be the WHOLE URL). And fill in your CSS where it says YOUR CSS HERE.

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Completed Re: CSS code for specific pages?

Post by ToTheFuture on December 13th 2011, 2:10 am

Wow, great idea, thanks! Very Happy I will try this out and get back.

EDIT: Okay, I tried the following code with both a widget and in javascript management... No worky. D: I also tried it by substituting "td.bodyline" with ".bodyline" and ".body".
Code:
$(function() {
if(window.location.indexOf('/u1')>0) {
 document.getElementById('page-body').innerHTML+="<style>td.bodyline{background-attachment:fixed;background-image:url("IMG") !important;background-repeat:tile;}</style>";
} });
And yes, I purposefully replaced the image with "IMG". Razz Help? Thanks!

EDIT to the EDIT (what what?): Okay, by "page-body", what does the javascript specify? Sorry, I don't know javascript, just CSS and a bit of jQuery (plus obvious things). Razz

ToTheFuture
Forumember

Posts : 374
Reputation : 15
Language : English, Français

Back to top Go down

Completed Re: CSS code for specific pages?

Post by LGforum on December 13th 2011, 3:01 am

Its because you have used double quote marks inside their.
You need to use single quotes or it will end the string and crash the script.

swap the bit where you put: "img"
for: 'img'

And don't worry about the pagebody bit. Its the main element of the page, and the script is adding style tags with your CSS to it.

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Completed Re: CSS code for specific pages?

Post by ToTheFuture on December 18th 2011, 7:53 pm

Still didn't work... And I know for sure that CSS can use "" tags anyways. :\

EDIT: Okay, good to note. The code is changing the CSS for every page when in a widget. The Javascript management still does not work at all.

ToTheFuture
Forumember

Posts : 374
Reputation : 15
Language : English, Français

Back to top Go down

Completed Re: CSS code for specific pages?

Post by LGforum on December 18th 2011, 8:44 pm

Yes scripts can use " in them. But in this certain script you have used them wrong, it has terminated the string and crashed the script.

Change your above script to this:
Code:

        $(function() {
        if(window.location.indexOf('/u1')>0) {
        document.getElementById('page-body').innerHTML+="<style>td.bodyline{background-attachment:fixed;background-image:url(\"IMG URL HERE\") !important;background-repeat:tile;}</style>";
        } });
Put the image url where it says to.

I use this method on a lot of pages on my own forum. Its actually one of the main methods i used to create my much loved inbox page.

LGforum
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Completed Re: CSS code for specific pages?

Post by ToTheFuture on January 8th 2012, 3:26 am

Okay, now NOTHING is happening. :/
My code:
Code:
$(function() {
        if(window.location.indexOf('/u1')>0) {
        document.getElementById('page-body').innerHTML+="<style>td.bodyline{background-attachment:fixed;background-image:url(\"http://vista-wallpaper.org/wp-content/gallery/vista/vista-wallpaper-grass-ripples.jpg\") !important;background-repeat:tile;z-index:1;}</style>";
        } });
The image is just some random wallpaper from google.

EDIT:
Okay, it seems my members (all of them as of now) can see the image, on every single page and still not the specific page. I still can't, at all. :/

EDIT EDIT:
Okay, every single person can see the widget code where I placed the widget, but not all of the code. What shows up is:
Code:
$(function() { if(window.location.indexOf('/u1')>0) { document.getElementById('page-body').innerHTML+=""; } });

EDIT EDIT EDIT (lol):
Okay, I removed the faulty widget, and the background is apparently still there (only visible to Internet Explorer users, but I want it for others as well), so obviously only the Javascript management code is working now, though still not in the way I want it to.

ToTheFuture
Forumember

Posts : 374
Reputation : 15
Language : English, Français

Back to top Go down

Completed Re: CSS code for specific pages?

Post by !_NICK_! on January 13th 2012, 8:19 pm

What code did you use to be able to do this?

!_NICK_!
Active Poster

Male Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.

Back to top Go down

Completed Re: CSS code for specific pages?

Post by Guest on January 13th 2012, 9:59 pm

Are you trying to insert some CSS on the advanced profile pages? If so, there's a much better way to do it, one that will work on all board types and is essentially foolproof:

Code:
$function() {
    var x = document.getElementById('profile-advanced-right');
    if (x) {$(x).after(<style type="text/css">CSS GOES HERE</style>);}
});
You also need to declare the text/css MIME type in the STYLE tag because some browsers will not recognize your added CSS without it.

Also, you shouldn't be using the URL to locate individual forums. eToxic has changed the URL styles twice in the past couple years on forumotion boards, and if they do it again, your script would break. Use the page title (document.title) instead, because the only time that will change is if you change the name of the forum yourself.

Guest
Guest


Back to top Go down

Completed Re: CSS code for specific pages?

Post by kirk on January 14th 2012, 12:35 am

So is this solved?
I see there is a complete icon presented.

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum