Sub themes and overriding CSS

This screencast shows how easy it is to create a sub theme, so you don't have to hack core. This is done by creating a new folder in your sites/default/themes (or sites/all/themes) directory, and then adding a MYTHEME.info file. This should be populated with:

  • name = MY THEME
  • description = MY THEME DESCRIPTION
  • core = 7.x
  • base theme = MY_BASE_THEME_MACHINE_NAME

You should also have any regions declared. The easiest way to do this is just to copy-paste from the base theme (and tweak if you need to).

The screencast also shows how to add CSS files:

  • You can add new CSS files by adding lines like stylesheets[all][] = css/MYCSS.css.
  • If the CSS file name (folder irrelevant) matches any existing CSS file, your file will replace the old one.
  • Note that CSS files added like this will be loaded on every page load.

Finally, this screencast explains that you should probably not use Bartik as your base theme, since you will have to reset a lot of its CSS. Rather you want to work with a theme made to be overridden. A good place to start is the Zen theme, and then you can also use the Zenophile module to easily create new sub themes with all extra steps included! (When you have gotten used to theming you probably want to use some other base theme, but then you will know more about theming than I do.)

Don't miss the follow-up screencast, with a smart way of doing small CSS tweaks.

Modules: 
Additional Resources: