This theme uses a header and footer, I'm guessing I shouldn't use a different css file for each new page type. so for example, if the a style exists called:

#nav {
background: url(../images/top_redstripe.jpg) repeat-y;
}

I should create an additional one called for example:

#navgreen {
background: url(../images/top_greenstripe.jpg) repeat-y;
}

and so on for each style that need to change color?

Thanks,
Doug

My two cents on this (ok maybe that's overpriced) would be to separate out the color scheme related CSS into it's own file, then make a separate copy of it for each color scheme. So each page type would reference the common (non-color scheme) stylesheet and one of the color scheme-specific sheets which would use the same CSS classes and IDs, just with different values.

The problem I'm trying to figure out is how to apply the correct css file to the new page types. The theme is a commercial one and has this line in the header.php file for all page types:

<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getThemePath()?>/css/screen.css" />

and within that screen.css file is the import url for one of the three supplied color themed css files that are included.

I'm just not sure how to keep his structure and apply different css files for the various Page Types.

Doug

You may be thinking about it the wrong way. Instead of supplying different stylesheets for each page type, why not have different element names in each page type? Then you only need to call one stylesheet that takes care of every different color?

Example:

Red Pages have elements in them that are appended with '-red' or have 'red' as a class name.
body p .red {color: red;}
sidebar-red (color: red;}

Green Pages have elements in them that are appended with '-green'.
body p .green {color: green;}
sidebar-green (color: green;}

Just a thought. You'll need to modify the commercial theme you installed, but it shouldn't take too much work.

A quick and dirty way would be to
1. make three copies of screen.css (e.g. screen_red, screen_blue, screen_green)
2. change the imports in each to reference the right color scheme
3. make three copies of your header.php (e.g. header_red.php, header_blue.php, header_green.php)
4. change the link in each to point to the right copy of the screen.css.
5. change each page type template to include the right version of header.php

Not very DRY, though. I have a strong feeling there's a cleaner way to do it. Probably Lucas' approach is better.

Thanks Lucas and agedman, I was thinking along those lines as well and if I don't hear back from the developer, I'll test out those options. But I'd love to hear others if anyone has any.

What about surrounding each css file with a conditional statement based on the Page Type?

What might that code look like?

Thanks,
Doug

Well for sure you could do it with a single header.php, just setting a variable in your page type template like this: then use the variable in header.php like this But as far as doing a conditional import inside the CSS file, I don't know if that's possible...