A Redmine theme is how Redmine looks. Without it, it would be just a plain HTML code. So let's explore what it takes to create a Redmine theme, install it, and change a logo.
Creating a Redmine Theme
If you want to make it simple, it all comes down to having a single CSS file, but it's never that simple is it? The Redmine theme we developed consists of:
- fonts
- images
- javascripts
- stylesheets
The fonts folder contains embedded Open Sans font and Font Awesome icons, the images folder contains some essentials images for the Gantt chart and general UI elements that can't be represented by a single-color Font Awesome icons, the javascripts folder contains a lot of javascript that is enhancing the UI in Abacusmine. And finally, the stylesheets folder contains all the .less files that are compiled into CSS.
How to Install a Redmine Theme
In the case of Abacusmine, all you need to do is unzip the downloaded file, e.g. abacusmine_2_0_3. Inside, you will find a theme folder and 2 files: license & readme. You can read through the files to find out more about our theme, but most importantly, you will need to upload the folder it contains, e.g. abacusmine_2.0.3 to public/themes on your server. Once your theme is uploaded, you will be able to see it in Redmine > Administration > Settings > Display tab. If you don't see the theme in the dropdown, you uploaded the folder that contains both the theme and the readme & license files and your Redmine doesn't see it.
How To Change The Logo
By far, the most popular adjustment is changing the Redmine logo to a company logo. We made this possible. All you need to do is replace the logo files located in your-theme/images/. They are logo-top.png/ and logo.png/. Try keeping relatively similar proportions so you don't need to adjust any CSS file.
Other Redmine Theme Custom Adjustments
In the readme file, you will learn that some adjustments are possible even if you don't know any CSS. They are located in your-theme/javascripts/theme.js at the very top. By using true/false statements, you can define a sub-folder so all links work properly, you can translate Issues & Spent time links that the theme is adding into the top menu, you can translate the "Toggle Description" link, you can collapse the project tree and see all projects & sub-projects, and you can choose to show or hide the logo at the login page.
CSS Adjustments Of Our Redmine Theme
If you know how to write CSS, we prepared an overrides file you can use to alter pretty much anything in our theme. The file is located in your-theme/stylesheets/css/overrides/overrides.css. Feel free to change your company colors, priorities, or spacing.