How to Create a Bartik Subtheme in Drupal 8

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.

bartikssen

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.

bartikssen


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

bartikssen

  • 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

bartikssen

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.

bartikssen


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.

bartikssen

bartikssen


Step #4.- Enable the Subtheme

  • Click Appearance
  • Scroll down and look for Bartikssen.
  • Click Install and set as default.

bartikssen

  • Click the Settings tab.
  • Select the Bartikssen tab on the second level.
  • Upload a logo image.
  • Click Save configuration.

bartikssen


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.

bartikssen


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.

Author

  • Jorge Montoya

    Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

0 0 votes
Article Rating
Subscribe
Notify of
6 Comments
Oldest
Newest
Inline Feedbacks
View all comments
D2D
D2D
3 years ago

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?

sam
sam
3 years ago

Hello,

Untill Step #4.- Enable the Subtheme worked great!!!

But, CSS doesn’t applied for me.

imrodmartin
3 years ago
Reply to  sam

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

anangui
3 years ago
Reply to  sam

Hello Sam, have you cleared the cache?

Мария
Мария
3 years ago

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?

Willy
2 years ago

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

6
0
Would love your thoughts, please comment.x
()
x