HowTo create a custom Redmine theme » History » Version 8

« Previous - Version 8/11 (diff) - Next » - Current version
Bernd Kosmahl, 2015-04-24 17:22
Described how to add a favicon to a theme so your shiny corporate favicon does not get overwritten on each Redmine update

HowTo create a custom Redmine theme

Redmine offers basic support for themes. Themes can override stylesheets (application.css) and add some custom javascript.

Creating a new theme

Create a directory in public/themes. The directory name will be used as the theme name.



Create your custom application.css and save it in a subdirectory named stylesheets:


Here is an example of a custom stylesheet that only override a few settings:

/* load the default Redmine stylesheet */
@import url(../../../stylesheets/application.css);

/* add a logo in the header */
#header {
    background: #507AAA url(../images/logo.png) no-repeat 2px;
    padding-left: 86px;

/* move the project menu to the right */
#main-menu { 
    left: auto;
    right: 0px;

This example assume you have an image located at my_theme/images/logo.png.

You can download this sample theme as a starting point for your own theme. Extract it in the public/themes directory.

Adding custom javascript

Simply put your javascript in javascripts/theme.js and it will automatically be loaded on each page (Redmine >= 1.1.0 only).

Setting a Favicon

Simply put your favicon in favicon/a.ico and it will automatically be loaded on each page (Redmine >= 2.5.0 only). For details see also #15689.

Applying the theme

Go to "Administration -> Settings" and select your newly created theme in the "Theme" drop-down list. Save your settings.
Redmine should now be displayed using your custom theme.

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.

sample_theme.tar.gz (5.98 KB) Jean-Philippe Lang, 2007-10-10 19:48

enhanced-buzz-11810-1500289884-13.jpg (98.3 KB) santhni san, 2018-01-09 08:53