How to Create a Bartik Subtheme in Drupal 8
Subthemes inherit the theme resources of their parent theme. If you want to build your site with Bartik, which is the default theme in a Drupal installation, you will have to create a subtheme. That way, you can make CSS, JS or template overrides to the subtheme, without having to worry about losing those changes when the parent theme gets updated.
Keep reading to learn how!
Step #1.- Create the Basic File Structure
In order to create a subtheme in Drupal, you only need 2 files:
my_subtheme.info.yml
my_subtheme_libraries.yml
These files have to be placed in a folder called my_subtheme inside the themes directory of your Drupal installation.
You have 2 possibilities here:
/themes/my_subtheme/
/themes/custom/my_subtheme
Drupal will locate the theme anyway.
- Create a folder called bartikssen inside the themes folder of your Drupal installation.
- Create 2 empty files inside this directory called:
- bartikssen.info.yml
- bartikssen.libraries.yml
The only thing you need to know about .yml (YAML) files now is that they are cool because they are easy to understand and can be used to represent and map data.
Step #2.- Theme Inheritance
As you already know, the advantage of a subtheme is basically that you can use all features of a fully-fledged theme (coded for free by some nice person or persons) and customize it to your liking with your own CSS, JS, or template tweaks.
- Open themes/bartikssen/bartikssen.info.yml in your preferred code editor.
- Open core/bartik/bartik.info.yml.
- Select the content of lines 14-47 of bartik.info.yml (Drupal version 8.8.5).
- Copy and paste it inside bartikssen.info.yml
- Close bartik.info.yml
- Select lines 10-14 (ckeditor_stylesheets) and delete them.
- Select line 5 (package) and delete it.
- Uncomment the line ‘version’
- Change the values according to the image below.
- Save bartikssen.info.yml
Something to note here is that you could have let all regions out of this file and Drupal would have assigned its default system regions. Now you can work with all Bartik regions in your own theme, you can delete some of the regions and only work with the remaining ones, or you can even add more regions to your own theme than the ones available in Bartik (the regions in Bartik are more than enough, to be honest).
Notice also that Bartikssen’s base theme is Bartik, whereas Bartik’s base theme is Classy. That means that Bartikssen is a subtheme of a subtheme.
As you can see, you have declared a library called global-styling within the info.yml file. This library has to be included in the libraries’ file.
- Open bartikssen.libraries.yml
- Copy and paste this code:
global-styling:
version: 1.x
css:
theme:
css/style.css: {}
js:
js/script.js: {}
Keep in mind that indentation is one key aspect in .yml files, so preserve it as is like shown in the example code.
Step #3.- CSS and JavaScript Code
We still have to create the folder and file structure for the CSS and JavaScript code.
- Create a folder called css and place an empty file called style.css inside it.
- Create a folder called js and place an empty file called script.js inside it.
Step #4.- Enable the Subtheme
- Click Appearance
- Scroll down and look for Bartikssen.
- Click Install and set as default.
- Click the Settings tab.
- Select the Bartikssen tab on the second level.
- Upload a logo image.
- Click Save configuration.
Step #5.- Adding CSS Styles
- Open style.css.
- Copy and paste this code:
body {
font-family: sans-serif;
color: #616161;
}
h1 {
color: #616161;
}
#header,
.sidebar {
background-color: darkslategray;
background-image: none;
}
- Save the file.
- Click Configuration > Performance.
- Click Clear all caches.
- Go to the Home of your site.
Congratulations! You have created a subtheme of Bartik. With this same logic, you could create 2 subthemes of Batikssen called Bartikgrandssen_1 and Bartikgrandssen_2 and customize each one to your personal liking. That is the well-known flexibility of Drupal.
By the way, the same process applies to create a subtheme of any other theme in Drupal. To know more about subthemes in Drupal check here.
If you want to read more about Drupal’s default regions, in case you don’t define them in the .info file, take a look at this page.
I hope you liked this tutorial. Thanks for reading!
Check out my other blog on How to Integrate a Sliding Menu.
I created a sub-theme that I use on some of my sites. The themes author recommends it as best practice, and with as many settings as are available on that theme, he is right. My problem is that the status report says that it is an unsupported theme. Is this normal, or have I missed something?
Hello,
Untill Step #4.- Enable the Subtheme worked great!!!
But, CSS doesn’t applied for me.
Hi Sam,
most often errors in theming occur in the .yml files. Double check that you’re not using tabs to indent any lines, only spaces.
In the libraries.yml file, the indents for the global-styling are very important and necessary. Check that.
Then check the permissions, naming and folder structure for your CSS file.
Let us know.
Rod
Hello Sam, have you cleared the cache?
I make a sub-theme for Vani, but custom style, not show? Structure:
themes/custom/bepanthen/
css (folder)
style.css
bepanthen.libraries.yml
bepanthen.info.yml
bepanthen.libraries.yml have
global-styling:
version: 1.0
css:
theme:
css/style.css: {}
bepanthen.info.yml have
name: Bepanthen
type: theme
base theme: vani
description: Sub-theme of Vani
package: Core
# Define theme core
core: 8.x
core_version_requirement: ^8 || ^9
# Comment version before uploading to drupal.org
# version: 8.1.2
# Libraries
libraries:
– bepanthen/global-styling # Library for all global css. These css will be loaded on every pages.
– bepanthen/global-scripts # Library for all global js. These js will be loaded on every pages.
What is the reason my style does not apply to the daughter theme?
bartikssen.libraries.yml results in this error message:
A colon cannot be used in an unquoted mapping value at line 7 (near “js / script.js: {}”). in Drupal \ Core \ Asset \ LibraryDiscoveryParser-> parseLibraryInfo () (line 352 of core / lib / Drupal / Core / Asset / LibraryDiscoveryParser.php).
I am using Drupal core 8.9.14.
I’m not a programming nerd and can not solve this problem.
Is there anyone who can explain to me what the problem is and how to solve it?
Thanks.
Willy