My Drupal Blog

Very quickly, here's a useful tip if you're theming any kind of Drupal form. Just put the following in your overriding .tpl.php file

and it'll output a complete list of things you can theme.
Not ground breaking I know, but one of those things I can never seem to find when I want!

Whenever I start work on modifying an existing theme it’s always important for me to first understand how the whole thing is hanging together. Whilst most theme folders will, broadly, contain the same files (node.tpl.php, template.php etc.) the content within those files can be quite different, and taking a bit of time at the beginning of a project to understand what’s where can save you a lot more time in the long run.

Ordinarily, I will begin by looking at the page.tpl.php file. This file contains the main chunk of code which determines where stuff is going to end up on your web page, and how it will be structured. The problem is that this file can seem a bit confusing at times, and if you’re a little unsure about your PHP one look might just send you running ;) Unfortunately, this is particularly the case for the page.tpl.php file of Drupal’s default theme Garland, which is, at best, a little untidy.

As a way to help me more clearly understand how the whole thing is structured I duplicate the page.tpl.php file, rename it to something obvious like duplicate_page.tpl.php, and then strip out everything which is causing a mess.

Text documents with the extension .txt are often found in folders downloaded from drupal.org, such as modules, themes, and project releases.

As an example, lets look at the folder for Drupal 5.1.

It contains a file called install.txt which, logically, I might want to read before installing. However, when I open the file by double-clicking on it, I just get a pretty illegible chunk of text.

All of the words are there, but everything is lumped together with no formatting, and there seem to be little rectangular boxes all over the place. So what do I do?

Well, I could just trawl through the file and make the best of it, but there is a far better solution - open it using Word.

Here's a quick tip for anyone wanting to easily apply a rule to all of the elements within a design. Just use

and you can target everything within your design, as the * selector is universal.

But what's a practical use for this?

Well, anyone who uses CSS knows how annoying it can be to try and get all of the margin and padding correct, and make it look the same across different browsers.

This can be especially tricky when you consider that, before you've even written one line of code, your browser is applying its own default CSS styles. This is because all browsers have their own in-built style sheets which, whilst they may be quite basic, will affect your design.

So a simple tip is to clear out any external margin and padding before you start. To do this just use the following code at the top of your style sheet:

This zeros out the margin and padding on all elements and gives a nice clean starting point, making it (hopefully;) ) easier to diagnose any future problems.

Today I'd like to show you an easy way to use relative font sizes in your Drupal theme.

Basically, there are just two types of font sizing:

• Fixed - usually defined in px or pts
• Relative - usually defined in ems or %.

The big difference is that relative font sizes can be re-sized by users, whereas fixed font sizes cannot in IE6 or earlier. So, if you design a theme with fixed font sizing and someone with a visual impairment who is using IE6 or earlier wants to manually re-size the text on your site they aren't going to be able to. Not good, especially considering that according to W3 Schools the majority of users still browse with IE6.

So how, then, do you go about implementing relative font sizing?

I start by setting a global font size of 1em on the body.

This means that any text on the website will be shown at 100% of the default size that the user has their browser set to. Firefox, Internet Explorer, and many other browsers have a default font size of 16px. So, by setting a global font size on the body of 1em our font will show up at 16px in most peoples' browsers.

This might be okay if you're going for a classic big text web 2.0 look, but I generally fancy something a touch smaller so I then set a relative font size of 75% on the next largest element, like this:

This means that my text is now 75% of 1em. Or, to put it another way, my text is 75% the size of the users default browser font size.

As the majority of users will have left the default browser size of 16px, this means that my website font will be 75% of 16px = 12px.

I got the idea for today's post after I received an e-mail during the week from Colin who was wondering how I added a permalink, and then styled the links section so that everything (comments, read more, permalink etc.) lines up.

I thought this might be of general interest, so here's the answer.

It's basically just a two step process:

• add some markup to the node.tpl.php file
• add some css to the style.css file

Step 1 - Add markup to the node.tpl.php file

To start with I just added some markup to the links div, and then positioned the whole links div at the end of my node.tpl.php file, right before the closing node div tag.

This positioned the permalink within the links div before the other links.