[commits] [Wiki] changed: Doc/Dev/ThemesH4
Michael Slusarz
slusarz at horde.org
Tue Nov 23 20:02:31 UTC 2010
slusarz Tue, 23 Nov 2010 15:02:31 -0500
Modified page: /Doc/Dev/ThemesH4
New Revision: 2.0
Change log: Update theme information
@@ -1,55 +1,45 @@
[[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}}.
+++ Default Theme
-The {{info.php}} contains information regarding the stylesheet. For
now this is limited to the name of the 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.
-An example for info.php:
+++ User Preference Theme
-<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>
+The default theme is then extended by the theme defined in the user's
'theme' preference entry.
-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.
+++ Theme Inheritance
-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".
+Theme elements are inherited in the following order:
+# **application**/themes/**theme**/graphics
+# horde/themes/**theme**/graphics
+# **application**/themes/graphics
+# horde/themes/graphics
-++ Application themes
+(The **application** entries listed above will not be skipped if
horde is the current application.)
-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.
+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//.
-++ Loading of CSS files
+++ Theme Layout
-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:
+Themes are located in the themes/[themename] directory.
-# horde/themes/screen.css
-# horde/themes/**theme**/screen.css
-# horde/**application**/themes/screen.css
-# horde/**application**/themes/**theme**/screen.css
++++ CSS
+CSS files should normally go into the base theme directory. There
are several filenames that have special meaning in Horde:
-++ Defining theme colors and styles
+||~ 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 ||
-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:
+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 ||
@@ -57,19 +47,37 @@
|| {{opera.css}} || Opera ||
|| {{mozilla.css}} || Mozilla-based browser (i.e. Firefox) ||
|| {{webkit.css}} || Webkit-based browser (i.e. Google Chrome, Safari) ||
-++ Adding custom graphics
+URLs contained in CSS should be relative URLs.
-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.
++++ 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):
+Graphics live in the {{graphics/}} folder of your theme's base directory.
-# horde/**application**/themes/**theme**/graphics
-# horde/themes/**theme**/graphics
-# horde/**application**/themes/graphics
-# horde/themes/graphics
++++ Sounds
+Sounds live in the {{sounds/}} folder of your theme's base directory.
-++ Adding custom sounds
+Sounds must be in WAV format (with a {{.wav}} file prefix).
-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.
++++ 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 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.
+ *
+ * Copyright 2010 John Doe <john at example.com>
+ */
+$theme_name = _("My Theme Name");
+</code>
More information about the commits
mailing list