On this page
Creating a custom Barrio sub-theme
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 subtheme
folder on your /themes/custom
directory.
Rename the subtheme
folder 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.yml
to yourname.libraries.yml
/config/install/bootstrap_barrio_subtheme.settings.yml
to /config/install/yourname.settings.yml
/config/schema/bootstrap_barrio_subtheme.schema.yml
to /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
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion