A Sub-theme of a Drupal Sub-theme

A-Sub-theme-of-a-Drupal-Sub-theme

The 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.

Instructor

  • 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.

0 0 votes
Blog Rating
Subscribe
Notify of
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
PJ

But how do you deal with the CSS overrides? For me the only really nice user-case would be setting Mothership as a base-theme, followed by Bootstrap. But doesn’t the first base theme strip out to much or makes it more difficult to do so?

steve

Hi PJ
The overrides all go into the sub-sub-theme’s CSS files.
Yes, Mothership and Bootstrap is an excellent use-case for this.

Horia Rudan

I know this is an old article, but this is my use case:

– 2 websites, Domanin Access module + Domain theme: different content, shared theme (bootstrap subtheme)

– setup works fine but now I want to separate the template files because I need to integrate e-mail marketing api’s and this api’s differ from one domain to another

– solution: site no1 keeps the bootstrap sub-theme but site no 2 gets a sub-sub-theme. Everything is still inherited from sub-theme but sub-sub-theme uses different html.tpl.php and page.tpl.php so I can include the necessary individual API’s in the head and integrete different subscription forms in the page.

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