[commits] [Wiki] created: Doc/Dev/ThemesH5

[Michael Slusarz]

slusarz  Tue, 22 May 2012 15:00:09 -0600

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

[[toc]]

+ H5 Themes !HowTo

++ Default Theme

Each application defines a 'default' theme.  This default theme is  
used as the base of all other themes.  The default theme is not  
accessible to end users, and should not be altered when developing a  
new theme.

++ User Preference Theme

The default theme is then extended by the theme defined in the user's  
'theme' preference entry.

++ Theme Inheritance

Theme elements are inherited in the following order:

# **application**/themes/**theme**
# horde/themes/**theme**
# **application**/themes/default
# horde/themes/default

(The **application** entries listed above will be skipped if horde is  
the current application.)

For images & sounds, the first matching item is used working down the  
inheritance tree.

For CSS, the inheritance order determines the order the stylesheets  
are output.  CSS files located at the top of the inheritance tree will  
be loaded //LAST//, horde default stylesheets will be loaded //FIRST//  
(to allow application definitions to trump Horde-wide defaults).   
Additionally, stylesheets added via the 'cssfiles' hook will be loaded  
//LAST//, after the application stylesheets.

++ Theme Layout

Themes are located in the themes/[themename] directory.

+++ Subdirectories

++++ View Subdirectories

View specific subdirectories will be used if they exist in a theme.

||~ Directory ||~ View ||
|| {{basic}} || Basic (traditional) ||
|| {{dynamic}} || Dynamic ||
|| {{minimal}} || Minimal ||
|| {{smartmobile}} || Smartmobile ||

++++ Reserved Subdirectories

The following subdirectories are reserved for special Horde use:

||~ Directory ||~ Description ||
|| {{block}} || CSS to use for an application's portal block ||

+++ CSS

CSS files should normally go into the base theme directory.  There are  
several filenames that have special meaning in Horde:

||~ Filename ||~ Description ||
|| {{embed.css}} || Used for embedded display ||
|| {{rtl.css}} || Styles to use if the current language is a  
Right-to-Left language ||
|| {{screen.css}} || The default CSS definition ||

Additionally, the following CSS files will be automatically added  
based on the current browser:

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

URLs contained in CSS should be relative URLs.

+++ Graphics

Graphics live in the {{graphics/}} folder of your theme's base directory.

+++ Sounds

Sounds live in the {{sounds/}} folder of your theme's base directory.

Sounds must be in WAV format (with a {{.wav}} file suffix).

+++ Information File

**##red|This file is only needed in the horde theme directory. It is  
not needed in an applications' theme directory##**

The {{info.php}} contains information regarding the theme.  It must be  
a file that can be parsed by PHP.  It should contain the following  
variables:

||~ Variable Name ||~ Description ||
|| $theme_name || This is the theme name as it will appear in the  
theme list in the users' display options. ||

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.
  *
  * @author John Doe <john at example.com>
  */
$theme_name = _("My Theme Name");
</code>