Pak Jiddat - Innovative Software Services

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

Url: http://www.redmine.org/plugins/redmine_custom_css

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.getElementById('main').classList.add("custom-background");
    document.querySelector("#content > h2").classList.add("hide");
    document.querySelector(".splitcontentleft").classList.add("float-right");    
  }
});
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(https://example.com/background.jpg) 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. Adding event listeners using JavaScript
  2. Using Prefetch, Preload and Preconnect for speeding page load times
  3. Get current unix timestamp using Javascript
  4. Fetching parent node element of a HTML node
  5. Adding option to html selectbox using Javascript
  6. Changing CSS styles using Javascript
  7. Fetching html elements using CSS class names
  8. Fetching html elements using CSS selectors with Javascript
  9. Allowing Cross Origin Requests using htaccess
  10. NodeJs permission denied error
  11. Passing parameters to Jquery event handler function
  12. W3C.Data
  13. Making cross domain Ajax calls using JSONP
  14. Use of Preflight request in HTTP Cross Origin Resourse Sharing (CORS)
  15. Get the time using JavaScript
  16. Convert javascript object to json string
  17. Using cookies in Javascript
  18. Javascript JSON guide
  19. Javascript date object
  20. Get co-ordinates of element relative to document using Jquery
  21. Base64 Encoding of utf-8 encoded string using Javascript
  22. Using clearTimeout and onmouseenter, onemouseleave events
  23. Setting CSS styles using JQuery
  24. Replacing html element using replaceWith jquery function
  25. Using keydown event handler for detecting enter key press
  26. Replacing a string using Javascript replace function
  27. Iterate throught Javascript object properties
  28. Select contents on text field