HowTo create a custom Redmine theme » History » Version 4
Jean-Philippe Lang, 2007-10-14 22:39
1 | 1 | Jean-Philippe Lang | h1. HowTo create a custom Redmine theme |
---|---|---|---|
2 | |||
3 | As of r818, Redmine offers basic support for themes. |
||
4 | Themes can override stylesheets only (application.css). |
||
5 | |||
6 | h2. Creating a new theme |
||
7 | |||
8 | 4 | 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 | Example: |
||
11 | |||
12 | public/themes/my_theme |
||
13 | |||
14 | 4 | Jean-Philippe Lang | Create your custom @application.css@ and save it in a subdirectory named @stylesheets@: |
15 | 1 | Jean-Philippe Lang | |
16 | public/themes/my_theme/stylesheets/application.css |
||
17 | |||
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 | @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 | /* move the project menu to the right */ |
||
30 | #main-menu { |
||
31 | left: auto; |
||
32 | right: 0px; |
||
33 | } |
||
34 | 1 | Jean-Philippe Lang | </code></pre> |
35 | |||
36 | 2 | Jean-Philippe Lang | This example assume you have an image located at @my_theme/images/logo.png@. |
37 | |||
38 | 3 | Jean-Philippe Lang | You can download this sample theme as a starting point for your own theme. Extract it in the @public/themes@ directory. |
39 | 2 | Jean-Philippe Lang | |
40 | 1 | Jean-Philippe Lang | h2. Applying the theme |
41 | |||
42 | Go to "Administration -> Settings" and select your newly created theme in the "Theme" drop-down list. Save your settings. |
||
43 | Redmine should now be displayed using your custom theme. |
||
44 | 2 | Jean-Philippe Lang | |
45 | _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._ |