The Artima Developer Community
Sponsored Link

Ruby Buzz Forum
Behind The Day Boxes

0 replies on 1 page.

Welcome Guest
  Sign In

Go back to the topic listing  Back to Topic List Click to reply to this topic  Reply to this Topic Click to search messages in this forum  Search Forum Click for a threaded view of the topic  Threaded View   
Previous Topic   Next Topic
Flat View: This topic has 0 replies on 1 page
Red Handed

Posts: 1158
Nickname: redhanded
Registered: Dec, 2004

Red Handed is a Ruby-focused group blog.
Behind The Day Boxes Posted: Dec 26, 2004 6:57 AM
Reply to this message Reply

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
Latest Ruby Buzz Posts
Latest Ruby Buzz Posts by Red Handed
Latest Posts From RedHanded

Advertisement

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:

 - hobix/out/quick:
     day_header: |
       

.">.">

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:

 .dayHeader {
     background: url(/images/redhanded-boxleft.gif) no-repeat top left;
     float: right;
     margin: 0px 5px;
     text-align: center;
 }

 .dayBox {
     background: url(/images/redhanded-boxright.gif) no-repeat top right;
     padding: 9px 10px 12px 10px;
 }

The float: right was used to push the header boxes to the right and let the blog text flow around it. Which I think turned out really nice.

Read: Behind The Day Boxes

Topic: Pure Ruby PostgreSQL interface released Previous Topic   Next Topic Topic: Geek Birthday Humor

Sponsored Links



Google
  Web Artima.com   

Copyright © 1996-2019 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use