6.0.0-git
2024-03-19
Last Modified 2013-09-04 by Jan Schneider

Themes HowTo

This information is valid for Horde 3 only. See Doc/Dev/ThemesH4 for Horde 4 or Doc/Dev/Themes for Horde 5 and later.

Creating a new theme for Horde is as simple as creating a new directory under horde/themes/ and adding the files info.php and screen.css.

The info.php contains information regarding the stylesheet. For now this is limited to the name of the theme and an optional line to indicate substitution of icons.
So, in its simplest form this file only needs to contain a single line:

$theme_name = _("My Theme Name");

This is the theme name as it will appear in the theme list in the users' display options. The internally used theme name that you can use to set a default theme in horde/config/prefs.php is determined from the directory name you use.

Let's take the example of your new theme is in horde/themes/mytheme/, then the internal name of this theme would be "mytheme" while the users will see it as "My Theme Name".

If you want to contribute your theme to the Horde Project or make it publically available elsewhere, you should add some comments to the file header to explain where the theme comes from:

/**
 * This is my personal theme.
 * It is based on the colors of my bike when I was five.
 *
 * Copyright 2004 John Doe <john@example.com>
 */

$theme_name = _("My Theme Name");

Loading of CSS files

The CSS files a theme is built on are loaded in a specific order. This is important to keep in mind if you want to override specific styles or make use of inheritance.
CSS files are loaded in the following order, if they exist, where application is the currently loaded application and theme is the name of the active theme:

  1. horde/themes/screen.css
  2. horde/themes/theme/screen.css
  3. horde/application/themes/screen.css
  4. horde/application/themes/theme/screen.css

Defining theme colors and styles

This alone doesn't make a theme of course, now you want to create you own set of colors and styles for your theme.

You can use the screen.css file to override the default Horde styles. It is a regular static css file, so if you know how CSS works and look at some of the existing theme files you could easily find out how to change certain colors, fonts, lines etc. You should not start with a copy of the "master" theme file themes/horde/screen.css but you should instead only define those CSS rules that you want to overwrite. This way you make sure that your theme doesn't miss any important style if the master theme file gets extended at some point in the future.

Adding icon sets

If you want to add custom icons to your theme you first need to create a graphics/ folder in your theme's directory, in our example theme this would be horde/themes/mytheme/graphics/. Then you need to copy all the existing icons from the default theme directory horde/themes/graphics/, including any subdirectories, into your theme folder.

Now you need to create a file called themed_graphics in any of your new theme folders that are going to contain theme icons. If you are going to provide theme icons for Horde and IMP, you would create the files horde/themes/mytheme/themed_graphics and horde/imp/themes/mytheme/themed_graphics. The themed_graphics files can be empty.

Now start replacing the icons in your theme folder with your own ones. You may want to periodically run the script horde/scripts/themes_check.php which will highlight any new icons that may have been added to the base theme that are missing in the other themes.

Interesting Links