Samuli Natri
Dec. 16, 2015
Updated: Dec. 02, 2016
0
By Samuli NatriDec. 16, 2015
(Updated: Dec. 02, 2016)
0

Bootstrap #1 : Subtheme (CDN) (Drupal 8 Tutorial #8) (Article + Video)

How to install Bootstrap subtheme in Drupal 8 using a content delivery network.

Table of Contents

Installation

drush -y en bootstrap

Now you should see the theme in /themes:

  • Copy the CDN folder from the themes/bootstrap/starterkits folder..

  • ..and paste it in the /themes folder:

  • Change the cdn folder name to mytheme and all THEMENAME occurrences to mytheme:
  From   To
mytheme/config/install/THEMENAME.settings.yml mytheme/config/install/mytheme.settings.yml
mytheme/config/schema/THEMENAME.schema.yml mytheme/config/schema/mytheme.schema.yml
mytheme/THEMENAME.starterkit.yml mytheme/mytheme.info.yml
mytheme/THEMENAME.libraries.yml mytheme/mytheme.libraries.yml
mytheme/THEMENAME.theme mytheme/mytheme.them

  • Open mytheme/mytheme.info.yml
    • Change description to your liking
    • Change all THEMENAME occurences:
core: 8.x
type: theme
base theme: bootstrap

name: 'My Theme'
description: 'Uses the jsDelivr CDN for all CSS and JavaScript. No source files or compiling is necessary and is recommended for simple sites or beginners.'
package: 'Bootstrap'

...

libraries:
  - 'mytheme/global-styling'
  • Open mytheme/config/schema/mytheme.schema.yml
    • Change all THEMENAME occurences:
mytheme.settings:
  type: theme_settings
  label: 'Mytheme settings'
  • Go to admin/appearance and enable the theme:

And there you have it:

Bootswatch

  • Go to admin/appearance/settings/mytheme to change the theme settings. For example, in the Advanced section you can select Bootswatch themes:

The Paper theme looks like this:

Cerulean theme:

CSS Styles

h1 { color: red;}

Now you should see red main headers:

Samuli Natri is the founder of WDTutorials.com. He started building Drupal sites in 2010 with Drupal 6. He attended Helsinki University and Helsinki University of Technology (Social Sciences and Computer Science). Read more...

Add new comment