Thursday, 3 September 2009

Customising the Drupal Theme of my Site

At last I have finally got round to doing a bit of theme development on my site! I have been meaning to get round to this ever since I first installed Drupal and promoted it to being my default website.

For too long I was stuck with the default Garland theme which everyone knows is just the default theme that comes out of the box with Drupal and looks a bit poor as it means you haven't bothered to change it and make it your own. Not that I am saying 'looks' are what make a good site, obviously content is rather important (and yes, I know mine is still lacking in it, but I am working on it).

I have had a look at it briefly on and off since getting drupal running, and kept getting scared off by the complexity of the seeming maze of css style sheets and templates, but after deciding to get my head around it finally I found some useful methods for easy theme development... in a very basic way of course.

Help from the drupal forum and also people in the irc channels (#drupal and #drupal-support on the freenode network) really went far in getting me started. The best bit of advice was to use a nice basic starting theme, which has a very basic layout, giving you an effectively blank canvas, from a CSS styling point of view.

The theme I started with was the zen theme which has excellent documentation to get you started.

Then I just changed my 'admin theme' (Administer > Site Config > Admin theme) to my new theme, so that I could play around with it whilst just in the admin pages, leaving the public part of the site in tact until my new theme was ready.

Then basically I just made good use of the Firefox addon web developer, which is perfect for interrogating a website to find out what CSS style sheet is driving what bit of page, so you can gradually track down all the bits you need to alter and create your own custom style sheets.

One thing to note was that to control the navigation menu, I had to copy the system-menus.css from /modules/system into my theme directory, rename it and add the entry into my theme.info file to make use of it.

So I am pleased with myself now. I have learnt a bit more, which is never a bad thing.

Edit: I don't like the gradient bar at the top at all any more!

No comments:

Post a comment