Drupal sub-themes và sub-sub-themes làm việc như thế nào?

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-themestoo!

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:

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