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:
The image below shows how the folder structure will look.
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:
And here’s the .info for the sub-sub-theme. Notice that the only line that is really different is the base theme.
You know you’ve created the sub-themes correctly when they can be accessed in your Drupal site’s admin.
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:
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):
- Adaptivetheme: https://drupal.org/project/adaptivetheme
- Corolla: https://drupal.org/project/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/:
I’m going to create a new folder called /corolla_subtheme/ and create the .info and .css files inside:
That will be enough for Drupal to recognize the sub-sub-theme:
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.
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?
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.
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.