What is the first thing that a user gets to see when he/she visits your Drupal website?
The looks of the website.
And what determines the looks of the website?
The theme of the website!
There are boatloads of themes (both free and paid) available for Drupal 8, see Top Free And Premium Drupal 8 Themes. But what do you do if you could not find a theme that suits your requirements? Well then, you need not worry! You have arrived at the perfect place to start learning how to develop themes for Drupal 8.
This Drupal 8 theme development tutorial is the first installment of a multi-part series on the topic In this part, I will show you how to setup the basic theme related files so that the Drupal 8 core could recognize the files. This process has the following seven steps:
- Create YAML (.yml) file
- Edit YAML (.yml) file
- Remove stylesheets
- Clear the cache
- Optimize the Website
- Add CSS
Create YAML file
In Drupal 8, YAML file (.yml) is used in the place of .INFO files (used in Drupal 7) to tell the website that the theme exists. Similarly, the directories that contain the theme and the files with theme details have also been changed.
Here is where and what files you would need to create for initialing the theme building process:
- Navigate to the root folder of the website (The root folder is located inside the public_html folder)
- Go to the theme folder
- Create a new folder named custom and go into it.
- Create a new folder here, and ensure that it is named exactly as the name of the theme.
- Move inside the folder created in the previous step and create a new file here with the name yourthemename.info.yml where yourthemename is the name of the theme (In the example below, first is the name of the theme).
Edit YAML file
Now, I will include some details in the YAML file (created earlier in order to get it listed on the Drupal website). Open the YAML file in your preferred text editor and enter the following details:
Where yourthemename is the name of the theme, your_theme_description is the description of the theme, type is theme and core is the version of Drupal you are creating the theme for (In this is case it is Drupal 8, so 8.x).
Now go to your Drupal website and check if the new theme appears in the Drupal appearance section. If all the steps have been correctly followed, the theme will appear in the uninstalled section of your website’s appearance tab.
Click install and set as default to set this theme as default.
After you have set the new theme as default, and then navigate to the website’s homepage, you will notice that nothing has changed. This is because Drupal includes several stylesheets that loads by default. In many cases, the best strategy is to disable some of these stylesheets. To find out these stylesheets, you will need to inspect the source code by right-clicking and selecting View Source from the context menu.
Note: Use incognito mode of the browser or log out of the admin panel before viewing the source of the web page. Otherwise, Drupal will show you the CSS files for the admin panel as well (you must not mess with these files).
After you have determined which CSS files you wish to remove, the rest of the process is pretty straightforward.
Go back to the themename.info.yml file and edit it. To remove the stylesheets you want, add this text:
-“stylesheet to be removed”
-“” “” “” “”
-“” “” “” “”
Where stylesheet to be removed is the CSS file you wish to exclude.
Note: You have to be very careful about the indentations in YAML files.
Clear the Cache
Now login to your Drupal website’s admin panel. Next, go to Configuration >> Performance and click Clear all caches.
Optimize the Website
Next, it is time to add reference to the CSS file that will be used for/by the theme. To do this, go to the theme’s folder and create a new file named yourthemename.libraries.yml, where yourthemename is the name of the theme.
Edit this file to add CSS.
Now, add the library in the info.yml file as well. To do this, add the text in the file (see the following screenshot).
Once done, save the file.
I hope you found this useful. Until next time, Happy Theming!