Along the right side of the forums there are a series of modules. “Modules” visually, “Modules” literally in code, and “Modules” in that the content they contain is a related group, separate/different from the content in other modules.
The first one we look at is the Categories module. Vanilla Forums literally puts these in a folder called “modules”, which is nice. This particular one, as you might guess, is “categories.php”.
We find the place where the title is output, give it a class, and start styling. We just add a little bottom margin as is appropriate for this title, but not every single <h4> out there.
Then move into styling the container itself. Modules tend to have a class name of “Box” inside Vanilla Forums. Our module HTML class is “module”. We could begin the fight of finding every single module in Vanilla and adding our own class. Some days I feel up to that challenge and some days I just say “Work smarter, not harder.” Today we’ll work smarter. We’ll make a placeholder selector in Sass that has the styles of a module, but without re-creating our existing .module class.
%fake-module {
background: white;
padding: $padding;
clear: both;
box-shadow: 0 0 5px rgba(black, 0.2);
margin: 0 0 $padding 0;
position: relative;
}Placeholder selectors don’t output any CSS by themselves at all. But they can be @extend-ed. So now we can just make all Vanilla-style boxes have our module styling.
.Box {
@extend %fake-module;
}We learn that whiteSmoke is an awesome color.
In the markup that Vanilla gives us for the list of categories, it gives us an “active” class so we can change the style a bit and make it obvious which category a user is on (since this module is on lots of pages, homepages and category pages included).
We run into a little thing where using -$variable didn’t work right, we had to do -#{$variable} instead. Just one of those things about Sass or Ruby or whatever.
At about 10:30, I explain the theory of how CSS triangles work. We’re considering using a triangle on the left of the active class, as our wireframes dicate.
We finish off by positioning the number of threads off to the right to give users a sense of how big the category is.