Fixing Redmine 4 Themes

     

Redmine 4 was released more than 2 months ago, but many themes, even premium, paid ones, still don’t play nicely with it. Apparently most issues arise from the fact that several themes copy-paste parts from Redmine’s own application.css instead of including it. The latter may not be feasible if the theme changes many aspects of Redmine’s appearance, so it’s understandable though. Nevertheless, if your theme starts behaving oddly after upgrading Redmine to version 4, be sure to check out the tips below.

Table of Contents

Syntax Highlight

One of the great features of code block is language-specific syntax highlighting. This can be done with e.g.

``` sql
SELECT * FROM users;
```

The sql part tells Redmine to render that code block with SQL syntax. If the nice coloring is gone with Redmine 4, the cause is probably the fact that the selectors changed dramatically. Open your public/stylesheets/application.css and find all the .syntaxhl entries. At the time of writing:

.syntaxhl .hll { background-color: #ffffcc }
.syntaxhl  { background: #fafafa; }
.syntaxhl .c { color: #888888 } /* Comment */
.syntaxhl .err { color: #FF0000; background-color: #FFAAAA } /* Error */
.syntaxhl .k { color: #008800; font-weight: bold } /* Keyword */
.syntaxhl .o { color: #333333 } /* Operator */
.syntaxhl .ch { color: #888888 } /* Comment.Hashbang */
.syntaxhl .cm { color: #888888 } /* Comment.Multiline */
.syntaxhl .cp { color: #557799 } /* Comment.Preproc */
.syntaxhl .cpf { color: #888888 } /* Comment.PreprocFile */
.syntaxhl .c1 { color: #888888 } /* Comment.Single */
.syntaxhl .cs { color: #cc0000; font-weight: bold } /* Comment.Special */
.syntaxhl .gd { color: #A00000 } /* Generic.Deleted */
.syntaxhl .ge { font-style: italic } /* Generic.Emph */
.syntaxhl .gr { color: #FF0000 } /* Generic.Error */
.syntaxhl .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.syntaxhl .gi { color: #00A000 } /* Generic.Inserted */
.syntaxhl .go { color: #888888 } /* Generic.Output */
.syntaxhl .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
.syntaxhl .gs { font-weight: bold } /* Generic.Strong */
.syntaxhl .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.syntaxhl .gt { color: #0044DD } /* Generic.Traceback */
.syntaxhl .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.syntaxhl .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.syntaxhl .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.syntaxhl .kp { color: #003388; font-weight: bold } /* Keyword.Pseudo */
.syntaxhl .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.syntaxhl .kt { color: #333399; font-weight: bold } /* Keyword.Type */
.syntaxhl .m { color: #6600EE; font-weight: bold } /* Literal.Number */
.syntaxhl .s { background-color: #fff0f0 } /* Literal.String */
.syntaxhl .na { color: #0000CC } /* Name.Attribute */
.syntaxhl .nb { color: #007020 } /* Name.Builtin */
.syntaxhl .nc { color: #BB0066; font-weight: bold } /* Name.Class */
.syntaxhl .no { color: #003366; font-weight: bold } /* Name.Constant */
.syntaxhl .nd { color: #555555; font-weight: bold } /* Name.Decorator */
.syntaxhl .ni { color: #880000; font-weight: bold } /* Name.Entity */
.syntaxhl .ne { color: #FF0000; font-weight: bold } /* Name.Exception */
.syntaxhl .nf { color: #0066BB; font-weight: bold } /* Name.Function */
.syntaxhl .nl { color: #997700; font-weight: bold } /* Name.Label */
.syntaxhl .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
.syntaxhl .nt { color: #007700 } /* Name.Tag */
.syntaxhl .nv { color: #996633 } /* Name.Variable */
.syntaxhl .ow { color: #000000; font-weight: bold } /* Operator.Word */
.syntaxhl .w { color: #bbbbbb } /* Text.Whitespace */
.syntaxhl .mb { color: #6600EE; font-weight: bold } /* Literal.Number.Bin */
.syntaxhl .mf { color: #6600EE; font-weight: bold } /* Literal.Number.Float */
.syntaxhl .mh { color: #005588; font-weight: bold } /* Literal.Number.Hex */
.syntaxhl .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.syntaxhl .mo { color: #4400EE; font-weight: bold } /* Literal.Number.Oct */
.syntaxhl .sa { background-color: #fff0f0 } /* Literal.String.Affix */
.syntaxhl .sb { background-color: #fff0f0 } /* Literal.String.Backtick */
.syntaxhl .sc { color: #0044DD } /* Literal.String.Char */
.syntaxhl .dl { background-color: #fff0f0 } /* Literal.String.Delimiter */
.syntaxhl .sd { color: #DD4422 } /* Literal.String.Doc */
.syntaxhl .s2 { background-color: #fff0f0 } /* Literal.String.Double */
.syntaxhl .se { color: #666666; font-weight: bold; background-color: #fff0f0 } /* Literal.String.Escape */
.syntaxhl .sh { background-color: #fff0f0 } /* Literal.String.Heredoc */
.syntaxhl .si { background-color: #eeeeee } /* Literal.String.Interpol */
.syntaxhl .sx { color: #DD2200; background-color: #fff0f0 } /* Literal.String.Other */
.syntaxhl .sr { color: #000000; background-color: #fff0ff } /* Literal.String.Regex */
.syntaxhl .s1 { background-color: #fff0f0 } /* Literal.String.Single */
.syntaxhl .ss { color: #AA6600 } /* Literal.String.Symbol */
.syntaxhl .bp { color: #007020 } /* Name.Builtin.Pseudo */
.syntaxhl .fm { color: #0066BB; font-weight: bold } /* Name.Function.Magic */
.syntaxhl .vc { color: #336699 } /* Name.Variable.Class */
.syntaxhl .vg { color: #dd7700; font-weight: bold } /* Name.Variable.Global */
.syntaxhl .vi { color: #3333BB } /* Name.Variable.Instance */
.syntaxhl .vm { color: #996633 } /* Name.Variable.Magic */
.syntaxhl .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */

Add these to your theme’s application.css, or if they provide some means to add your own code (e.g. override.css, customize.css, etc.), use that one. Syntax highlight should be back to normal.

Anchor Highlight

Redmine utilizes anchor links on various pages, but most notably on Wiki pages and with issue notes. E.g. when you click on an entry in the Wiki ToC, it jumps to the corresponding heading. When you receive an email notification about an issue update, it opens the ticket scrolled down to the latest change.

One of the fancy new features of Redmine 4 is highlighting the item you’re navigating to ([1], [2]). The relevant code is this:

#history div:target h4, div.wiki a:target + h1, div.wiki a:target + h2, div.wiki a:target + h3, div.wiki a:target + h4, div.wiki a:target + h5, div.wiki a:target + h6 {
    background-color:#DDEEFF;
}

I actually took the liberty of merging 2 blocks into one. In Redmine’s public/stylesheets/application.css the #history and div.wiki parts are listed separately, but since they have the same exact formatting, it’s pointless to add them separately.