Now let's change the background color and the background images of the module blocks. We can review the classes and IDs of the elements using Firebug or a web developer tool (this is also covered in Chapter 5, Applying Images).
Let's modify the default block style.
You can see the block background color is within
<div class ="block_content">
.Look for the following in the
global.css
file:/* Default block style */ div.block { margin-bottom: 1em; width: 191px } #left_column div.block, #right_column div.block { padding-bottom: 5px; background: transparent url('../img/block_footer.gif') no-repeat bottom left } div.block h4 { text-transform: uppercase; font-family: Helvetica, Sans-Serif; font-weight: bold; font-size: 1.2em; padding-left: 0.5em; border-bottom: 1px solid #595A5E; padding-top: 2px; line-height: 1.3em; color: #374853; height: 19px; background: transparent url('../img/block_header.gif') no-repeat...