Skip to main content

Drupal Planet

Working with Template Variables

This is the second article in the series of Packpub Drupal theming articles from their new book Drupal 6 Themes—Working with Template Variables in Drupal 6.

As we have seen in the first article Creating Dynamic CSS Styling, Drupal produces variables that can be used to enhance the functionality of themes. Typically, a theme-related function returns values reflecting the state of the page on the screen. A function may indicate, for example, whether the page is the front page of the site, or whether there are one, two, or three active columns (for example, the variable $body_classes). Tapping into this information is a convenient way for a theme developer to style a site dynamically.

Creating Dynamic CSS Styling

Shortly I will be reviewing Drupal 6 Themes by Packt Publishing. As a primer to the review Packt Pub have granted me rights to publish selected articles from Drupal 6 Themes. Here is the first in the series of four articles—Creating Dynamic CSS Styling in Drupal 6.

In addition to creating dynamic templates, the Drupal system also enables you to apply CSS dynamically. Drupal creates unique identifiers for various elements of the system and you can use those identifiers to create specific CSS selectors. As a result, you can provide styling that responds to the presence (or absence) of specific conditions on any given page. Two of the most common uses of this technique are covered below: The creation of node-specific styles and the use of $body_classes.

Fix your OpenID Login Icon

Doesn’t it bug you that through 10 versions of Drupal 6 that dam OpenID icon is still hiding under the link text? Granted Garlands default styles somewhat mitigate the issue but for most themes the display of the OpenID icon on the User Login block and the Drupal login page remains broken.

In this short article (its not a big problem) I have outlined the issue and offered up a CSS solution that requires nothing more than dropping it in your themes CSS file and making rudimentary adjustments. On with the show!

Update: my patch to fix the OpenID icon in Drupal 7 core passed the test bed but needs some testing in Linux and Mac browsers, if you have the opportunity please test the patch! and has been committed to HEAD for D7 - horray!

Earth Taxonym - Open Source Global Locations Taxonomy

The Earth Taxonym project was launched this week and proposes to build a global locations taxonomy that will be made freely available to anyone. The basic idea is that you join the site and fill in locations in your area. Locations are arranged in a hierarchy so are highly suitable for categorisation or navigation for many Drupal sites—directories, travel sites, property sites and more.

Setting Blocktheme Classes with subtheme_preprocess_block

I’ve become a big fan of the fantastic Blocktheme module. Up until now I’ve followed the README instructions and either built blocktheme templates or just printed the $blocktheme variable in my block.tpl.php and block-xxx.tpl.php templates.

Thats all well and good, but in my current project I wanted to be able to theme blockthemes by region. The main reason for this is we are making just very minor changes to the block styles depending on the region and we see no point in creating additional blockthemes.

Using hook_theme to modify Drupal forms

I’m going to show you how to use hook_theme to make some commonly requested changes to the Search form and the Comments form in Drupal 6. We’re also going to learn how this is done in your Genesis subtheme and the normal way of doing things. Take it as read the that the Genesis method also works for Zen sub-themes since the implementation of hook_theme for subthemes is the same.

Take Control of your Homepage with Nodequeue, Views and Panels

Diagram showing the onion layers in the Drupal front page

Recently we built this site, you’ll notice the homepage is fairly customised with lists of content rather than Drupals default river-of-news (or should that be river-of-nodes?). “How to configure” this type of Drupal front page is a common question in the Drupal forums so I’d thought I let you in on the secret, after all, that’s what we’re here for eh?

For this tutorial you going to need:

Download those modules and install them in your Drupal test site. FYI Informe21 is a Drupal 5 site but the theory holds true for Drupal 6.

Fig 1. shows us the “onion layers” of the layout we’re going to build. You can see how each layer is embedded in the other - blocks in the mini panel panes, mini-panel in the region and finally the region is printed in the template file. This is just to give you a visual representation to help you get your head around the concept. Ok, on with the show!

Add <span> tags to Primary links for Sliding Door Tabs

In the upcoming series of Genesis video tutorials I will be presenting a segment on how to build sliding door tabs for Drupal’s Primary links.

As you may know to get the full hover effect working in Microsoft’s venerable Internet Explorer web browser we need to wrap the anchor text in <span> tags, since IE does not support the :hover pseudo class on anything but an anchor, bless its little heart.

Now, the standard Drupal “fix” for this is to override the theme_links function. I’ll detail that here, but first I want to explore another idea I hit on recently - using jQuery to get the job done.

Transparent PNG images in IE6 with Drupal and jQuery

Out of the box IE6 does not support the use of PNG 32 transparencies. While most of the time this is not a big deal, sometimes you really want, or need, to use images with a transparent background and neither PNG 8 nor gif will cut i.e. you just need more than a few hundred colours.

Thankfully for us Drupal users there’s a jQuery plugin called pngFix that we can use to mop up IE6’s inadequacies. However, it comes at a price. You can kiss goodbye to clean markup and somewhere along the line there’s likely to be trouble.

Add JavaScript to Drupal 6 for the front page only

This cropped up in the Drupal forums today, again, so I dug this bit of code out since I was messing about with recently. If you want to load a .js file only for the homepage there’s a couple of ways of doing it.