[[toc]] + H4 Themes !HowToCreating 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}}.++ Default ThemeTheEach 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**/graphics # horde/themes/**theme**/graphics # **application**/themes/graphics # horde/themes/graphics (The **application** entries listed above will not 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//. ++ Theme Layout Themes are located in the themes/[themename] directory. +++ CSS CSS files should normally go into the base theme directory. There are several filenames that have special meaning in Horde: ||~ Filename ||~ Description || || {{screen.css}} || The default CSS definition || || {{rtl.css}} || Styles to use if the current language is a Right-to-Left language || || {{embed.css}} || Used for embedded display || 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 || || {{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) || 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 prefix). +++ Information File **##red|This file is only needed in the horde theme directory. It is not needed in an applications's theme directory##** The {{info.php}} contains information regardingthe stylesheet. For now thisthe theme. It must be a file that can be parsed by PHP. It should contain the following variables: ||~ Variable Name ||~ Description || || $theme_name || This islimited to thethe theme nameofas it will appear in the theme list in thetheme.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. * * Copyright 2010 John Doe <john@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.