I am in the process of transferring this site: http://www.choicez.com.au/index.shtml over to Drupal. Basically my question is: how can I have a different stylesheet for, lets say the front page and the "about us" page. I would probably need one for each page on the site unfortunately. I didn't design the original site. I worked out I can style each page differently by creating a different page template for each node then giving content sections different IDs then referencing these different IDs in style.css, but due to the large number of pages which will each need different styles, I can see this making the style.css file very large and messy. Having separate style sheets would make everything much neater.
I have a feeling instructions for this may be on the Drupal site already but I had no luck locating them. Can anyone point them out or provide tips on how to do this?
Cheers.
Comments
In your themes template.php
In your themes template.php create a theme_preprocess_page() function and call drupal_add_css() to add the css file.
In your theme_prepocess_page function you can use the available variables to decide which css file to add.
What you have, and your
What you have, and your proposed approach, is an architectural problem, and I'd hope you would be able to find a way to actually use css as it's intended - in a re-usable way.
That said, if you still feel the need to have custom css per-node, then
http://drupal.org/project/css
lets you do that through the UI.
You can also use drupal_add_css() to add individual style sheets on demand, or in your template_preprocess funcs.
.dan. is the New Zealand Drupal Developer working on Government Web Standards
Basically my question is: how
You are able to add all of your stylesheets directly to your theme's .info file (after updating an info file be sure to clear your theme registry /admin/build/themes). For your example, if my theme is sites/all/themes/choicez, than in your /sites/all/themes/choicez/choicez.info file...
Add your stylesheet in like fashion.
; $Id: choicez.info,v 1.5 2007/07/01 23:27:32 dale brendan Exp $name = Choicez
description = Tableless, multi-column
version = VERSION
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[print][] = print.css
stylesheets[front][] = front.css ;front page stylesheet
stylesheets[about][] = about.css ;about us page stylesheet
I generally keep all of my styles directly in style.css--which works perfectly well as long as you comment & group all of your selectors.
For example, I would group/comment like this...
/*
* FRONT PAGE: Style the elements on the front page accordingly
*/
.front-page-styles-here {
}
/*
* ABOUT US: Style the elements on the About Us Page accordingly
*/
.about-us-page-styles {
}
Regardless of this, having separate stylesheets is mostly just a convenience of being able to easily locate the selectors you are looking for. ...for me this is irrelevant. Ctrl-F (Find). Also note that it requires more DOM requests (decreased performance) to call the additional stylesheets if you are not optimizing them in /admin/settings/performance
Which begs the question about
Which begs the question about how you got a special class injected into the page's called ".about-us-page-styles". Which was probably in a template.tpl.php preprocess function?
yes .. i would like to know
yes .. i would like to know that .. how to add additional class .. it would be very stupid to create page-node-123.tpl.php for each node and then (that's how i would do .. with my knowlage)
There is something else i would like to know .. How do you get that sub menu item inherit page style from parent item ... for example if Menu Item -> Home, has sub items Item1, Item2, Item3 ... i would like that those sub items inherit CSS of Home page.tpl.php ..
A number of themes will do
A number of themes will do something like this for you already, these instructions should get you started.
.dan. is the New Zealand Drupal Developer working on Government Web Standards
thank you for posting .. but
thank you for posting .. but it seems everyone are trying to style pages of specific content type. All my content is the same content type, there was no need to create specific .. but contnet is under different menu - sub menu. Now i would just like that every primary menu item has each own css class which is added to body tag or CSS link .. and that sub menu item under this menu item inherit the css propertys.
Soo if Home is black_theme.css .. every sub menu of Home have black_theme.css
I said the instructions
I said the instructions should get you started. You still need to do a little bit of thinking yourself. That was instructions for how you can add different classes to the body based on node information.
Nearby that page in the handbook is instructions on how to use the URL to create a per-page class name also. That would answer your question
.dan. is the New Zealand Drupal Developer working on Government Web Standards