For quite a long time I'd been wishing this blog had an original theme. Not that I dislike Marvin, but I felt it was time to create my own theme, especially after doing work on adding settings to drupal themes.
Since today was bank holiday for the Assumption day, I decided I'd use it to create a theme after one of my pet peeves: white space on web pages.
Design choices
Most page designs tend to use a two- or three-column design, making them look like some variant on these paradigms:
+-----------------+ +----------------+ | header | | header | +-------------+---+ +---+--------+---+ | | | | | | | | main |col| |col| main |col| | | | | | | | | | | | | | | +-------------+---+ +---+--------+---+ | footer | | footer | +-----------------+ +----------------+
Now, this is all nice and well, but for pages heavy on content, three-colum designs like the one above tend to look like this when put to use:
+----------------+ | header | +---+--------+---+ |aaa|xxxxxxxx|ccc| |aaa|xxxxxxxx|ccc| |aaa|xxxxxxxx|cc | |a |xxxxxxxx| | | |xxxxxxxx| | | |xxxxxxxx| | | |xxxxxxxx| | | |xxxx | | +---+--------+---+ | footer | +----------------+
But I tend to favor this type of look, that loses less whitespace because the text expands to fill it below the additional content boxes:
+----------------+ | header | +---+--------+---+ |aaa|xxxxxxxx|ccc| |aaa|xxxxxxxx|ccc| |aaa|xxxxxxxx|cc | |a |xxxxxxxx+---+ +---+xxxxxxxxxxxx| |xxxxxxxxxxxxxxxx| |xxxxxxxxxxxxxxxx| |xxxxxxxx | +---+--------+---+ | footer | +----------------+
So here is the new "nested" theme. Full CSS, no tables... and no columns: the left- and right-blocks are just as high as they need to be, and main content fills the blanks. And at a lower level, even the header has a similar structure: two floated blocks, left and right, to hold logo, site name, site slogan, primary and secondary links, and search box.
Availability
I've published this "nested" theme in my CVS sandbox on drupal.org. It is not being submitted to the "themes" section of drupal currently because you'll notice many, shall we say... interesting (?) consequences of not having columns for the side blocks.
UPDATE 2012-02-26 Historical CVS sandboxes like this one have been deleted in The Great Git Migration of 2011-02. Now, for the amateur, here is a screenshot, and the code is available on http://code.osinet.fr/fgm/drupal_theme__nested.
CSS notes
Caveat lector: I'm basically a software engineer, not a CSS expert designer. The design on OSInet sites like Riff News is created by the excellent team at Oliska (2012-02-26: link deleted: Oliska now a domain partking).
Archive.module
The most interesting/annoying part was with archive module, which table would normally expand to 100% of the page width and carry the block width with it. A workaround has been used: forcing the block width to 17 ems, which makes for a nice width considering that this table normally holds rows of 14 digits plus the grid drawing.
When I find time, I suspect parameters like this block width or the colors used will be made settable in the UI using the themesettings module or any better equivalent mechanism to come up in drupal core.
UPDATE 2006-10-15: I've reverted the site to bluemarine. The "nested" experiment shows being a software engineer is an entirely different thing from being a designer.
When a H2 is an inline element
Another interesting tidbit is the CSS used for the node titles. In Firefox or Opera, you'll notice the H2 have a background and border, the link to the node page is not underlined, and both border and background are limited to the actual textual content of the H2 (the title text itself), while in MSIE6, none of this styling is present. This is a consequence of the selector user: h2.title>*
According to CSS syntax, this matches any direct child of a H2 element with class "title", which happens to describe node titles on list pages. Now, H2 is a block element, so styling with a background or border will mean applying these to the full width of the container. In MSIE, this is a cul-de-sac. However, in both Opera and Firefox, H2 is the block container to an anonymous text block, which is an inline element. Since it is unnamed, it cannot be accessed by a specific selector, but using the child selector and asterisk joker, we can get to this inline content, and style just it. Hence the limited-width background and border.