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
- A text editor - in the video I am using Dreamweaver 8 in code edit mode.
- Drupal 6 installed on your testing server. I use Wampserver on my localhost and have installed Drupal.
- Genesis theme framework must be uploaded to the server as well, all subthemes require the core framework as a dependency.
- Firefox web browser with Firebug installed.
The Idea
- Use the inspector to drill down through the HTML to find the elements you want to style.
- Add properties to CSS selectors in the CSS pane to modify the style - you can see your changes live in the web browser.
- 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!
Comments
#1 Great Tutorial!
Jeff,
You are doing a wonderful job with Genesis, keep it going!
Thank You!
#2 As a starter in customizing
As a starter in customizing my website-theme in Drupal this is the information i was looking for !
The great thing about your screencasts is that it does not offer all the information but provides a good starting point and makes the viewer enthousiast to find out more by himself.
Thank you very much Jeff,
Marcel
The Netherlands
#3 Many thanks
I didn’t know that there was such a thing as FireBug. Thanks! This will help me a lot!
I tried tinkering with the “Inspect element” option on Google Chrome but it seems it is a bit limited for it doesn’t allow you to edit and preview the code in real time.
#4 Brilliant videos, thanks
At last, someone who understands the value of time and presents a punchy short video, no waffle. This series is brilliant, thank you, thank you, thank you, thank you, thank you…
PS: Thanks also for making it so easy to leave a comment, hope the spammers won’t find you.
Post new comment