Screenshot of OpenAtrium 2.6 Theme

Creating A Subtheme From Open Atrium 2.6x’s oa_basetheme

Last month, Open Atrium released one of their largest upgrades since version 2.  Included in this upgrade is a complete revamp of the theme layer.  You can read more about the changes in 2.6 here: A Fresh New Look for Atrium.

There is some documentation on creating a subtheme from oa_radix, OpenAtrium 2.5’s base theme but, unfortunately, the documentation for subtheming 2.6’s base theme, oa_basetheme, hasn’t been created by the maintainers just yet.

We’re trying to get this upgrade out to our users ASAP so, today, I spent some time fiddling with creating a new subtheme for Open Atrium 2.6x.  In this tutorial, we’ll go over what I’ve found:

The oa_basetheme comes with bootswatch and, using Drush, we are supposedly able to install an ‘instant subtheme’ by executing:

There are various options for this command, if you’d like to provide a machine name or use a different bootswatch theme.  You can find these options by running:

So, from my site’s directory (sites/default), I tried to run:

and was presented with

This issue had been reported on d.o, but that thread lead to no results.

Creating a Subtheme

After some finagling and trial-and-error, I was able to get the starter subtheme created by performing the following steps:

  1. Copy oa_basetheme from “docroot/profiles/openatrium/themes” to my site’s theme directory, “docroot/sites/default/themes”:
  2. Enable the theme with Drush:
  3. Browse to Appearance Config (/admin/appearance) and select Set As Default for oa_basetheme.
  4. Run the oa_basetheme bootswatch starter Drush command:

    No errors this time!  I’m honestly not sure if the resolution was the fact that I moved oa_basetheme from the Open Atrium profile to sites/default or the fact that I set oa_basetheme as the Default theme.  I’m inclined to think the fix was the latter since the error was a Bootswatch conflict with oa_radix, but, alas, I have yet to actually confirm this.

    This will put the new subtheme in “docroot/sites/all/themes”.  If you don’t need it in /sites/all, be sure to move it to /sites/default.

  5. Browse to Appearance Config (/admin/appearance) and select Set as Default for the original theme from Step 3.
  6. Remove the copy of oa_basetheme from your site’s theme directory

Now, if you have a fresh install of OpenAtrium 2.6x, you can go ahead and “Enable and Set as Default” directly from Appearance Config (/admin/appearance) and you’ll be good to go!

Upgrading from 2.5x to 2.6x?

However, if you, like me, are upgrading an existing OpenAtrium site from 2.5x to 2.6x, there are a few more steps you need to take to enable all the new features of the theme.

  1. Enable the Open Atrium Site Layout Defaults module.  This is a module that ships with OA 2.6x and contains the default panels config required for the new functionality in the new 2.6x theme.

    This will also enable dependencies: oa_site_layout and panels_everywhere
  2. Go ahead and Enable your new subtheme in Appearance Config (/admin/appearance) but do not Set As Default just yet.
  3. The OA base theme’s panel layout is defined in a Page called site_template for the Panels Everywhere module, however, out of the box, it’s configured to be used only when the current theme is either oa_theme or oa_basetheme.Since we have a new subtheme, we need to update the selection rules for the pertinent Variant within that Page to use the Variant for our new subtheme as well.  Sooo… browse to /admin/structure/pages/nojs/operation/site_template/handlers/site_template__atrium-modern/criteria” (or go to Admin > Structure > Pages > Edit site template Tab > Selection Rules)
  4. Under the Criteria Table, select “Current theme” from the drop down and click the “Add” button.

     Selection Rules config page of the Modern layout Variant
    On the Selection Rules config page of the Modern layout Variant, select “Current theme” and click the “Add” button
  5. Select your new subtheme from the dropdown menu and click the “Save” button.

    Theme selection while adding a new Selection Rule to the Modern layout Variant
    Select your new subtheme and click the “Save” button
  6. Click the “Update and Save” button at the bottom of the Variant Options for the Default site template page.

    Screenshot of adding a new selection rule to a variant
    Once your new selection rule has been added, click “Update and Save” on the Variant modal.
  7. Finally, go back to Appearance Config (/admin/appearance) and select Set as Default for your new subtheme.
  8. Clear caches and you’re all set to start working on the theme’s code itself.

One more thing… Regarding Concurrent Themes

We are currently planning to deploy our new subtheme to a subset of users: a beta group.

This requires keeping our existing theme from 2.5x enabled and using ThemeKey and ThemeKey User Profile (packaged with the ThemeKey module) to allow users to “opt-in” to the new theme.

To accomplish that, forego Step 7 of the previous list, leaving your old 2.5x theme as Default and your new subtheme simply Enabled.  Follow these steps to install and configure ThemeKey and ThemeKey User Profile.

  1. Install and enable ThemeKey and ThemeKey User Profile
  2. Browse to the UI Settings for ThemeKey (/admin/config/user-interface/themekey/settings/ui), expand the Selectable Themes table and check the checkbox for your old 2.5x theme and your new 2.6x subtheme.
  3. In the UI Settings table, select “Add theme option to user profile”.
  4. Click the “Save configuration” button.
  5. Browse to User Permissions configuration page, and ensure the permission: “Select different theme” is enabled for your required roles (in most cases, authenticated user).  Or, add the permission to the role with Drush:

Now when a user browses to their Edit Profile page, they’ll be presented with a field to select the theme to use.

Screenshot of Edit Profile page including ThemeKey User Profile selection table
A user can select which theme to use on their Edit Profile page

Leave a Reply

Your email address will not be published. Required fields are marked *