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.
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.
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.
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">
<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>
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