Drupal theme hacking - creating a sub-theme

In a previous blog post I introduced the basics of how Drupal themes work. Let's dig a bit deeper and create our own sub-theme. What you need, is a working Drupal environment and at least one custom theme installed in sites/all/themes. During this tutorial I will create a sub-theme for the Colourise theme. If you want to use a different starting theme, the explanation below should still apply (apart from the name of the parent theme).

The sub-theme I want to design is based on the Colourise theme, and will be used for my ShutterFreak.net website, hence the very original theme name “ShutterFreak Colourise” {#emotions_dlg.grin}

The first step in creating a Drupal theme (or a Drupal sub-theme), is creating a theme directory in sites/all/themes. If you manage a theme and all of its subthemes, then it makes sense to create the sub-theme directory as a subdirectory of the parent theme. This is not at all a hard requirement. I decided to create the sub-theme directory on the same level as the parent theme's, hence the “ShutterFreak Colourise” theme resides in sites/all/themes/shutterfreak_colourise.

Next we have to create the ‘theme info file’ in the theme directory. I named this file shutterfreak_colourise.info. The format of this file is “KEY = VALUE”. Lines that start with a semicolon (‘;’) are comments. At the very minimum, this file should contain this:

; $Id: $
name = ShutterFreak Colourise
description = Dark tableless design with valid XHTML/CSS, based on the Colourise theme.
version = 0.1
core = 6.x
engine = phptemplate
base theme = colourise

What does this mean?

  1. $id: $ is a CVS or SVN placeholder. When this file gets checked in, this placeholder will automatically be replaced with basic versioning and tracking information from the source code control system. Since this line starts with a semicolon it is treated as a comment by the parser.
  2. name specifies the human readable name of the theme. This name appears in admin/build/theme.
  3. description gives basic information about the theme. If it depends on another theme, make sure to specify this here, preferably with a link to the parent theme.
  4. version is the version of your sub-theme.
  5. core represents the core Drupal version your theme works for. For Drupal 6, this value is 6.x.
  6. engine represents the theme engine that applies to this theme. The built-in Drupal theme engine is phptemplate.
  7. base theme is the most important statement here: it specifies the relationship between the “ShutterFreak Colourise” theme and the parent theme: Colourise.

The last finishing touch you may want to do, is adding a custom favicon. There are various on-line resources that accept an image and will transform it for you into a valid favicon.ico file. The favicon for your theme must reside in the theme directory. In my situation it resides at sites/all/themes/shutterfreak_colourise/favicon.ico.

Now it is time to try out your first sub-theme: navigate to admin/build/theme, enable your theme, and behold! Now you can start playing around with blocks and position them in your theme.

In a next post we'll dig still a bit deeper in how to develop a Drupal theme. Time to write some PHP code by then Wink

JBarczak's picture

Great Article

Howdy,

I stumbled upon this article when looking up resources for an internal Drupal web page I'm working on for someone. I'm using the same Coulorise theme as you and I found the above sub-theme article very informative. Especially the part about favicons, which will be very helpful. Smile

I've been searching around your site and I had two more quick questions for you. First off I was wondering what wysiwyg editor you were using. I had tried a few but none of them quite did what I wanted them to do. I was also wondering what module you were using for your photo gallery. The one I am currently using isn't really working out all that well.

Thanks for the great article and if you could help with the other two questions it would be much appreciated. Cool

Olivier Biot's picture

Re: Great Article

Thank you for your reply. I am glad to see it is helpful for you Smile. I should resume writing the ‘Drupal Theme Hacking’ sequel but I've been busy with some semantic matters in the meantime…

To answer your questions:

  1. The WYSIWYG editor I am using is TinyMCE (version 3.2.7 at the moment), and it is made accessible to Drupal through the wysiwyg module. This module provides a generic framework to integrate your preferred WYSIWYG editor in Drupal. It is thr preferred way to integrate a WYSIWYG editor nowadays. In the past I have been using FCKEditor, but I decided to revert to TinyMCE due to a couple reasons. One of them being the availability of the TinyMCE Node Picker module which facilitates linking to existing content (nodes) on your Drupal site.
  2. The photo gallery is not Drupal based since it started before I ventured into Drupal. It is based on the free JAlbum tool which generated albums based on readily available skins and your photos (including tons of metadata included in the photos). I have been looking at ways to integrate photo albums in Drupal but so far I did not find yet any conclusive solution to fit my needs. Hence I stick to JAlbum for my photo galleries Smile.

Hope this helps!

Olivier

Massimo's picture

drupal & jalbum

Hello Olivier;
sorry for attaching this to an old post but I'm trying to understand the logic & structure of your drupal + jalbum gallery website. Could you explain they way you built it? My first attempts only produced a complete mess. Is it 100% drupal down to the index page and then just plain links to the individual galleries? Or what?
Thanks for your time
ciao
Massimo

Olivier Biot's picture

Re: drupal & jalbum

Hi Massimo,
I run Drupal and jAlbum independently from each other. I upload my jAlbum galleries to my site, and then re-create the gallery code via jAlbum. There are a couple headers and footers that I defined for my site, but otherwise it's out of the box jAlbum.
In Drupal I added a link to my top gallery (the gallery index) as a primary link. That's about it.
I know that I should re-do and update my galleries, maybe with another jAlbum skin, since my galleries have been created with a rather old version of jAlbum. The skin is even a heavy customization of ExhibitPlus, originally created by Mark Fyvie. It's sad to know he passed away Cry.
Best regards,
Olivier

Massimo's picture

Re: drual & jalbum

Hi Olivier;
thanks for the fast reply. I'm really sorry to learn about Mark - I just recently discovered jAlbum and I only explored part of the forums.
The part I don't understand is how to connect drupal - that I need to provide general content and different functions - and jalbum. I guess the key is that then re-create the gallery code via jAlbum you wrote. Could you elaborate a bit?
Let's say I have an existing website and I want to add a photo section about travel, with this structure:

  • mysite-root level (with drupal)
    • travel
      • 2010
        • asia
          • thailand
          • indonesia
          • malaysia
        • pacific
          • new zealand
          • cook islands
          • french polynesia

I guess I should recreate this folder structure on the server, outside drupal, but then what? How do you navigate back and forth between drupal and jalbum content?
Thanks for your time
Massimo

Massimo's picture

Re: drual & jalbum

p.s. the indents I used to simulate the folder structure got lost. First level of the gallery would be *travel*; second level: *asia*, *pacific*; third level all the countries
thanks
Massimo

Olivier Biot's picture

Re: drual & jalbum

Hi Massimo,
I recreated the indentation structure from your post using nested bullet lists, hence the edit Smile
It's been a while since I recreated albums with jAlbum, so things may have slightly changed since. What I do, is create a folder structure according to the gallery structure I want to create online. In that folder structure I add copies of the original photos I want jAlbum to process. This entire "input folder structure" is then served to jAlbum (point to the top level folder in jAlbum). Choose an output directory and jAlbum will recreate the same folder structure with the processed photos and all. Since you're feeding a directory structure (with subdirectories), jAlbum is able to create the gallery navigation breadcrumb (links showing the level in which you're currently navigating the gallery, with clickable links to go one or more folders up).
What I still have to do (apart from re-processing my galleries), is adding the top level navigation link to the galleries. Taht's typically a file called "header.conf" (depending on the jAlbum template you're using).
So, as you see, there is no hard connection between Drupal and jAlbum in my setup so far. If jAlbum were to process images as database objects, then I'm pretty sure a smooth jAlbum-Drupal integration would work pretty well. It's my ultimate hope this wil happen once: combining the best of 2 worlds. The powerful tagging and classification of Drupal linked to the powerful image processing capabilities of jAlbum are simply the best one could ever imagine to get. We're not there yet, though. Som my approach is probably the second best today Wink
Hope that helps!
Olivier

Massimo's picture

Re: drupal & jalbum

thanks again, Olivier.
I will keep testing this solution. And yes, having the two systems talking to each other would be great. For the number of images I want to post, a *traditional* Drupal approach, even with D7, is way too much work.
Talk to you soon, ciao
Massimo

Drupal Theme Garden's picture

Very useful article, thanks.

Very useful article, thanks. I thought that sub-themes could be created just from "base" themes. Thanks.

macabu's picture

Colourise Logo Issue

Hello Dude, nice blog, I just stumbled on it now, it has some good useful tips and informations one can find helpful but if you are not too busy can you give help me on something. I have the exact same theme installed on my drupal site and it seems really nice to use but I have two problems.
1. I have tried but failed in cahnging the default rainbow curtain with my own logo or pix just as you have done, but the page still re-loads the same image even though I have manually changed the bg.jpeg file, could you tell me how you did yours?
2. Following gibbozers instructions in the drupal support forum, I was able to add my custom logo by upload, but the logo still apperas on the left side of the page instead of the centre or over the rainbow curtain, I know that it is a css tweak issue but I dont know what to do, I know you aint the official support for this theme but I know you got the answers, please can you come to my assistance, you will be doing me a major favor. Thanks for a prompt response.

Olivier Biot's picture

Cache interfering?

Most likely you are being served a cached version of the page. Indeed, Drupal caches the theme files for efficiency reasons. This means that they're not read from disk every time you do a page request.
First, visit Administration » Site configuration » Performance (admin/settings/performance). Scroll to the bottom of this page, and click the "Clear cached data" button. This effectively flushes the theme cache (as well as other Drupal caches).
Once you did this, reload your page. This should display the new artwork in your theme. If not, I strongly suspect your background image is cached by your browser. You probably replaced it while preserving its name to avoid editing the theme. (Actually, this is not needed, since the Colourise theme provide facilities for overriding the style sheets in a file named custom.css. This can be configured in the Colourise theme.)
In this case, you must flush the cache of your browser, or do a force reload of the page.
Hope this helps!

macabu's picture

Just cant flush it out

Yeah, thanks for the prompt response ! Well could you believe that before I posted earlier, I had already cleared all data cache at least twice, I had also done the same for my browsers after your response, I went back and cleared it all over again at least four times over. I then went to the physical folder location and even deleted the file (i can easily re-upload it again) but the file its still showing, men! I am getting burnt out dealing with something so minute yet squandering my quality productive time, if I had another nicely dark theme I would have busted it all together, thats the problem with the free themes, no support, the dude that ported this theme into drupal don't even give a flip in the drupal forum, if you have issues or not; you just have to figure stuff out for yourself, do you have any other suggestions why this file keep showing up yet, I can't seem to loacte it anywhere, thanks again for a prompt response.

Olivier Biot's picture

Could you share a link?

If you post a link to your site I can have a look. Just tell me what I am supposed to see.

macabu's picture

Yeah, I saw your response,

Yeah, I saw your response, but I had to quickly catch a world cup match but when I returned to drop the link, an idea hit that I should delete the theme from my website altogether, then re-download a fresh copy, open it up and change the bg.jpeg on my desktop, then re-upload the folder anew having altered the file on my localhost. This I did and that did it, so I have my logo nicely placed where I want it. Thanks ounce again but can I come in often to blog and ask a few questions from time to time cos, you are definately way out of my league technically speaking, if you don't mind me turning you into answer man.

Olivier Biot's picture

That works as well

Uninstalling and deleting the theme, then re-uploading effectively clears the cache as well.
Feel free to fire your questions {#emotions_dlg.grin}

Kristine Berg's picture

Can't download

I had Colourise downloaded in Wordpress and then found this newer version. I cannot download it, I keep getting an error that the Stylesheet is missing. I don't know enough to take care of this problem and I am just now becoming familiar with Wordpress. Can you possibly help me? Frustrated I don't know more about this but all things take time...

Kristine Berg's picture

I have tried downloading

I have tried downloading again through wordpress after figuring out the cpanel and deleting previous version but it still says the stylesheet is missing?

Olivier Biot's picture

Only for Drupal

Hi Kristine,
The Colourise theme I described in this blog post only works on Drupal, not on Wordpress. Unfortunately I can't tell you what you should do for getting it to work with Wordpress.
Olivier

Mobile wallet Ibeacon's picture

Mobile wallet Ibeacon

I think you made some good points in Features also.Mobile wallet Ibeacon Keep working, great job

Mobile wallet Ibeacon's picture

Mobile wallet Ibeacon

I think you made some good points in Features also.Mobile wallet Ibeacon Keep working, great job

Arreol's picture

If you already have a charger

If you already have a charger of this phone, then you can keep another charger as a spare Wireless Charging Pad, which can be used in the case, when you have to travel to another place or when your main charger in not working.

coach en séduction's picture

Wonderful post. I

Wonderful post. I appreciate your attention to this subject and I learned a good deal. 

coach en séduction

closetafvoermanchet's picture

Sometimes when you

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.

aanrechtblad's picture

I absolutely respect and

I absolutely respect and appreciate your point on each and every object.

aanrechtblad

aanrechtblad's picture

I absolutely respect and

I absolutely respect and appreciate your point on each and every object.

aanrechtblad

High School Diploma Online's picture

Stanley High School Online

Nice work shared by you thanks

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.