This repository contains a SASS based Redmine theme forked from the vanilla theme (public/stylesheets/application.css).

It supports Redmine V4.

This work is licensed under CC by-nc-na license.

Screenshots (can be older than head)

Changelog

• Fixes for Redmine V4 : removed edit/preview tab since it is now implemented by V4, unfortunately upstream is still using a CSS and did a lot of changes ...
• Disabled header project list added on V3.4

Features

• Project overview : show sub-projects as a vertical list
• Wiki : use tabs for wiki edit form and preview, similar to github

Changes from the original

First steps:

• applications.css was converted to SASS using sass-convert
• and splitted according to sections

Ongoing changes :

• improve readability on a 150 dpi screen (more spaces, larger font size)
• convert icons to FontAwesome
• replace inline values by variables

Design Rules

• update first the most used parts of the Redmine interface
• flat design and contrasted colours (look at material design)
• use custom settings to help user to customise the stylesheet
• only support modern browser
• use the power of SASS
• use jquery to patch the DOM (patched erb would break Redmine for other themes)

Difficulties

• Redmine HTML code is prior to Bootstrap era and its semantic is not well defined. We can patch the DOM when it is mandatory, but it is a last resort.

What cannot be done ?

• style issue status : status-1 status-2 ... classes are related to the Redmine instance setup, Redmine should implement a way to inject CSS from Administration, workaround is to patch at SASS or CSS level.

Redmine Links

• Redmine Theme List
• HowTo create a custom Redmine theme

How to install

Steps to install this theme :

• clone the repository or unzip the archive in the public/theme directory of your Redmine instance,
• copy images directory : cp -r ../../images/ .
• check file permissions
• theme's name is defined by the directory name
• select this theme in Administration / Settings / Display / Theme

How to generate the stylesheet from scratch

It requires a standard web development stack (NodeJS, Bower).

First install NPM packages:

npm install

and Bower packages:

bower install

Run the shell script init.sh to copy images and fonts.

then run Gulp to generate the stylesheet:

gulp

Look at src/sass/redmine/_settings.scss to customize this theme.