Using prebuilt themes

Additional themes for Drupal 8 may be limited at first, but we can find prebuilt themes at several places. Some of these themes have to be purchased, whereas others are free to use. We will take a look at Drupal.org to find some prebuilt themes and how to install them using the Drupal admin, how to manually install a theme, and finally how to uninstall a theme once we're done using it.

Begin by opening up a new tab in our browser and navigating to https://drupal.org/project/project_theme.

The Download & Extend section of Drupal.org allows us to filter results based on various options. We can find Drupal 8-specific themes by performing the following steps:

  1. Select 8.x from the Core compatibility dropdown.
  2. Click on the Search button.
  3. With a selection of themes compatible with Drupal 8 to choose from, one result looks promising and that is the Bootstrap 3 theme, as shown in the following image:

Installing a new theme

At this point, we should have two tabs opened in our browser. One opened to the Bootstrap 3 theme and the other tab opened to the Appearance admin of our Drupal instance.

From the Appearance admin, we can install a new theme by clicking on the Install new theme button, which will take us to the Install new theme interface, as shown in the following image:

We will first take a look at using the Install from a URL option to install the Bootstrap 3 theme.

Installing from a URL

To install a theme from a URL, we only need to know the URL path to the archived theme file. This can be obtained from the Theme project page where the theme was found.

Follow these four steps:

  1. Right-click on the tar.gz link located under the Download column of the 8.x version of the theme.
  2. Select Copy Link Address from the context menu.
  3. Paste the link into the Install from a URL textbox on the Install new theme admin screen.
  4. Click on the Install button.
  5. We should now be presented with the Update manager screen notifying us that the Installation was completed successfully, as shown in the following image:
  6. Click on the Install newly added themes link to take us back to the Appearance admin.
  7. If we look at the Uninstalled themes section, we will see the Bootstrap 3 theme where we can click on the Install and set as default link.
  8. To verify that our theme is installed, navigate to the frontend of our site by clicking on the Back to site link in the Admin menu. We should now see our new theme being displayed, as shown in the following image:

Congratulations, we have installed our first prebuilt theme. As we can see, the process of installing a theme from a URL is quite simple. In fact, the process of installing a new theme from a file is not that different, as we will see.

Uploading a module or theme archive to install

If we navigate to /admin/theme/install, we will be back on the Install new theme screen. The Upload a module or theme archive to install option requires that we have a copy of the archived theme downloaded.

If we navigate back to the Drupal.org Theme project page and look a little further down our search results, we will see another popular theme based on the ZURB Foundation framework, as shown in the following image:

We will be downloading the current Drupal 8 Development release of the theme by clicking on either the tar.gz or zip links. This will initiate a file download to our specified downloads folder. We will use this downloaded file to perform the following steps from the Install new theme admin:

  1. Click on the Choose file button from the Upload a module or theme archive to install input.
  2. Locate the downloaded file and select it.
  3. Click on the Open button.
  4. Click on the Install button.
  5. Click on the Install newly added themes link from the Drupal 8 Update manager.
  6. If we look at the Uninstalled themes section, we will see the ZURB Foundation theme where we can click on the Install and set as default link.
  7. Navigate back to the frontend by clicking on the Back to site link and verify that our new theme is being displayed, as shown in the following image:

We have now mastered using the Drupal Admin to install themes from both a URL and an archive. However, the preferred method to install a theme is by manually installing it. The benefit to choose this method is that we have full control over the themes folder, and if we are doing any type of custom theming, we will need to be familiar with this process anyway.