Theming for Drupal Commons, Part 1: Customizing the Commons Theme

Drupal Commons is an awesome new Drupal install profile from Acquia that combines the core functionality of Organic Groups with additional modules such as shoutbox, heartbeat, user points and custom functionality into a package that allows users to quickly and easily launch a robust website geared towards growing a community. Commons is a fantastic install profile for use as a company intranet, community forum or any other situation where users rally around common interests to share information, documents and experiences.

Drupal Commons comes packaged with a theme specially built for use with the install profile, Acquia Commons, design by Acquia and built by TopNotchThemes. Since Acquia Commons is based on TopNotchThemes’ robust theming framework, Fusion, there are many different styling options that can be easily configured through the Drupal UI, without any knowledge of CSS or theming. Also, since Commons uses Panels for page layouts, customizing the presentation of your content is as easy as a few click-and-drags.

In this blog post, I’m going to go over the UI configurations available in the Acquia Commons theme, as well as show some tips and tricks for customizing the theme if you do know how to use CSS. Part 2 of this blog series will cover creating a completely custom theme using the Fusion Commons Starterkit and Part 3 will cover adapting an existing theme to work with Drupal Commons.

Featues of Fusion

A lot of the flexibility of customizing Drupal Commons comes from features of our theming framework, Fusion, and is universal to all the themes we make here at TopNotchThemes. A lot of the information I have for you in this post is a re-telling of our Fusion Documentation. If you need more info, be sure to take a look at http://fusiondrupalthemes.com/support/documentation

One of the best features of Fusion is the integration with the Skinr module. Skinr allows you to easily change some design aspects of a theme through the user interface. First, we’ll go over some of the changes you can easily make to your Drupal Commons site.

First, let’s take a look at a Commons group homepage as it looks when we first install the site.

One quick way to add some color to the page or to draw attention to one page element is to change the color scheme on a block. To do this, just hover over the block’s title and click on the gear icon that will appear:

On the block configuration page, you will see lots of different skinr options for styling this block. At the bottom, you’ll see the option for “Drupal Commons Colors.” Choose a different color scheme from this drop-down, save the block and return to the group homepage to see the result.

Another customization you might want to make to the Acquia Commons theme is to change some aspects of the theme’s layout. You can easily make a few tweaks to the layout on the Acquia Commons theme settings page.

For example, you may wish to switch from a fluid-width layout to a fixed, 960 pixel-wide format and change the width or position of the sidebars.

Using Panels for Content Layout

Since Drupal Commons uses panels for the layout of the homepage and group pages, it is very easy to change the layout of information on those pages. For example, on a Group page, find the “Edit Panel” tab and click on it.

This will take you to the Panels edit page, where you can easily drag-and-drop content blocks to re-arrange the layout of the page. You can also add or remove content.

With these few user interface features, you can easily customize the layout and content of your Drupal Commons site to work best for your community.

Getting in Deeper

Inevitably, you’ll run across something you want to change about the theme that can’t be handled through the admin. You may want to change the background image, edit the color of the main navigation or even change the styling of typography on the site. In these situations, you will need to add a bit of custom CSS to the theme.

The best practice for adding your own custom CSS to any Fusion theme is to use the provided file local-sample.css. Rename this file to local.css and place any custom CSS in this file. Doing so will be helpful for two reasons; first, local.css is listed after the Acquia Commons stylesheet, so your styles will always override the default styles for the theme and secondly, keeping your CSS separate from the theme’s core CSS helps make troubleshooting and updating easier.

As an example, we are going to change the background of our Commons site to be a blue gradient instead of the Common’s gray, hand-holding people image. Our first step is to use an image editor such as GIMP or Photoshop to create our gradient image. In an effort to keep our custom changes separate from the core of the theme, we will save our image in a sub-folder of ‘images’, called ‘custom’.

Our next step is to investigate the existing Commons CSS to find out what we need to change to use our background image.

From inspecting the existing CSS with Firebug, we can see that the existing background is implemented using two divs, “left-background” and “right-background,” so our first step is going to be to hide these divs since we don’t want to use that background anymore. We will add the following CSS to local.css:

this should disable the people-holding-hands background image. Note: You may need to clear the site’s caches to see your changes. If you will be doing a lot of edits to the theme, it is best to disable CSS compression on the site performance page while you are working on changes to the theme.

Our next step is to edit the body tag so that it uses our blue gradient image instead of the default gray gradient. To do so, we add a little bit of custom CSS to local.css:

Now, if we use Firebug to inspect the body element again, we can see how our background property in local.css is overriding the background property in acquia-commons-style.css

Wrapping Up

Now that you know the three best ways to customize the Drupal Commons default theme, experiment and see what you can do to make the look and feel of your site perfect for your community! In the next part of our series on theming for Drupal Commons, we’ll cover how to create a custom theme from our Commons Starterkit.

Here are some helpful links to learn more about topics covered in this post:

Don’t know CSS? Learn it here: http://www.w3schools.com/css/css_intro.asp
A handy tutorial video on using firebug to troubleshoot CSS: http://www.kristarella.com/2009/02/how-to-use-firebug-for-css/
For more detailed instructions on using panels, read up on the Drupal documentation pages: http://drupal.org/node/496278.