How to create a custom theme for Drupal based websites?

Drupal supports custom theming to allow the users to change look and feel of Drupal based websites. We can create a custom theme from scratch or we can create custom theme based on existing themes. The second option is easy and quickly we can create a custom theme. This article explains the steps to create a custom theme from an existing theme.

This article applies to:

  • Drupal v7.x

Step (1). Log-in into your web-hosting control panel.

Step (2). Go to the folder where you installed your Drupal based website.

Step (3). Drupal core themes are stored in themes folder. Open the themes folder. You will find Drupal core themes are in their respective folders.

Step (4). Bartik is one of the core theme provided by Drupal. We will create our custom theme based on Bartik. So, copy the folder bartik and place the copy of bartik into /your-website’s-root-folder/sites/all/themes/ folder. This is the place where custom themes or non-core themes will be placed.

Step (5). Go to the folder path /your-website’s-root-folder/sites/all/themes/. You will find copied folder bartik here. Rename the bartik folder to your custom theme name. For eg: mycustom. Now mycustom will be the custom theme for your Drupal based website.

Step (6). Open your custom theme’s folder i.e., in our example it is mycustom folder.

Step (7). You will find bartik.info file. Drupal uses .info files to define and configure themes. Each line in .info file is a key-value pair. This file is mandatory in order to Drupal understand the theme.

Step (8). Rename bartik.info file to mycustom.info file, mycustom is our custom theme.

Step (9). Now open the .info file and change the value “Bartik” for name key to mycustom.

name = mycustom

Step (10). Once you made the changes Save the .info file. Now Drupal recognizes the custom theme added into the system. But what will happen when you change settings for your custom theme? Yes, we need to do few more changes in order to work your custom theme properly. Follow the below steps…

Step (11). Now open template.php file. You will find couple of functions defined in the file. Each function starts with the name of the theme. We are creating our custom theme based on Bartik, so each of these functions are starts with the theme name bartik. You need to change all these function names; replace bartik with your custom theme name. So the function name bartik_preprocess_html will become mycustom_preprocess_html as per our example mycustom is the name our custom theme.

Step (12). Replace the following line in template.php file.

drupal_add_css(drupal_get_path('theme', 'bartik') . '/css/maintenance-page.css');

with

drupal_add_css(drupal_get_path('theme', 'mycustom') . '/css/maintenance-page.css');

This above line of code will be useful to include maintenance-page.css file.

Step (13). Once you made the changes into template.php file; Save the changes.

Step (14). Now you are in /your-website’s-root-folder/sites/all/themes/mycustom/ folder. You will find logo.png and screenshot.png files.

  • logo.png – Replace this file with your website’s logo.
  • screenshot.png – This file is the preview of Bartik theme’s screenshot. Replace this with your custom theme’s screenshot. You need to take the screenshot of your website once your custom theme is ready and selected into Drupal; and then replace this screenshot with your custom theme’s screenshot.

Step (15). In order to work color scheme properly, you need to change color.inc file which is located in color folder. Go to color folder and open color.inc file. Replace the following line

drupal_add_js(array('color' => array('logo' => theme_get_setting('logo', 'bartik'))), 'setting');

with

drupal_add_js(array('color' => array('logo' => theme_get_setting('logo', 'mycustom'))), 'setting');

Replaced “bartik” with custom theme name mycustom. Once you made the changes in color.inc file, Save your changes.

Step (16). Log-in into your website as an administrator.

Step (17). Click on Appearance link which is on top of the page.

Drupal - Appearance page

Drupal – Appearance page

Step (18). In Appearance page, scroll down and find your custom theme will be displayed under DISABLED THEMES section.

Drupal - Disabled themes

Drupal – Disabled themes

Step (19). Click on Enable and set default link under MyCustom theme. So your custom theme will be enabled and set as default theme.

Step (20). Observe that the “Bartik” theme’s screenshot is displaying beside custom theme. As we discussed in Step (14), you need to take the screenshot of your website and replace with screenshot.png file. Once you replaced the screenshot.png file, your custom theme will be previewed in Appearance page.

Now custom theme is ready for your Drupal based website. You can modify the theme based on your needs; once you refresh your website your changes will be displayed.

by Code Steps

1 comment for “How to create a custom theme for Drupal based websites?

  1. Pingback: My Homepage

Leave a Reply