How to Create Drupal Sub-themes from scratch

Hi people , this is my first tutorial on drupal themes. Drupal is a fantastic CMS technology by which you can create your own website (If you have a little knowledge in HTML , CSS & PHP). Now , why drupal is so famous & Powerful? Because NASA & MICROSOFT Give their valuable time (in research with Drupal) to make it more developer friendly.
Now back to our tutorial. Follow the simple 8 steps to create your own custom theme.
1. After installing Drupal You can see some default themes are already installed with this installation . Garland , bluemarine , chameleon , engines , pushbutton are the default themes.

2. There is a concept of Theme & Sub-Theme . I am leaving the theme part (it is known to every developer) , But What is a Sub-Theme ? Sub-Theme is also a theme which uses an other theme as a mother theme , i.e the mother theme css file loads before the child the css called .

Advantage : If the Sub-Theme css file does not load properly or if it is missing then the mother theme css file takes the responsibility to display the theme style.

Guide : To make a custom theme we should make a sub-theme rather copying or duplicating the existing theme.

3. To make a Sub-Theme go to (Root->sites->all->themes->your desire subtheme folder name) . If you don’t have any folder in (Root->sites->all) directory please create a theme & modules folder out there.

Guide : (Root->sites->all) this is your custom directory . If you want to install some module or develop any module please keep it here & if you create any theme or Sub-Theme it should placed here.

4. What are the require files to create a Sub-Theme :
Lets create a Sub-Theme based on Garland theme, i.e. Our mother theme is garland & sub-Theme is subgarland.

o Subgarland.info – This is the theme information file.
o Subgarland.css(Stylesheet) – this is the style sheet of the sub-theme.
o Page.tpl.php – This is the template(Html) file of your sub-theme.

5. How to create Subgarland.info file
First open it in any text editor & write

You can also go the drupal.org to view the theme info file contents.

6. Now write your own css to made the design changes , but it will effect the existing garland theme , because we don’t create a html structure (page.tpl.php) for this.

7. Lets create a page.tpl.php file
I recommend you to copy the page.tpl.php file from the existing garland theme.
If you are good in html & php you can easily modify the page.tpl.php file & can create your own custom template.

8. Now you are done . go the the (admin-> themes-> Subgarland (Enable this theme ) ). Refresh your browser & enjoy

Latest posts by Sandipan Bhattacharjee

• Dynamically Styling Modules and Blocks in Drupal 6 - September 22nd, 2011
• How to make a lightbox in a very simple way - August 19th, 2011
• Zend framework step by step tutorial (Folder structure) - March 21st, 2011
• Zend Framework variables - March 21st, 2011
• Zend Framework Database Query - March 21st, 2011