Skin vs. Theme

Atrium provides a way to quickly change key elements of the design with minimal fuss and very low maintenance costs. This method is called skinning -- if you ever created a WinAMP skin or similar, you'll be familiar with the concepts.

Of course if you have greater customization needs you can always create a full custom Drupal theme for Atrium. This HOWTO will cover the minimal skin approach. Please refer to the Drupal.org docs on theming for more information about the Drupal theme system.

Checklist

1. Design custom overrides for skin, icon sprites
2. Set up your skin's directory and info file
3. Add your custom sprites and any other extra images needed for your skin
4. Add any custom CSS needed for your skin
5. Add spaces_design integration for your skin

Step by step

Scene is a skin provided with the Atrium package as an example that you can use to help you get started. This HOWTO will walk through the process taken to create Scene -- you can also get started quickly by making a copy of Scene with a different name and tinkering around.

1. Design custom overrides for skin, icon sprites

The Atrium base theme Ginkgo uses extensive use of sprites for its graphic components. This makes it simple to override large portions of the design with just a few files. In particular, there are 3 key sprites in Ginkgo:

• sprite_base.png core UI elements found in the main page "canvas"
• sprite_icons.png core feature icons
• sprite_skin.png header/wrapper bleeds and elements

For your skin you will probably want to override sprite_skin.png and sprite_icons.png. Please be respectful when overriding the design of the main page canvas as developers who build custom features will have certain design expectations for this area of the page.

To create an override of one of the skins you can use a graphics program like GIMP, Photoshop or Inkscape. You should keep your images/textures within the same metrics/coordinates as the default skin (i.e. do not rearrange elements).

2. Set up your skin's directory and info file

To register your skin as a theme available to Drupal, add a directory and info file for it from your Atrium root directory:

You can then edit scene.info and add information for your skin:

Key entries to take note of:

• atrium this declares that this theme is compatible with Atrium. Themes without this key (e.g. default Drupal themes) will not be made available for use by Atrium.
• base theme declares that this theme extends Ginkgo. Without this, you'll be starting from scratch rather than adding your customizations on top of Atrium's defaults.
• spaces_design_site, spaces_design_og, spaces_design_user allow you to define the default colors for each of the different space types.

You can now enable and switch to your custom skin, although it won't look very different yet.

3. Add your custom sprites and any other extra images needed for your skin

You can add your custom sprites to your skin by creating an images (or other directory) and adding your sprites:

4. Add any custom CSS needed for your skin

We now let Atrium know to use the sprite overrides in our skin using our CSS file registered in scene.info (scene.css):

Note that we use the background-image property for sprites and not the greedier background property. This allows all the background positioning and other behavior defined by Ginkgo to be preserved.

Scene adds some other minor CSS adjustments to the header, navigation, footer, etc. to fit its aesthetic better.

5. Add spaces_design integration for your skin

spaces_design allows any space (group, user, etc.) to have color and logo customizations. Ginkgo handles logos automatically, but you'll need to do a little extra to make sure your skin makes the most use of custom color choices.

The color CSS for customized spaces is generated dynamically from the spaces-design.tpl.php template. You can override it in your skin by adding it to the directory:

In it you can manage which colors get assigned to which elements.

• $color is the exact color selected by the user
• $downshift is a darkened variant of the selected color
• $upshift is a lightened variant of the selected color