Contributed the Vineyard theme to Drupal

vineyard lorem ipsum thumbnail

Last week I finally uploaded to the Vineyard theme - ie the theme I created and use for Releasing the theme as open source is something I always planned of doing, but never really got round to it. I'm especially proud of the fact the theme looks different than most Drupal themes I've seen, so I hope others can use this as a basis for creating nice sites.

In fact, this is the second iteration of Vineyard already. The first version of was done with Drupal 4.7, and I had used the legacy Drupal theme system there. When I upgraded to Drupal 6 last year, that theme became so broken, that it was easier to just recreate the same look from scratch using the PHPTemplate system.

I feel I'm pretty good at using CSS, except for one thing. I still ended up using table-based layout. I never really figured out how those sites do it with a pure-CSS 3 column layout and get it flexible enough for all screen sizes. I know it can't be done, I would just need so much more time for tweaking and testing.

Do you recognize the following features, all of them are of course used on

Some special tricks used in the theme:

Normal links (but not menu's and other Drupal generated links) are preceded by a small grape icon added from CSS. The grape can of course be substituted with some other icon.

Similarly there is a background image which is positioned relative to the browser window, ie it does not scroll with the page. The default image is a group of grapes and a leaf. Of course this image can also be easily changed.

Blocks placed in the "header" and "footer" areas are modified so that instead of being inside <div> elements they are inside a <td> cell of a table, and laid out next to each other, rather than on top of each other. This is useful if you want to place small links, icons or other items in these areas. The 2 lines of code enabling this are in page.tpl.php.

The class attribute of the <div> element containing a node also contains the node type as a class. Example: <div class="node story">. This makes it straightforward to apply CSS styles for a specific node type. (Like different
font for book pages.)

Add new comment

The content of this field is kept private and will not be shown publicly. Cookie & Privacy Policy
  • No HTML tags allowed.
  • External and mailto links in content links have an icon.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [fn]...[/fn] (or <fn>...</fn>) to insert automatically numbered footnotes.
  • Each email address will be obfuscated in a human readable fashion or, if JavaScript is enabled, replaced with a spam resistent clickable link. Email addresses will get the default web form unless specified. If replacement text (a persons name) is required a webform is also required. Separate each part with the "|" pipe symbol. Replace spaces in names with "_".
About the bookAbout this siteAcademicAmazonBeginnersBooksBuildBotBusiness modelsbzrCassandraCloudcloud computingclsCommunitycommunityleadershipsummitConsistencycoodiaryCopyrightCreative CommonscssDatabasesdataminingDatastaxDevOpsDrizzleDrupalEconomyelectronEthicsEurovisionFacebookFrosconFunnyGaleraGISgithubGnomeGovernanceHandlerSocketHigh AvailabilityimpressionistimpressjsInkscapeInternetJavaScriptjsonKDEKubuntuLicensingLinuxMaidanMaker cultureMariaDBmarkdownMEAN stackMepSQLMicrosoftMobileMongoDBMontyProgramMusicMySQLMySQL ClusterNerdsNodeNoSQLodbaOpen ContentOpen SourceOpenSQLCampOracleOSConPAMPPatentsPerconaperformancePersonalPhilosophyPHPPiratesPlanetDrupalPoliticsPostgreSQLPresalespresentationsPress releasesProgrammingRed HatReplicationSeveralninesSillySkySQLSolonStartupsSunSybaseSymbiansysbenchtalksTechnicalTechnologyThe making ofTungstenTwitterUbuntuvolcanoWeb2.0WikipediaWork from HomexmlYouTube