HowTo create a custom Redmine theme » History » Version 2

Jean-Philippe Lang, 2007-10-10 19:45
Added stylesheet example

1 1 Jean-Philippe Lang
h1. HowTo create a custom Redmine theme
2 1 Jean-Philippe Lang
3 1 Jean-Philippe Lang
As of r818, Redmine offers basic support for themes.
4 1 Jean-Philippe Lang
Themes can override stylesheets only (application.css).
5 1 Jean-Philippe Lang
6 1 Jean-Philippe Lang
h2. Creating a new theme
7 1 Jean-Philippe Lang
8 1 Jean-Philippe Lang
Create a directory in public/themes. The directory name will be used as the theme name.
9 1 Jean-Philippe Lang
10 1 Jean-Philippe Lang
Example:
11 1 Jean-Philippe Lang
12 1 Jean-Philippe Lang
  public/themes/my_theme
13 1 Jean-Philippe Lang
14 1 Jean-Philippe Lang
Create your custom @application.css@ and put it in a subdirectory names @stylesheets@:
15 1 Jean-Philippe Lang
16 1 Jean-Philippe Lang
  public/themes/my_theme/stylesheets/application.css
17 1 Jean-Philippe Lang
18 2 Jean-Philippe Lang
Here is an example of a custom stylesheet that only override a few settings:
19 1 Jean-Philippe Lang
20 2 Jean-Philippe Lang
<pre><code>/* load the default Redmine stylesheet */
21 2 Jean-Philippe Lang
@import url(../../../stylesheets/application.css);
22 1 Jean-Philippe Lang
23 2 Jean-Philippe Lang
/* add a logo in the header */
24 2 Jean-Philippe Lang
#header {
25 2 Jean-Philippe Lang
    background: #507AAA url(../images/logo.png) no-repeat 2px;
26 2 Jean-Philippe Lang
    padding-left: 86px;
27 2 Jean-Philippe Lang
}
28 2 Jean-Philippe Lang
29 2 Jean-Philippe Lang
/* move the project menu to the right */
30 2 Jean-Philippe Lang
#main-menu { 
31 2 Jean-Philippe Lang
    left: auto;
32 2 Jean-Philippe Lang
    right: 0px;
33 2 Jean-Philippe Lang
}
34 1 Jean-Philippe Lang
</code></pre>
35 1 Jean-Philippe Lang
36 2 Jean-Philippe Lang
This example assume you have an image located at @my_theme/images/logo.png@.
37 2 Jean-Philippe Lang
38 2 Jean-Philippe Lang
You can download this sample theme as a starting point for your onw theme. Extract it the @public/themes@ directory.
39 2 Jean-Philippe Lang
40 1 Jean-Philippe Lang
h2. Applying the theme
41 1 Jean-Philippe Lang
42 1 Jean-Philippe Lang
Go to "Administration -> Settings" and select your newly created theme in the "Theme" drop-down list. Save your settings.
43 1 Jean-Philippe Lang
Redmine should now be displayed using your custom theme.
44 2 Jean-Philippe Lang
45 2 Jean-Philippe Lang
_Note that if you install a new theme, you may need to restart the application so that it shows up in the list of available themes._