Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Themes

Themes In the section on modules, we saw how modules can be shared (to a certain extent) by placing them in sites/all/modules/, or how they can be installed for only a specific site by placing them in sites/SITENAME/modules/, where SITENAME is replaced by the site's name. The same holds for themes. Multi-site themes can go in sites/all/themes, while site-specific themes can go in sites/SITENAME/themes/. We can see this by first installing a theme into the sites/all/themes/ directory. Let's begin with the BlueMasters theme. This is a stand-alone theme, which means it does not depend on a base theme. So we can install it in the usual ways. Either download it and uncompress it into sites/all/themes, or use Drush to do this for you: $ drush dl bluemasters Now when we log into Books as an administrator we can go to the Appearance page and see Blue Masters there. And if we go to the Cooks site, log in, and visit the Appearance settings, we will see the same thing: Now let's enable BlueMasters on Cooks. Click on Enable and Set Default to enable the theme and simultaneously set it as the site theme for our Cooks site. Now we can once again compare the Books and the Cooks theme pages: Notice how the Books site still lists BlueMasters as disabled, while the Cooks site has it enabled and set as default. Just as with modules, when we talk about sharing a theme between sites, what we mean is that both sites have access to the theme. But while they share access to the theme's code and images, stylesheets and templates, they do not share configuration data. Note This can get tricky! Changing a template in a shared theme will change the template on all sites. But adding CSS or other styling through the administration interface typically will not result in sharing across sites. The important detail that distinguishes when theme data is shared and when it is not is this: Anything that is stored in a code file (templates, CSS, info files, and so on) is sharedAnything stored in the database (enabled status, settings, certain information about classes, or IDs) is site-specific This can introduce some tedious nuances, as it is common practice to set some data through the administrative UI (storing it in the database) and then tweak CSS stylesheets to make use of that data. This strategy may not always work as desired on a multi-site setup, since the CSS files are shared across all three sites. This is made slightly more complex by the addition of site-specific modules, which may have theme data accessible to one site, but not others. For modules can inject markup, styles, and JavaScript into the theme in a way that can significantly alter a site's appearance (and this is good). This can have tricky side-effects, though, when a theme is shared across sites, but modules are not. This all sounds complex—it is—but there is a remedy: subthemes. We will start to move in that direction by looking at a few ready-made subthemes. Subthemes and sharing Since Drupal 6 it has been possible to base one theme on another theme. That is, we can start with a base theme, which defines major pieces of the site's layout and styling, but doesn't necessarily provide the final details. Then we can add a derivative theme (a subtheme) that begins with a base theme and fills in the details. It can even override things in the base theme that should be different. The prevailing theory among Drupal theme developers is that when you are building your own theme, it is often best to begin with a base theme and build your own custom subtheme. Now let's look at a practical example. The AdaptiveTheme (http://drupal.org/project/adaptivetheme) base theme has recently become fairly popular. It provides a base theme that supports a broad range of devices, including desktop and laptop computers, but also mobile devices like tablets and smart phones. Tip Which base theme? Drupal.org has many base themes to choose from. Zen, the most popular, has received much acclaim from those who build custom themes. AdaptiveTheme is a relative newcomer, but has many ready-to-use subthemes. Tao, Omega, and Fusion Core are also popular. There are also base themes built on various grid layouts, such as the 960.gs system. If you are planning to build your own theme, take a look at the popular base themes and see which, if any, work best for you. Let's install this base theme. We'll put it in the sites/all/themes/ folder. Here's how to do it with Drush: $ drush dl adaptivetheme This actually installs three themes: AT Core: The base AdaptiveTheme themeAT Subtheme: A template project for building your own subthemeAT Admin: A fully functioning subtheme built on AT Core and intended to be used as an admin theme When it comes to theming our user-facing site, none of these themes really provides us with what we want. This, for example, is what the site looks like with AT Core set as the theme: What is important about base themes, though, isn't what the base theme looks like, but what it provides for subthemes. To see how this works, let's download a couple of subthemes. Here we are going to throw in a twist. We will install one subtheme on Cooks, and one on Looks. Cooks will be using the Corolla subtheme (http://drupal.org/project/corolla) and Looks will be using Pixture Reloaded (http://drupal.org/project/pixture_reloaded). $ drush dl --destination=sites/cooks.local/themes corolla $ drush dl --destination=sites/looks.local/themes pixture_reloaded Note If you do this by hand, you will need to create the themes directories for these two sites. Drush, on the other hand, will do it for you. Next, I can go to each of my two sites—Cooks and Looks—and (as admin) go to the Appearance page and enable these themes as default. Here is a screenshot of Looks running Pixture Reloaded, and Cooks running Corolla: In this screenshot we can see how different the two themes are (even with no content). Yet both were built on the same base theme. But there's something even more important going on here, the base theme was shared, but the subthemes are not. Since subthemes never actually alter the files in the base theme, this works very well. We can gain the advantage of having one shared theme at the core, but when it comes to tailoring each site to its audience, we split our subthemes. Both Corolla and Pixture Reloaded are intended to be finished products. The assumption is that you won't need to dive into the code of these themes and start changing CSS or template files. In fact, if possible, you should avoid doing so. However, there will be times when you will want to start with some theme (typically a base theme) and build your own style. The best way to do this in a multi-site configuration (assuming you want to use the same base for more than one site) is to do as we did earlier, that is: Share a common base theme by putting it in sites/all/themesFor each site's theme, put that theme in sites/SITENAME/themes (where SITENAME is the name of the particular site) This strategy is good for minimizing the confusion between sites and their themes, and it gives you the freedom to modify a site's theme without worrying about unintended consequences to other sites. You should now be at the point where you can install and manage themes on a multi-site Drupal instance. That takes us through the subject matter of the present chapter.

  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint