This post originated from an RSS feed registered with Ruby Buzz
by Red Handed.
Original Post: Behind The Day Boxes
Feed Title: RedHanded
Feed URL: http://redhanded.hobix.com/index.xml
Feed Description: sneaking Ruby through the system
Ibraheem Umaru-Mohammed wrote yesterday, asking how the day header boxes work that you see to the right on the front page. Since this site is primarily comprised of div elements, such things only require a bit of css trickery. And you can find a wealth of css tutorials around, including the teaser box and the trashbox.
Adding a daily box to Hobix is really simple. In your hobix.yaml, you simply override the default day_header chunk for your Quick template. Like so:
I have an empty file called index.html.quick-summary in my skel directory, so I get an index page that uses the default template with summarized entries. Overriden chunks (like the above) apply to .quick, .quick-archive and .quick-summary template files.
The HTML above consists of two div elements: one with class dayHeader and, inside, one with class dayBox. The weekday name is an h2. The date is an h3.
Then, I made two images in Photoshop. A left-side edge, which extends to the right as far as I’d like the box to stretch. And a right-side edge, which is short.
boxleft.gif
boxright.gif
There are likely better ways to do this, but I was in a rush and I wanted to start posting all this great news, you know?? So, I positioned the stretch images as the lower background and the short image as the higher background. The higher background is placed top right in the style definition and always covers up the excess stretch.
So, here’s the style definition I popped in my site.css: