Tutorial

How to make custom Bootstrap 3 subtheme in Drupal 8

In this short tutorial we will create a new Bootstrap 3 subtheme under Drupal 8 installation. It is not as easy as it was in Drupal 7, but not so hard at all. Just follow the instructions.

Pridal/a lubo dňa Št, 03/26/2020 - 18:54
Install Bootstrap theme in your Drupal 8

First of all, we have to install Bootstrap 3 theme under Drupal 8.

If you are familiar with Composer, install with the following command:

composer require 'drupal/bootstrap'

If you are not using Composer at all, just download the theme zip file from the following link:

https://www.drupal.org/project/bootstrap

And place it under your /themes directory.

Copy StarterKit theme from your Bootstrap theme.

Now navigate to /themes/bootstrap/starterkits and duplicate the folder THEMENAME in your /themes folder.

So now you should have the following folder structure:

/themes
- bootstrap
- THEMENAME
Rename the theme.

Of course, we will rename the THEMENAME to suit your theme name, let's go with "mychildtheme" name.

Rename all the THEMENAME files in your new child theme

If you navigate to /themes/mychildtheme folder, you should see 3 files:

  1. THEMENAME.libraries.yml
  2. THEMENAME.starterkit.yml
  3. THEMENAME.theme

Rename all 3 of them to match your new theme name. So now they should be:

  1. mychildtheme.libraries.yml
  2. mychildtheme.info.yml
  3. mychildtheme.theme

As you can see, "starterkit" was renamed to "info". Keep that in mind.

Open the .info file

Now open mychildtheme.info.yml and edit the file accordingly, beware at line 5 and 24:

Line 5:

name: 'mychildtheme'

And line 24:

    - mychildtheme/framework

Those are YAML files and they are white-space sensitive, so always change only the characters itself and never add nor remove any white space before or after the strings.

Renaming files in config directory

Navigate to config directory, where you should find install and schema directories.

Changing settings file

Navigate to install directory in your theme and rename THEMENAME.settings.yml to mychildtheme.settings.yml.

Changing schema file

Navigate to schema directory in your theme and rename THEMENAME.schema.yml to mychildtheme.schema.yml.

Open the file and change to following:

# Schema for the theme setting configuration file of the MyThemeTitle theme.

mychildtheme.settings:
  type: theme_settings
  label: 'MyThemeTitle settings'

Those are YAML files and they are white-space sensitive, so always change only the characters itself and never add nor remove any white space before or after the strings.

Done!

Congratulations! Now you should be able to install your newly created theme via Drupal 8 UI. 

Might interest you

Tutorial
Of course, composer will tell you when installing Devel anyway. But in case you missed it, making Kint() output more pretty and handy is…
Tutorial
In Drupal 7, there was a handy dandy option to just delete the translation from Admin UI. But in Drupal 8, there is no such an option. Also…

Recommended

Tutorial
3 views
This sketch is quite easy, I used Arduino Nano with OLED 0.96″ display 128×64 resolution…
Tutorial
8 views
While working on a fairly complex website with very complex views setup, including tens…
Tutorial
6 views
In this case we have two options, either we use hook_user_presave() or we can create new…
Tutorial
6 views
When using Swiftmailer under Drupal 8 / 9 it automatically sets the headers for sender to…
Tutorial
3 views
Yes, IOS / Safari is the new internet explorer. Amount of time I spend on debugging…
Tutorial
10 views
There is a very handy function in Drupal 8 / 9, allowing developers refresh view when…
Tutorial
4 views
Often, when doing SEO checkups, SEO specialist come up with adding Schema.org…
Tutorial
79 views
I needed to test my contracts against USDC contract, specifically I needed ERC-721 mint…
Tutorial
4 views
If you are a newbie like I am and struggling with setting the proper MYSQL my.cnf config…
Tutorial
10 views
I had trouble to set this up properly, because documentation is quite misleading or often…
Article
56 views
As the title says, DO NOT in any circumstances install ANY bitcoin price extension to ANY…
Tutorial
173 views
This is (or should be) a working example of sending some Ether between two addresses.…
Module
43 views
This list was fetched from Zapper, with their /v1/token-list endpoint. Which you can…
Tutorial
98 views
In the last months I am being pretty much bombarded by my clients with asking what…
Tutorial
25 views
So sometimes you just need to transliterate some kind of foreign (or local) language, and…