Tutorials

Firebug, CSS and the Zen / sub-theme system

This tutorial is evolving, please participate with questions, comments, and suggestions.

It was initially presented with three parts. I now plan on separating them out into three different chunks of content. I believe the information in the first two parts is important to understand to go further with part three. But after presenting today I realize that this is way to much to fit into one hour and thus much of what I think this session was initially proposed to be it morphed into something else.

I will begin to rewrite this to specifically outline how and why the zen theme / sub theme system is an excellent direction to theme in and why every user of the system stays committed to it. I also am beginning to only modify or override layout and html elements vs editing them. Much of my work is now via subtheme.css and with my node templates.

===

Learn how to take a simple concept drawing, create content types and then rock out your page and node template files with clean css.

part one: clarity and focus

  • welcome and overview
  • good questions to ask to further the creative process
  • what is your business or intention for this website?
  • who are you communicating to?
  • after launch, what outcome will define success?

+ information design

  • content types
  • taxonomy

part two: things to understand to make use of the tools

  • #ID and .class
  • boxes margins and padding
  • !important stuff
  • why and how to cascade
  • what's this em stuff?

+ firebug, web inspector

+ zen project page

+ STARTERKIT

  • what to copy to override the foundation
  • template.php

+ Zen CSS architecture

  • layout.css
  • html-elements.css
  • your new theme (subtheme)

part three: a practical conversation about putting it all together

  • menu system
  • adding new theme regions and why or not
  • node-content_type_name.tpl.php
  • page.tpl.php
  • $body_classes
  • bueller?
Syndicate content