Submitted by chrishu on Tue, 09/24/2013 - 11:24

Why do I need a subtheme?

This is my first baby-step into theming on Drupal 8, I needed to look into sub-theming quite quickly for this blog, an example of something that requires no thought and little time in Drupal 7 but caused me some investigation.  Drupal 8 still doesn't have much in the way of contrib modules and themes, so whilst happy to use Bartik in principle for now I want to be able to take a little bit of control of it. I want to be able to:

  • Change the fonts and styling a little (somebody told me Americans prefer serif fonts, most of us with an English background prefer sans-serif)
  • Add little changes to the templates (such as the trademark declaration I have in the footer)
  • Make any changes that may have been handled by custom modules in the past, such as putting boilerplate code in the header.

The freedom to make these little changes early on makes me feel a little more comfortable with my blog. Now I don't want to hack the core Bartik theme, so I could have just copied Bartik and changed all the names (without really having to know what I was doing), then I could modify the new theme I created in themes directory. The problem with this approach is that it is inefficient and I won't benefit from any updates to Bartik.

The Drupal way, and the sensible way (regardless of Drupal) is to make a subtheme of Bartik, I then just need to override the bits that I want to change. How to do this Drupal 8?

The subtheme

The long title to  this post is in hope that it may be found and prove useful to anyone who gets stuck at the same point I did, what should have been a simple task ended in in quite some time before I dicovered that the key in my configuration should be 'base theme'. I assumed 'base_theme' and tried several variations, in the end I looked at  core/incudes/theme.inc so again for discoverability to make a subtheme in Drupal 8 the configuration key is base theme not base_theme.

So I created my subtheme at themes/custom/run8 with the following in my run8.info.yml file.

name: Run8
type: theme
description: 'A Subtheme of Bartik'
version: VERSION
core: 8.x
base theme: bartik
stylesheets:
  all:
    - css/layout.css
    - css/style.css
    - css/colors.css

Note: I suspect I am not supposed to need to re-reference style sheets I want to override but they didn't catch, will re-visit this when I have the time.

Once I have done the above I just needed to look at the file structure in Bartik and rewrite anything I need to change in the same place in my theme. For example I can copy templates/page.html.twig into my theme and modify, these changes will then be picked up when I make my theme the default in admin.

For anything not in Bartik I can go up to core/modules/system/templates and copy the appropriate template (for example html.html.twig) down to my theme to modify.

Now I can modifty Bartik without being evil.

As usual, remember to clear the cache!

Some minor irritations

Will re-visit this when I do a bit more themeing and perhaps raise issues or patches, it may have just been me making repeated attempts.

Selecting make default and enable didn't work, I had do both steps seperately on my theme. Trying to do two in one request resulted in an error message telling me my theme was not found.

The screen shot box for my theme was streched very long when I didn't have one. Eventually it picked up the Bartik one.

Issues raised

Found a comment typo (old reference to .tpl.php file), so raised an issue and attached a patch. I am wondering if the time taken to do these type of issues and patches  is worth it they get ignored will have to see how they do once I have raised a few.

Comments

Anonymous (not verified)
Sun, 10/27/2013 - 20:03

Thanks for the tip! Did you have the problem described at https://drupal.org/node/2084907 , "Warning: Illegal offset type in isset or empty in Drupal\Core\Extension\ModuleHandler->loadInclude()"? I'm getting that (on pages created by views, e.g. the front page).

chrishu
Sun, 10/27/2013 - 23:49

In reply to by Anonymous (not verified)

Yes I have the warning, initially thought it was caused by something else I had done, and have turned off warnings display on live site but whilst trying to apply fixes for alpha-4 can confirm the same problem, will add to the issue tommorrow.

Anonymous (not verified)
Thu, 11/07/2013 - 05:23

Just started playing with this. I've found that if you use the same name as the Bartik stylesheet you will need to duplicate and maintain the entire stylesheet (ack). To do selective overrides, give your corresponding stylesheet a different name, then you can just include the specific selectors you want to override.

Anonymous (not verified)
Thu, 11/28/2013 - 20:53

FYI - I just tried creating a subtheme with a hyphen, and its not seen (rt-admin). Took me a while to figure out the problem. Once I changed it to an underscore (rt_admin), it worked fine.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.