My Drupal Blog

If you’re building more than a couple of Drupal themes it can be very beneficial to create a base style.css file first.

In short, this is a stylesheet which acts as a starting point when creating a new theme, and contains all the things you’ll need to style. Organizing, and even indexing, this base style.css file will allow for maximum efficiency when building, and by creating a comprehensive base style.css file you can also save yourself the worry about whether or not you’ve left anything out!

The following is a list of most things which need styling if, for example, you wanted to cover all of the core modules:

• admin
• aggregator
• blockquote
• book
• breadcrumb
• code
• comments
• footer
• forms
• forms - admin tables
• forms - search
• forms - user-login-form
• forum
• general
• header
• layout
• links
• lists
• messages
• mission
• node
• pager
• poll
• pre
• primary links
• progress bar
• secondary links
• sidebar
• tables
• tabs

Sounds like a fun recipe huh? Well, having tried (and failed) previously to get this combination to work properly, I recently did some work for a client which demanded that .png files (Portable Network Graphic - image files which have transparent bits) were both used and looked correct in Internet Explorer 6.

Basically, I wanted to accomplish four main things:

• I wanted a real .png file with full transparency to look correct in IE6, and behave as it’s supposed to (i.e. letting you see some or all of what’s beneath it).
• I wanted to achieve this using only CSS – no Javascript, no PHP, no Flash, and no other trickery.
• I wanted this to work for background .png files, that is files which are called from the style.css file like so:
  #div_1 {
  background-image: url(images/druplicon.png)
  }.
• I wanted the solution to be as tidy as possible.

The trouble is that if you just try to load a .png into IE6 normally, you get the following outcome:

Ouch!

After some googling around, and a bit of trial and error, I came up with a solution which satisfies all of the above criteria. Here’s what I did:

More sites these days are using a custom image like a magnifying glass, or the word 'GO' in a circle, instead of the default search submit button. Here's a way that you can do the same thing with the Drupal search function, and only have to use CSS - no PHP and no editing template files (well, almost).

The image on the left shows the default search submit button, and the image on the right shows the new search submit button that we'll replace it with.

It's really just a simple three step process:

• Step 1: Create your image
• Step 2: Add a conditional comment to your page.tpl.php file
• Step 3: Add your CSS

Step 1: Create your image

The image can be of whatever you like, and is probably best in .jpg format.

Just make sure you save it into your theme's normal images folder.

For instance, if I am going to use an image of a magnifying glass called 'mag_glass.jpg' I would save it to '/sites/all/themes/mydrupalblog/images/mag_glass.jpg'

One thing you can’t argue with when it comes to Drupal is that there sure are a lot of modules. In fact, a quick total up of Drupal modules for version 5 comes in at over twelve hundred (1200). And even if you knock off two hundred or so for instances where a module is listed in more than one category, that’s still around a thousand different modules that people might be using on their Drupal site. The point being, that each module will produce a different output which requires theming.

Now this isn’t a problem if you’re designing a theme for a specific client, because obviously that client will only want a finite amount of functionality, and will thus only be using a set number of modules – all of which they’ll tell you about (hopefully ;) ).

But what if you want to release a theme on drupal.org? How many modules should you provide theming for? And, for that matter, what’s the best way to go about creating themes which cover as wide a number of modules as possible?

The answer to the first question is ‘that depends’. A good rule of thumb is to say that you should, as a minimum requirement, be looking to create a theme which covers all of the core modules, both required and optional (a list of which can be found in the modules section of your site’s admin). But what about all the other modules?

This post really only needs to be two lines long.

Line 1 – Download and install Firefox
Line 2 – Install Firebug

This point may not need making for a lot of people and so to them I apologise, but it’s worth making anyway because Firefox, and the extensions which one can use with Firefox, really can make a Drupal themer’s life so much easier. And even if only a couple of people who weren’t using these tools before reading this post start to that’s got to be a good thing. It’s also worth making this point because it’s easy to forget just how impressive Firebug really is.

Before Firebug, the Web Developer’s Toolbar was the long-time king of Firefox extensions for web designers. It installs a neatly arranged toolbar packed with useful stuff. If you don’t have this extension it’s definitely still worth getting as it has some nice features such as local validation checks, the ability to identify the exact size of any fonts, and an option to view the complete CSS of any site. But in terms of debugging, nothing today quite matches up to the power of Firebug.

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.