How to Create Drupal Theme from Scratch: A Step by Step Guide for Drupal 7 & 8
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:
Once you selected the CMS, you will be asked to go from scratch or with a sample template. You can select ‘Start From Scratch’.
Now, you can select the colour and font typography from the following window and click ‘Start’.
Once you select start, this forwards you to the main interface of the software as shown below:
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:
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.
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.
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.
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.
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.
Set a ‘Background‘ Color for the menu as shown below.
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
The Menu is ready.
5. Designing a SlideShow
Just check the box of ‘Slide Show’ to show a slideshow.
Set a ‘Background‘ image on it. While you can browse your own custom image from ‘More Images’ option as shown below:
Now, draw a text area on the slideshow to put the content.
Also, place a button labeling “Know More” that you can style it from ‘Elements Tab’.
Finally, style the pagination from ‘Format Tab’ on ‘Selected State’.
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:
Now, move to the ‘Body Tab’ and design the ‘Scroll Up’ button.
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.
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
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 Appearance → Install 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’.
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 web design software 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 Drupal theme. If you have any questions or suggestions, you are always welcome!!