Skip to content

Redmine theme forked from the vanilla Redmine theme and converted to SASS

Notifications You must be signed in to change notification settings

FabriceSalvaire/redmine-improved-theme

Repository files navigation

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)

Overview Roadmap Issues Issue Wiki

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

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.

About

Redmine theme forked from the vanilla Redmine theme and converted to SASS

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published