Variable Stylesheets

MrLeN · #1 (**permalink**) 11-29-2003, 07:36 PM

I have decided to use a Tab Style CSS menu for one of my new designs. For this to work, I need to have a class set in the body like this:

Code:

<body class="section-1">

..or the body class might be:

Code:

<body class="section-2">

..depending on which tab (on the menu) that I want highlighted.

However, I am also using a generic header and footer include for the template (ie: for the whole site). This has become tricky because depending on which page is being displayed (specifically which directory it's in), the body class needs to be different.

So, is there any way that I can move that class, ie:

Code:

<body class="section-1">

to a stylesheet and get the web page to recognise which directory it is in and use the correct stylesheet accordingly?

I can create the site so that the content that each tab link leads to is in a different directory, so if I can dynamically assign a stylesheet to a page (depending on which directory it is in) ..and put that class IN the stylesheet ..all will be cool.

..anyone?

MrLeN

Narasinha · #2 (**permalink**) 11-29-2003, 08:18 PM

I really don't understand this problem. Maybe I just need more coffee before I wrap my brain around it. If you have the class identitifed in the body tag, and both classes are defined in the CSS, the appropriate class is used. If you are changing something further into the page based on the body class, you can always use a descendant selector for that class, like this:

body.section-1 .tab1 {styleinfo...}
body.section-2 .tab1 {styleinfo...}

Anything of class "tab1" will get different styling depending on what body class is in use on that page.

I did read two articles at A List Apart dealing with tabbed navigation using CSS. I don't know if it's relevant to what you're doing or not, but these are the articles:
Sliding Doors of CSS by Douglas Bowman
Sliding Doors of CSS, Part II by Douglas Bowman

MrLeN · #3 (**permalink**) 11-29-2003, 08:31 PM

Quote:

Originally Posted by Narasinha

I really don't understand this problem. Maybe I just need more coffee before I wrap my brain around it. If you have the class identitifed in the body tag, and both classes are defined in the CSS, the appropriate class is used.

..true ..but that's not where my problem is. My problem is that I am using PHP includes for the header (which contains the body tag) ..which means that it will always have the same class.

..so what I want to do is move that class to a stylesheet and have more than one stylesheet.

ie: each stylesheet will have the different class.

Having done that, the class will be used simply by having the appropriate stylesheet in the directory that the page is in.

Hmm.. I know I explain things all messed up. It's a bad habit that I can't seem to fix!

===========I'll start again..

The simple version of what I want:

I want to take the class out of:

Code:

<body class="section-1">

..and put it straight in the stylesheet.

MrLeN

Narasinha · #4 (**permalink**) 11-29-2003, 08:47 PM

Okay, I think I understand better now. The entire first section of the code, up to and including the body tag, are all the same, generated by PHP.

You want the body class, which is always set to the same name, to be different when that page is in a different directory.

If each page, or set of pages, that you want to have the same style are in the same directory, I wouuld suggest using a stylesheet within that directory, rather than one that is in a parent directory. Of course, this could mean a lot of stylesheets.

How about this:

Keep your site-wide style sheet in the parent directory. Remove the references to that specific body class and place them in a separate style sheet. Have several copies of this style sheet, each in a subdirectory, with the different style information for the different body classes. Refer to them like this:

<link rel="stylesheet" type="text/css" href="/main.css" title="Main Site Stylesheet" />
<link rel="stylesheet" type="text/css" href="page.css" title="Subdirectory Stylesheet" />

That way each page will get the bulk of its style information from the main.css file in the root directory of the server, but will get the page-specific style information fro the file page.css that is in the same directory as the page itself.

MrLeN · #5 (**permalink**) 11-29-2003, 08:53 PM

Quote:

Originally Posted by Narasinha

Okay, I think I understand better now. The entire first section of the code, up to and including the body tag, are all the same, generated by PHP.

You want the body class, which is always set to the same name, to be different when that page is in a different directory.

If each page, or set of pages, that you want to have the same style are in the same directory, I wouuld suggest using a stylesheet within that directory, rather than one that is in a parent directory. Of course, this could mean a lot of stylesheets.

How about this:

Keep your site-wide style sheet in the parent directory. Remove the references to that specific body class and place them in a separate style sheet. Have several copies of this style sheet, each in a subdirectory, with the different style information for the different body classes. Refer to them like this:

<link rel="stylesheet" type="text/css" href="/main.css" title="Main Site Stylesheet" />
<link rel="stylesheet" type="text/css" href="page.css" title="Subdirectory Stylesheet" />

That way each page will get the bulk of its style information from the main.css file in the root directory of the server, but will get the page-specific style information fro the file page.css that is in the same directory as the page itself.

You da man!

Thanks! :D

..will do perfectly!

MrLeN

carbonize · #6 (**permalink**) 11-29-2003, 08:56 PM

Since you are using PHP why not use PHP to change the body tag dependant on the current URL.

Code:

 if (REQUEST_URI='foo.html') print"<body class=\"section-1\">";

Probably not right but you should get the idea.

MrLeN · #7 (**permalink**) 11-29-2003, 08:56 PM

..oh, but how can I take this out of the body and put it in the stylesheet?:

Code:

<body class="section-1">

something like?:

Code:

body {
??? section-1 ???
}

MrLeN

MrLeN · #8 (**permalink**) 11-29-2003, 08:59 PM

Quote:

Originally Posted by carbonize

Since you are using PHP why not use PHP to change the body tag dependant on the current URL.

Code:

 if (REQUEST_URI='foo.html') print"<body class=\"section-1\">";

Probably not right but you should get the idea.

..hey that sounds great!

..but I would have to have a LOT of if's wouldn't I?

..what happens if I have 10,000 pages?

..can I do it with a directory instead of a page?

MrLeN

carbonize · #9 (**permalink**) 11-29-2003, 09:07 PM

I can't see why not since the directory would be included in the REQUEST_URI variable.

redcircle · #10 (**permalink**) 11-30-2003, 01:39 PM

Quote:

Originally Posted by MrLeN

..oh, but how can I take this out of the body and put it in the stylesheet?:

Code:

<body class="section-1">

something like?:

Code:

body {
??? section-1 ???
}

MrLeN

I think you are trying to confuse yourself.

What I would do is have PHP echo out a <div class="section-x">(x represending your page) and </div> encapsulating your output then in your style you would give section-x each different styles. That's how I would do it. Infact that IS how I do it.