[cvs] [Wiki] created: Doc/Dev/ThemesH4

[Michael Slusarz]

slusarz  Mon, 08 Mar 2010 22:36:26 -0500

Created page: http://wiki.horde.org/Doc/Dev/ThemesH4

[[toc]]

+ H4 Themes !HowTo

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.

An example for info.php:

<code type="php">
<?php
/**
  * This is my personal theme.
  * It is based on the colors of my bike when I was five.
  *
  * Copyright 2010 John Doe <john at example.com>
  */
$theme_name = _("My Theme Name");
</code>

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".


++ Application themes

Adding a theme to an application is identical to adding a theme to  
Horde, with the exception that no {{info.php}} file is needed in the  
application.


++ 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:

# horde/themes/screen.css
# horde/themes/**theme**/screen.css
# horde/**application**/themes/screen.css
# horde/**application**/themes/**theme**/screen.css


++ Defining theme colors and styles

This alone doesn't make a theme, of course.  Next you will 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.

Generally, themes should only define colors and sizes.  Overriding  
positioning elements should generally not be done as this positioning  
may break things in the pages (especially with dynamic interfaces such  
as dimp).

Note that various CSS files can be used.  {{screen.css}} will always  
be loaded.  Other CSS files will only be loaded based on the browser.   
The following browser CSS files are available:

||~ Filename ||~ Browser ||
|| {{ie8.css}} || Internet Explorer 8 ||
|| {{ie7.css}} || Internet Explorer 7 ||
|| {{ie6_or_less.css}} || Internet Explorer <= 6 ||
|| {{opera.css}} || Opera ||
|| {{mozilla.css}} || Mozilla-based browser (i.e. Firefox) ||
|| {{webkit.css}} || Webkit-based browser (i.e. Google Chrome, Safari) ||

++ Adding custom graphics

If you want to add custom graphics 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 add any graphics you want to use that will override the  
default graphics.

Theme graphics displayed via HTML <img> tags will be displayed with  
the following priority (note that this is different than the CSS  
loading priority):

# horde/**application**/themes/**theme**/graphics
# horde/themes/**theme**/graphics
# horde/**application**/themes/graphics
# horde/themes/graphics


++ Adding custom sounds

Sounds are stored in the {{sounds/}} folder in your theme's directory.  
  Sounds must be in WAV format (with a {{.wav}} file prefix).  The  
override priority of sounds is the same as the {{graphics/}} folder  
described above.