Project

General

Profile

HowTo create a custom Redmine theme » History » Version 11

Toshi MARUYAMA, 2018-01-08 13:22
use code highlight

1 1 Jean-Philippe Lang
h1. HowTo create a custom Redmine theme
2
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
h2. Creating a new theme
6
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
Example:
10
11
  public/themes/my_theme
12
13 4 Jean-Philippe Lang
Create your custom @application.css@ and save it in a subdirectory named @stylesheets@:
14 1 Jean-Philippe Lang
15
  public/themes/my_theme/stylesheets/application.css
16
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 11 Toshi MARUYAMA
<pre><code class="css">
20
/* 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
#header {
25
    background: #507AAA url(../images/logo.png) no-repeat 2px;
26
    padding-left: 86px;
27
}
28
29 10 Go MAEDA
30 2 Jean-Philippe Lang
/* move the project menu to the right */
31
#main-menu { 
32
    left: auto;
33
    right: 0px;
34
}
35 1 Jean-Philippe Lang
</code></pre>
36
37 2 Jean-Philippe Lang
This example assume you have an image located at @my_theme/images/logo.png@.
38
39 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.
40
41 5 Jean-Philippe Lang
h2. Adding custom javascript
42
43
Simply put your javascript in @javascripts/theme.js@ and it will automatically be loaded on each page  (Redmine >= 1.1.0 only).
44
45 8 Bernd Kosmahl
h2. Setting a Favicon
46
47 9 Go MAEDA
Put your favicon in @favicon@ directory and it will automatically be loaded instead of default one on each page. The name of the favicon file can be anything.
48 8 Bernd Kosmahl
49 1 Jean-Philippe Lang
h2. Applying the theme
50
51
Go to "Administration -> Settings" and select your newly created theme in the "Theme" drop-down list. Save your settings.
52
Redmine should now be displayed using your custom theme.
53 2 Jean-Philippe Lang
54 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.
55 10 Go MAEDA
56
h2. Directory structure of themes
57
58
A theme consists of the following files:
59
60
* @favicon/<favicon file>@ (optional): favicon for the theme
61
* @javascripts/theme.js@ (optional): custom JavaScript for the theme
62
* @stylesheets/application.css@ (required): CSS for the theme
63
64
65
<pre>
66
public/
67
  +- themes/
68
       +- <theme name>/
69
            |
70
            +- favicon/
71
            |    +- <favicon file> (e.g. favicon.ico, favicon.png)
72
            |
73
            +- javascripts/
74
            |    +- theme.js
75
            |
76
            +- stylesheets/
77
                 +- application.css
78
</pre>