Whats the difference in the CSS files

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
micahcirce's picture

I'm a newbie to Drupal/Zen and a relative newbie to web design in general. I'm having some trouble understanding how all the CSS files in the new sub-theme I'm creating interact? "print.css" is self explanation. The other's are a bit confusing to me. "layout", "html-elements", and "Starterkit" (which i've properly renamed).

Is there any documentation that explains the interaction of these three? If not, could someone give me a few words of advice/explanation.

Thanks. I really like what this theme and group is doing.

Comments

leave all of them alone except for your style.css

HansBKK's picture

All your editing should take place in the style.css in your sub-theme folder (copy of STARTERKIT)

Any rules you want to override from ANY of the many CSS files that load (core, module, Zen parent) should be overridden there.

Use Firebug to see the exact selector and properties causing the display you don't like, and use the same selector/properties in your style.css' rule. Yours comes last so it takes precedence, as long as you don't try to override a specific selector with a more general one, or miss getting the right property.

Sometimes you even need to override a "browser default" property if that hasn't been explicitly set elsewhere, concept of a "reset" stylesheet.

But don't hack at any CSS other than your own or you'll lose your edits next time you upgrade the source of that file.

Anyone with more knowledge or experience, please feel free to expand on or correct any of (or confirm) the above.

I agree

nolimitsdude's picture

I only edit .css in the theme sub folder.

I try to make all layout type changes in my local themes copy of layout.css (Things like margin, padding, background images)

Once the blocks are in place I move over to my "themename.css" file for font changes

I have had to copy over wireframes.css and add new sections to it depending on the amount of
customization of the theme.

Also learn how to clear cache. Both in drupal and brower when ever you change any tpl.php file, or when the system
seems to not be working. The browser can also cache and hide chanegs, but once your rolling, changes
to layout.css and "themename.css" can be reflected with a simple page reload.

OK

HansBKK's picture

I just put everything in one override, but split out by comment-labelled blocks, find it easier than separate files.

I put the "clear cache" from Devel module on my admin-login's Navigator menu.

Thanks!

micahcirce's picture

All of these comments are a HUGE help. Exactly what i was looking for. And the bit about clearing the cache and the devel module is going to be helpful.

Thanks agian.

PS

HansBKK's picture

This group's more for developers of Zen-related stuff rather than support questions, I believe a post to the forums next time would be better?

great.

micahcirce's picture

Thanks for pointing that out. Dont want to clutter the space. And thanks for the help despite it. :-)