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

Submitted by TheMain on Wed, 12/16/2015 - 14:28

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

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'

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:

Posted by Samuli Natri on 16 December 2015