December 2011
Intermediate to advanced
170 pages
3h 50m
English
Now, if I go back to my home page and inspect the code Views just created, I’ll see what’s highlighted in Figure 13-14.

Figure 13-14. Hey now—we have a new class name to use in our Name header!
From there, it’s a simple matter to start putting this together in CSS. I work with LessCSS, a CSS framework that allows you to set variables for colors, fonts and other CSS attributes, and allows you to nest styles. You’ll learn more about that a bit later, in Chapter 15.
Here’s the .less code that I used to style the headings:[12]
/* 1.0 Colors & Fonts 1.1 Colors */ @gray: #8D8D7D; @dkgray: #4D4545; @mdgray: #666; @ltgray: #999; @palegray: #ccc; @red: #D32F00; @orange: #D17103; @cyan: #47A7BF; @dkcyan: #183b44; @green: #89A155; @gold: #eeb200; /* 2.0 Homepage Event Categories block */ #zone-content .homepage-events { .views-row { margin-bottom: 2em; text-align: center; /* center the image in the container */ overflow: hidden; /* hide the excess when it resizes */ } h3 a { font-size: .75em; display: block; padding: .5em 0; color: white; text-decoration: none; text-align: center; } .Bikes-Bees-and-More { background: @green; } .Butchery-Meat-amp-Fish { background: @red; } .Canning-amp-Preserving { background: @gold; } .Cooking-Baking-amp-Drinks { background: @dkcyan; } .Crafts { background: @cyan; } .DIY { background: @ltgray; } .Eco-Home-amp-Lifestyle { background: @dkgray; } ...Read now
Unlock full access