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
So you found out you need to style taxonomy vocabulary items differently than the rest of the site? But Drupal 8 does not add a bunch of…
Tutorial
In Drupal 8, BigPipe was introduced as an ajax renderer for our pages. While its presence is nice and good and it is making our pages super…

Recommended

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