| Drupal

A-Sub-theme-of-a-Drupal-Sub-themeThe best way to design and modify your Drupal site is with overrides.

If you're not sure how overrides work, read our introduction to Drupal overrides.

One of the most powerful ways to use overrides Drupal is with sub-themes. You might not be surprised to know we have an introduction to sub-themes too!

However, sometimes you need not just sub-themes, but you also sub-sub-themes. Sounds crazy? Well, sub-sub-themes are what you need to safely override some themes you download from Drupal.org.

Read on to find out about sub-sub-themes:

How Drupal sub-themes and sub-sub-themes work

Here's the idea behind a Drupal sub-sub-theme.

We're going to use Bartik as an example. By default, Bartik sits in the /themes/ folder because it's a core theme.

We're going to create two subthemes in the /sites/all/themes/ folder. We'll call them "bartik_subtheme" and "bartik_sub_subtheme". Each one needs a folder with the name of theme, as in the image below:

media_1396364454841.png

The image below shows how the folder structure will look.

media_1396366132700.png

As you can see, we've created two files inside each folder:

  • bartik_subtheme.info
  • style.css

Each of those two files are essential:

  • bartik_subtheme.info contains the details that Drupal needs to recognize your theme
  • style.css is where you can put your custom CSS.

Here's the .info file for the sub-theme:

media_1396383797345.png

And here's the .info for the sub-sub-theme. Notice that the only line that is really different is the base theme.

media_1396383905020.png

You know you've created the sub-themes correctly when they can be accessed in your Drupal site's admin.

media_1396364329594.png

You can now place CSS files and Javascript files inside the sub-theme or sub-theme folders.

Theoretically, thus process could go one for ever. You could create sub-sub-sub-sub-sub-sub-sub themes or worse:

media_1396366204913.png

Sub-sub-themes in the real world

Now let's see how this plays out in the real world. Here's an example of a theme (Adaptivetheme) and a related sub-theme (Corolla):

Why would we want a sub-sub-theme? Because we're not able to modify Corolla without hacking the core files. And, if there's an update to Corolla, we'll lose all our changes.

So, here are the Adaptivetheme and Corolla folder in /sites/all/themes/:

media_1396364908437.png

I'm going to create a new folder called /corolla_subtheme/ and create the .info and .css files inside:

media_1396366056537.png

That will be enough for Drupal to recognize the sub-sub-theme:

media_1396365184312.png

I can now edit the style.css inside /corolla_subtheme/ and all of my changes will override the default Corolla styles.

Now, if I update Adaptivetheme or Corolla, I won't lose any changes.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.