Create Drupal Theme

Have you tried to Create Drupal theme? What….you got roadblocks !! No more worries… You will get all you want, here only as you don’t require any coding skills.

Drupal is an amazing open source Content Management System as well as a customizable platform to create anything from a personal blog to a corporate website. Drupal offers many native features. It aids you more when you don’t have to code while creating a website theme. Here, TemplateToaster facilitates you not to just create Drupal Theme in minutes but also living an experience without any disruption.


How to Create Drupal Theme?

It’s so easy to Create Drupal theme with TemplateToaster. A step by step tutorial is going to be showcased as follows to create Drupal 8 theme from scratch:


1. Get started with TemplateToaster

First of all, get started by selecting an appropriate CMS platform as TemplateToaster supports almost all the major CMSes. You can download TemplateToaster and can start using it. As you want to create Drupal theme, you will select the ‘Drupal’ from the window throwing choices for different CMSes as shown below:

Create Drupal Theme

Once you selected the CMS, you will be asked to go from scratch or with a sample template. You can select ‘Start From Scratch’.

Create Drupal Theme

Now, you can select the colour and font typography from the following window and click ‘Start’.

Create Drupal Theme

Once you select start, this forwards you to the main interface of the software as shown below:

Create Drupal Theme


2. Choose a Layout

First, you are going to select the layout for your web page. Here, you have a number of options like Single, Double, Triple layouts. You can select any of these according to your design. Here, to show all the sections, Triple layout including Menu, Header, Footer is selected.


3. Designing a Header

From here, you will actually start designing the Drupal theme. First of all, design Header. Go to the Header tab and select the ‘Full Width’ for a header as follows:

Create Drupal Theme

For current Business theme, we are to change the height of header from Header→ Height→More options, as shown below:

Choose a Background Color for the header from the ‘Background’ option. You can also set a gradient or an image according to your preferences.

Create Drupal Theme

Now remove the Website Title and draw a text area to put the contact details as email id and phone number. Set the typography of the text as required from the Editor tab that open when you click on the text area drawn.

Create Drupal Theme

Now, just in the right corner of the header, place the ‘Social Media Icons’ from the given options. You can browse your own custom icons from the browsing option ‘More’. You can also put the Website Title and Slogan if you need as all the options are available here.

Create Drupal Theme

You completed designing of the Header part.


4. Designing the Menu

Next section is Menu. Move to the Menu Tab. Make it ‘Full Width’ as shown below. You can also set a custom width or width equal to the page as per your preferences.

Create Drupal Theme

Now, from the Menu Button Properties; move all the menu items to the right of the page.

Menu Button Properties → Alignment → Horizontal → Right to Page

Set a ‘Logo’ from given logo images or browse a custom image for it.

Create Drupal Theme

Set a ‘Background‘ Color for the menu as shown below.

Create Drupal Theme

Finally, style the text of menu items on any of the State Normal, Hover, Active as shown below:

Menu Button Properties → Typography→Normal/Active/Hover → More

Create Drupal Theme

The Menu is ready.


5. Designing a SlideShow

Just check the box of ‘Slide Show’ to show a slideshow.

Create Drupal Theme

Set a ‘Background‘ image on it. While you can browse your own custom image from ‘More Images’ option as shown below:

Create Drupal Theme

Now, draw a text area on the slideshow to put the content.

Create Drupal Theme

Also, place a button labeling “Know More” that you can style it from ‘Elements Tab’.

Create Drupal Theme

Finally, style the pagination from ‘Format Tab’ on ‘Selected State’.

Create Drupal Theme


6. Designing Body of the Page

You can put the content only after exporting a theme. Only you can set the typography of all the elements like headings, paragraphs, metadata, meta links, tables, comment form etc. going to be used in content as follows:

Create Drupal Theme

Now, move to the ‘Body Tab’ and design the ‘Scroll Up’ button.

Create Drupal Theme


7. Designing the Footer

In Footer section, you can put the ‘Designed by Text’ & ‘Designed by Link’ and social media icons if you want. You can also format it by using ‘Format Tab’ that opens when you double-click it. If you want to style more, you can make use of foreground image & text areas too.

Create Drupal Theme

You can create Drupal theme for both Drupal 7 and 8 in the same way as explained above, the only difference lies in exporting.


8. Exporting the Theme

After you create Drupal theme, you can export the theme by clicking on the Export option (Drupal icon) from Quick Access Toolbar at the top right of the screen. Then fill the export particulars and select a version 7 or 8 on the desired location as shown below:

Screenshot for Drupal 8

Screenshot for Drupal 7


9. Installing Drupal 8

If you already have Drupal, you are ready to go. But if not, you can follow these instructions to Install Drupal 8 and Install Drupal 7.


10. Upload Theme

a. For Drupal 8

You can upload your theme after exporting it. Compress the theme folder you exported from TemplateToaster into a .zip file.

Go to Drupal Dashboard and move to AppearanceInstall new theme.

Now, you can browse the compressed file in “File Upload” dialog and open it.

Drupal 8 theme will start uploading as shown below:

Once uploaded, you can install the same theme by clicking ’Install newly added themes’

Now, you can see the list of uninstalled themes. From there, select your theme and ‘install & set as default’ as shown below:

You have successfully uploaded and installed your Drupal 8 theme.


b. For Drupal 7

If you need to upload your Drupal 7 theme. Compress the theme folder you exported from TemplateToaster into a .zip file.

Go to ‘Appearance’ in your dashboard and click ‘Install new theme’.

A ‘File Upload’ dialog will open to browse your exported file. Browse and open it.

This will install the Drupal 7 theme.

When the installation is complete, you need to click ‘Enable the newly added themes’ as shown below:

Finally, you can see your theme in ‘Enabled Themes’.


Final Thoughts

Drupal is one of the most powerful website building platforms on the internet. While building a theme with Drupal you should have some basic knowledge of PHP, HTML etc. But, with TemplateToaster you don’t have to worry about coding. You can create Drupal themes easily in TemplateToaster, a Drupal Theme Builder with drag & drop options (no coding involved). You can have awesome Drupal themes that are highly customizable and witness great performances in no time.

So follow the given steps to create a Drupal theme. If you have any questions or suggestions, you are always welcome!!