CMS Themes

In my Joomla vs Drupal vs Wordpress post , I’ve already talked about “themes”. The purpose of this post is to tell you a bit more about what they are, where you find them, how you install them, and last but certainly not least how to personalize them.

What are themes?
Themes define the design of your website, how it looks to you and to your visitors.
We have to admit, You may have such interesting, funny or just great content, when the design of your website stinks, you’re very likely to lose visitors.
Each CMS comes with one or more themes in the default installation. Unfortunately this will most probably be the theme that’s used on the website of that CMS. When you know a bit about CMS, you’ll probably recognize the blue design of Drupal, or the grey and white design of Wordpress out of thousands. And let us be honest, we don’t want our website to look like the Drupal or Wordpress site. So we need another design, another theme.

Where do we find themes
The first resource of themes is the website of your CMS:
Drupal:
http://drupal.org/project/Themes
Wordpress:
http://wordpress.org/extend/themes/
This should already get you started, I guess.

If you don’t find what you like on the CMS websites, don’t worry yet, there are lots of other websites which provide themes for free or for a small contribution. A few examples:
Free sites:
cmstheme.net:
http://www.cmstheme.net
freecmstemplates.com:
http://www.freecmstemplates.com/

Paysites:
themestock:
http://www.themestock.com/
websitetemplates.bz:
http://www.websitetemplates.bz/wordpress-themes.html

Still haven’t found what you’re looking for? It’s possible that you already had a certain design in mind, which is so unique that it doesn’t exist in a theme yet. There are several options left. If you want to pay for it, there are several companies and web designers who are specialized in the creation of themes. If you want to pay less, you can also purchase software that makes the creation of themes more easy (e.g. premiumwp). I must add here that I never tried such a software packet before, but that it seems to me like you have a lot of limitations (a certain amount of backgrounds, fonts,…). My personal opinion is not to use this kind of software. If you need to have your theme fast, buy it, if you have the time, create it yourself.

How to install Drupal themes
In this part I’ll only handle the installation of themes in Drupal, but the procedure is more or less the same for every other CMS (just keep in mind that in Joomla themes are called “templates”).

First thing to do is download the theme you like. You will normally receive some kind of compact archive (zip, tar.gz,…), which you extract to the “themes” folder of your Drupal installation.

Afterwards go to Administer > Site building > Themes
Find the theme you’ve just installed and check the “enabled” box. If you also want to start using the theme immediately, check the “default” button. After pressing Save, you’ll see your layout change. Now that was easy, wasn’t it?

How to personalize Drupal themes
You’ve downloaded your theme, you’ve installed it successfully, but probably there are still some things that are not 100% like you want them. For example you want a different font, different colors, a different background image, and so on.
Well here’s some good news: themes are fully open source, which means you have access to all of the code, and you’re able and authorized to change it. Of course, depending on what you like to change, this requires some knowledge of CSS, HTML, PHP and/or Javascript.

But let’s not scare you away yet, first we’ll have a look at the file structure of themes, to see how things work.

page.tpl.php
This is the main template , together with style.css it forms the foundations of your theme.
The first thing you notice when you open this file is that it consists of PHP statements with embedded HTML. This is where the “what goes where” takes place.
When you go through this file, you’ll notice the use of a lot of variables ($site_name, $primary_links,…). These are values that come from the Drupal administration. An overview of these standard variables can be found on the Drupal website

style.css
In case you don’t know what a CSS is: it’s Cascaded Style Sheets. Which means that this is where your styling takes place. Here you define your fonts, colors, etc for each single part of your theme

the other .tpl.php files
These files contain the design of different parts of your theme, normally the name already tells you which part it’s about:
block.tpl.php : design of blocks
comment.tpl.php: design of comments
page.tpl.php: design of pages
and so on.
All of these files receive their styles from style.css

logo.png
The logo file. If you want a different logo, just replace this file

the .info file
As of Drupal 6, this file is obligatory. It contains some basic information of your theme.

With only those files, you should be able to create your own theme. Of course there’s more than that. When you browse through the file structure of more sophisticated themes, you’ll notice some more php of inc files (which are called from the tpl.php files), images (background, border,…), fonts, …

HINT: before you start messing up your theme (if you didn’t already), I propose that you first create your own theme as a copy.
This happens as follows:
You create a new subfolder in the sites/all/themes folder (note that this is different from the standard theme folder!) and you call it whatever you want to call your theme. E.g. mytheme.
You copy the content of the folder of the theme that you want to edit into your “mytheme” folder.
You rename the info file to mytheme.info (of course replace “mytheme” by your theme name).
You edit the info file, and wherever you find the name of the original theme, replace it by “mytheme” (normally this is only for “$id” and “name”).
And that’s that. When you go to Administer > Site building > Themes, you should now see your new theme.
It might also be handy to take a backup of your theme folder once and a while.

HINT: If you’re new to Drupal theme development, I propose that you start with the blue marine theme. This is quite a basic one, which only contains the basic files.

Have fun developing!

0 comments:

Post a Comment