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:

Add new comment