How to create a custom theme for Drupal based websites?

Drupal supports custom theming to allow the users to change the look and feel of Drupal-based websites. We can create a custom theme from scratch or we can create a custom theme based on existing themes. The second option is easy and quick 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 to 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 the 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 themes 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 the bartik.info file. Drupal uses .info files to define and configure themes. Each line in the .info file is a key-value pair. This file is mandatory in order for to Drupal understand the theme.

Step (8). Rename the 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 the 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 a few more changes in order to work your custom theme properly. Follow the below steps…

Step (11). Now open the template.php file. You will find a 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 is 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 of our custom theme.

Step (12). Replace the following line in the 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');

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

Step (13). Once you made the changes into the 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 the color scheme properly, you need to change color.inc file which is located in the color folder. Go to the 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 to your website as an administrator.

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

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

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

Step (20). Observe that the “Bartik” theme’s screenshot is displaying beside the custom theme. As we discussed in Step (14), you need to take a screenshot of your website and replace it with a screenshot.png file. Once you replaced the screenshot.png file, your custom theme will be previewed on the 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.