Pak Jiddat

Read: In the name of thy Lord Who createth, Createth man from a clot. Read: And thy Lord is the Most Bounteous, Who teacheth by the pen, Teacheth man that which he knew not. Nay, but verily man is rebellious That he thinketh himself independent!. Lo! unto thy Lord is the return. (Sura Alalaq 96:8)

Customizing Redmine layout

Created On: 13 Mar, 2017: 12:20:24 - Tags : javascript | css3


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("
    ")>0) { var updated_list_items = "
  • Company Name
  • "; updated_list_items = updated_list_items + ($("#top-menu > ul").html()); $("#top-menu > ul").html(updated_list_items); }
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

Related Articles

  1. Using await and async with Promises
  2. ES6 brings new features to JavaScript
  3. Using Web Components in JavaScript
  4. Using JavaScript promises
  5. JavaScript arrow functions and the let keyword
  6. Using classes and objects in JavaScript
  7. Using Generators in JavaScript
  8. Difference between ECMAScript, TypeScript and JavaScript
  9. Adding event listeners using JavaScript
  10. Using Prefetch, Preload and Preconnect for speeding page load times
  11. Get current unix timestamp using Javascript
  12. Fetching parent node element of a HTML node
  13. Adding option to html selectbox using Javascript
  14. Fetching html elements using CSS class names
  15. Fetching html elements using CSS selectors with Javascript
  16. Changing CSS styles using Javascript
  17. Allowing Cross Origin Requests using htaccess
  18. NodeJs permission denied error
  19. Passing parameters to Jquery event handler function
  20. W3C.Data
  21. Making cross domain Ajax calls using JSONP
  22. Use of Preflight request in HTTP Cross Origin Resourse Sharing (CORS)
  23. Javascript JSON guide
  24. Using cookies in Javascript
  25. Convert javascript object to json string
  26. Javascript date object
  27. Get the time using JavaScript
  28. Base64 Encoding of utf-8 encoded string using Javascript
  29. Setting CSS styles using JQuery
  30. Replacing html element using replaceWith jquery function
  31. Using keydown event handler for detecting enter key press
  32. Replacing a string using Javascript replace function
  33. Using clearTimeout and onmouseenter, onemouseleave events
  34. Get co-ordinates of element relative to document using Jquery
  35. Iterate throught Javascript object properties
  36. Select contents on text field