When I last wrote about Redmine themes I showed how to customize the basic styles by overriding the CSS. Basic themes also support a few other features in addition to CSS.

Images

Most themes will use images as part of the design. This is pretty easy to do because the entire theme is located in the public/ directory which is 100% accessible to the web server.

Using an existing image from Redmine would require you to go up a few directories but since all themes are in the same directory, it’s easy with relative paths. Lets say you wanted to use the package.png image which is located at public/images/package.png, you’d use this in your CSS:

... { background-image: url(../../../images/package.png); }

The three ../ are used to go up from the theme CSS file and into the main public/ directory (remember theme CSS is located in public/themes/theme_name/stylesheets/).

You can also add new images to your theme. Create a new directory called images/ for them in your theme’s main directory and use the url statement again, but this time you only need one ../ because you’re closer to the images.

... { background-image: url(../images/theme-image.png); }

JavaScript

Redmine themes can also include JavaScript, though you are limited in how much you can include. If you create a file in your theme called javascripts/theme.js then Redmine will automatically include that with your theme.

The limitation is that you can’t easily include other JavaScript files without a bit of work. Redmine only includes the theme.js file so you have to make sure all of your code is included there since JavaScript doesn’t have something like CSS’s @import.

You could inline third party code at the top of the file (like jQuery) using a JavaScript minimizer or you could use something like require.js to load additional libraries but this can get complex fast.

I recommend that you only include basic JavaScript in theme.js and create a theme plugin if you need something more.

Conclusion of Basic Redmine Themes

This wraps up all of the features for Redmine’s basic themes. I’m going to write about theme plugins next but before I do that:

Is there a question you have about creating basic themes? Post a comment below and I’ll be happy to answer it.