Customizing Redmine layout

Posted on 13-03-2017 by Nadir Latif


The user interface of Redmine can be easily customizing using the redmine_custom_css and redmine_custom_js plugins.

To add a background image to the Redmine login page the following Javascript code can be used:

$( document ).ready(function() { 
  if ($("#top-menu").html().indexOf("Sign out")<0) {
    document.querySelector("#content > h2").classList.add("hide");
The above code checks if the "Sign out" link is present in the header. If it is not present, then it adds a CSS class called "custom-background" to the div with id "main". It also does some minor formatting of the layout. The "custom-background" CSS class may be defined with the help of the redmine_custom_css plugin. It can be defined as follows:

.custom-background {
  background: #ffffff url( no-repeat scroll 50px 0 !important;

We can edit the Redmine top menu bar with the help of the redmine_custom_js plugin. For example the following code adds a new menu item to the top menu bar when the user is logged in:

if ($("#top-menu").html().indexOf("
The above code first checks if the list of menu items is present. If it is present, then it creates a new menu item and adds it to the front of the list of menu items