Genesis Lesson 4 - Use Firebug to Prototype Block Styles

This video tutorial is specific to Genesis 6.x-1.2. The process for 6.x-2.x is exactly the same except the CSS in 6.x-2.x is modular (there are many small style sheets). The stylesheets are in your subthemes /css folder. The modular CSS files replace the genesis_SUBTHEME.css file from verion 6.x-1.2.

This tutorial shows how to use the Firebug plugin for Firefox to prototype your styles for your Genesis subtheme. We then transfer the styles you develop in Firebug to the stylesheet.

Genesis is a rapid development theme framework for the Drupal content management system.

Requirements

1. A text editor - in the video I am using Dreamweaver 8 in code edit mode.
2. Drupal 6 installed on your testing server. I use Wampserver on my localhost and have installed Drupal.
3. Genesis theme framework must be uploaded to the server as well, all subthemes require the core framework as a dependency.
4. Firefox web browser with Firebug installed.

The Idea

1. Use the inspector to drill down through the HTML to find the elements you want to style.
2. Add properties to CSS selectors in the CSS pane to modify the style - you can see your changes live in the web browser.
3. Take note of the CSS file names and line numbers, use these to find where to add the CSS to your stylesheet.

Note: You may need to add new selectors to the CSS file, this is no problem and in fact you can copy/paste entire CSS snippets from Firebug to the CSS file, which is something I didn't show you in the video.

Block Structure

Blocks, similar to nodes, comprise of several layers of nested DIV's. Each DIV has a different CSS selector.

The main wrapper DIV (.block) will also have a number of additional conditional selectors;

  • An ID selector e.g. #block-user-1 (#block - module - delta).
  • Every block gets the class .block, to allow for global styles to be applied.
  • Module class - style every block generated by a particular module.
  • Zebra classes - .odd or .even, depending on the order the block comes in.
  • Region class - e.g .left, .right

We can examine a typical block;

<div id="block-user-1" class="block block-user odd left">
  <div class="block-inner inner">
    <h2 class="block-title">admin</h2>
    <div class="block-content">
      <ul class="menu">
       <li class="leaf first"><a href="/user/1">My account</a></li>
       <li class="collapsed"><a href="/node/add">Create content</a></li>
       <li class="leaf"><a href="/tracker">Recent posts</a></li>
       <li class="collapsed"><a href="/admin">Administer</a></li>
       <li class="leaf last"><a href="/logout">Log out</a></li>
     </ul>
  </div>
</div>

These allow you a lot of option when it comes to styling your blocks.

So what are you waiting for - try it, you'll love it!

Last updated 29th April, 2009 - 2:03pm