HowTo create a custom Redmine theme » History » Version 3
  Jean-Philippe Lang, 2007-10-10 20:28 
  Typo
| 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 | Create a directory in public/themes. The directory name will be used as the theme name. | ||
| 9 | |||
| 10 | Example: | ||
| 11 | |||
| 12 | public/themes/my_theme | ||
| 13 | |||
| 14 | Create your custom @application.css@ and put it in a subdirectory names @stylesheets@: | ||
| 15 | |||
| 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._ |