Creating a custom Barrio sub-theme

Last updated on
10 April 2022

This documentation needs work. See "Help improve this page" in the sidebar.

Barrio ships with a standard sub-theme starter kit located on the sub-theme folder. You can also create a SASS-based sub-theme as an alternative option: https://www.drupal.org/docs/8/themes/barrio/sass-sub-theme.

Create By Script

If you are comfortable using command-line in either Unix shell or Windows (git-bash), the following commands will create a custom theme:

cd themes/custom
export CUSTOM_BARRIO=custom_barrio # change this to your custom theme_name
cp -r ../contrib/bootstrap_barrio/subtheme $CUSTOM_BARRIO
cd $CUSTOM_BARRIO
for file in *bootstrap_barrio_subtheme.*; do mv $file ${file//bootstrap_barrio_subtheme/$CUSTOM_BARRIO}; done
for file in config/*/*bootstrap_barrio_subtheme.*; do mv $file ${file//bootstrap_barrio_subtheme/$CUSTOM_BARRIO}; done
mv {_,}$CUSTOM_BARRIO.theme
mv {_,}$CUSTOM_BARRIO.layouts.yml
grep -Rl bootstrap_barrio_subtheme .|xargs sed -i '' -e "s/bootstrap_barrio_subtheme/$CUSTOM_BARRIO/"

Make the necessary changes in $CUSTOM_BARRIO.info.yml and enable the theme.

Note: If you use Linux you might get the error sed: can't read : No such file or directory, even though all is well. For more see Sed gives: sed: can't read : No such file or directory.

This script has been added to the 8.x-4.x branch in the scripts directory, and you can easily run the script instead of creating one yourself.

# Run from theme root, e.g. "themes/contrib/bootstrap_barrio".
# Make script executable.
chmod +x scripts/create_subtheme.sh
# Run script with interactive prompts.
./scripts/create_subtheme.sh

You should search the codebase looking for "Bootstrap Barrio" and alter the remaining textual references to your sub-theme. Also make sure that the Bootstrap library specified in the $CUSTOM_BARRIO.info.yml under library is the one you want (CDN or local).

In the future, this script might be turned into a Composer plugin.

Create Manually

Copy the subthemefolder on your /themes/custom directory.

Rename the subthemefolder to your custom theme name, for example yourname

Rename the following files from bootstrap_barrio_subtheme to yourname:
bootstrap_barrio_subtheme.theme to yourname.theme
bootstrap_barrio_subtheme.info.yml to yourname.info.yml
bootstrap_barrio_subtheme.libraries.ymlto yourname.libraries.yml
/config/install/bootstrap_barrio_subtheme.settings.ymlto /config/install/yourname.settings.yml
/config/schema/bootstrap_barrio_subtheme.schema.ymlto /config/schema/yourname.schema.yml

Edit the file yourname.info.yml

name: YourName
type: theme
description: 'Your Description.'
version: VERSION
core: 8.x
base theme: bootstrap_barrio
libraries:
- yourname/bootstrap_cdn
- yourname/global-styling

Make sure that yourname/bootstrap_cdn is the Bootstrap library you want (CDN or local).

Delete the following:

# Information added by Drupal.org packaging script on 2018-08-09
version: '8.x-4.17'
core: '8.x'
project: 'bootstrap_barrio'
datestamp: 1533828192

Edit /config/schema/yourname.schema.yml

# Schema for the configuration files of the Bootstrap Barrio Subtheme.

yourname.settings:
type: theme_settings
label: 'Yourname settings'

Edit /js/global.js line 10:

Drupal.behaviors.yourname = {

Edit /color/color.inc

line 117:

// Preview files.
'preview_library' => 'yourname/color.preview',
'preview_html' => 'color/preview.html',

line 126:

'logo' => theme_get_setting('logo.url', 'yourname'),

Edit /color/preview.html line 5

Change image source from:

<div class="color-preview-logo"><img src="../../../themes/bootstrap_barrio_subtheme/logo.svg" alt="Site Logo" />

to:

<div class="color-preview-logo"><img src="../../../themes/yourname/logo.svg" alt="Site Logo" />

Note: If your theme is placed in contrib folder, the path should reflect it:

<div class="color-preview-logo"><img src="../../../themes/contrib/yourname/logo.svg" alt="Site Logo" />

Edit yourname.theme

Rename the function from:

function bootstrap_barrio_subtheme_form_system_theme_settings_alter(&$form, FormStateInterface $form_state)

to:

function yourname_form_system_theme_settings_alter(&$form, FormStateInterface $form_state)

For a complete explanation on how to write sub-themes on Drupal 8 please refer to the Creating a Drupal 8 sub-theme Guide

Enable SubTheme

Once you have finished manually creating your SubTheme, enable it in /admin/appearance.

Help improve this page

Page status: Needs work

You can: