HowTo create a custom Redmine theme » History » Version 6

markos p, 2013-11-23 08:11

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