Customizing the theme

A common scenario of customization is when users first choose a theme for Redmine and then slightly modify it to make it fit their needs. As a result, such users lose the possibility to upgrade that theme in the future (this is because it henceforth contains their changes, which are going to be overridden during an upgrade).

Suppose you want to customize the default Redmine theme. Instead of modifying its files under the public/stylesheets directory, let's create a new theme based on it. To do this, let's create the mastering-redmine subdirectory for our theme (this will be its name) in the public/themes directory. In the newly created directory, create the stylesheets subdirectory, and the application.css file in it.

Now add the following code to that CSS file:

@import url(../../../stylesheets/application.css);

#top-menu { background: #373c40; }
#header { background-color: #e7692c; }
#main-menu li a:hover { background-color: #d92238; }

Here, the first line...