The basics of Drupal 8 theming (Part 2)

This is the sixth chapter of the Drupal 8 Theming: Getting Started series. In this chapter, you are going to continue learning the basics of Drupal 8 theming.

Prebuilt themes

As with Drupal 7, Drupal 8 allows you to install a prebuilt theme in three different ways. Let's begin with the easiest one.

1. Click on this link and locate the theme you like the most (the themes on this page are free to use). I am going to choose a theme called Bootstrap.

2. In the Downloads section, right click on the tar.gz (or zip) link of the 8.x version of the theme, and then click on the Copy link address option from the context menu of your web browser to get the correct path to the file.

3. Go back to the Appearance screen and click on the Install new theme button.

4. Paste the address into the Install from a URL text box on the Install new theme screen, and then click on the Install button.

5. If you get the error cURL error 60: SSL certificate problem: unable to get local issuer certificate (see http://curl.haxx.se/libcurl/c/libcurl-errors.html) after clicking on the Install button, then follow the steps 6 through 8; otherwise, the installation was completed successfully (as shown in the previous picture) and you have to do nothing.

6. The previous error means that there is a problem with the cURL extension and the validation of the SSL certificate.

7. In order to solve this problem, download this file and then, add the following piece of code to your php.ini file:

curl.cainfo = "\xampp\php\extras\ssl\cacert.pem"

Change the previous piece of code to match the path to the location of your cacert.pem file.

8. Save all changes to the file and do not forget to restart your Web Server.

Once the Bootstrap theme is installed, go back to the Appearance screen, locate the Uninstalled themes section, and click on the Install and set as default link for the Bootstrap theme.

Done! Now, if you click on the Back to site link in the administration menu, you will see that Drupal is using the Bootstrap theme as its default theme.

Let’s carry on with the second way:

1. Go back to the Install a new theme screen (admin / theme / install).

2. Under the Install from a URL option, there is another option called Upload a module or theme archive to install from which you can also install a theme. It is simple: download a theme from drupal.org; click on the Browse button to select the downloaded file; and click on the Install button to add the downloaded theme to Drupal.

For example, let’s install a theme named adminimal (it is a well-known responsive administration theme) by using this way:

1. Download the theme archive from the above link and save it in your Downloads folder.

2. Click on the Browse button and select the file you have just downloaded.

3. Click the Install button to add the adminimal theme to Drupal.

4. If everything was fine during the installation, the Update Manager will show you the following success message:

5. Select it from the Administration theme drop-down menu (as explained before), and then click on the Save configuration button.

Done! Wow, it looks great!

The third way to install a theme is by installing it manually. This is the best way to install a theme because it allows you to have full control over the themes folder, which is crucial when you need to create some kind of customization.

In order to install a theme manually, you have to download the theme , uncompressed it, and move it to the themes folder of your Drupal 8 installation. By way of example, let’s manually install Zen.

1. Click on the Zen link above, locate the Downloads section, and download the version of the theme for Drupal 8.

2. Extract the contents of the file, and move the zen directory to the themes folder of your Drupal 8 installation, as shown in the following image:

3. Once the zen folder has been moved to the themes directory, if it is properly configured, it will automatically be found by the Appearance screen.

Note: This theme (and some other ones) comes with a readme.txt file that provides additional installation instructions. It is very important to read these kinds of files first, so do not forget to read it before making this theme your default theme.

How to clean up the 'themes' folder

If you look now in the themes folder, you will realize that there are three folders within it.

Because a clean directory structure in this folder will allow you to manage your themes more easily, let’s set Bartik back as the default theme and uninstall the Bootstrap and Zen themes. Once both themes are uninstalled, you can remove their respective folders from the themes folder.