Customize the appearance of Redmine using CSS

If you would like to change the look of Redmine, you can also use existing themes (Redmine Themes) or you use CSS to adapt Redmine to your own needs optically.
The plugin is called "Custom CSS" and can be easily installed with one click over the Customer Center (install Custom CSS Plugin).
Once the plug-in is installed in Redmine, you can reach it via the Redmine Administration and in the Plugins section.

CSS definitions can now be entered into the Custom CSS text field. It is not necessary to embed with HTML CSS tags!
Here is an example of how to replace the Redmine logo in the A1 Theme with your own picture.

#header > h1 {
  background: url(https://cdn.saas-secure.com/images/star-on-big.png) no-repeat 10px 8px;
  padding-left: 40px;
}
    

As you can see it is quite simple. The prerequisite is, of course, that you know with CSS.
With a little tweak, Javascript code can be smuggled via the input field.

#header > h1 {
    background: url(https://cdn.saas-secure.com/images/star-on-big.png) no-repeat 10px 8px;
    padding-left: 40px;
}
</style>

<script type="text/javascript">
    alert('hello world');
</script>
<style type="text/css">
    

Now you are welcomed with each page call with the message "hello world".
Importing external CSS files is, of course, also possible. This saves the work of the customization in the text field and can create the CSS with its favorite editor.

/* example */
@import url('https://storage.googleapis.com/code.getmdl.io/1.3.0/material.indigo-blue.min.css')

With the examples, we have only made minor changes, but they show the possibilities for optical matching. Also the trick with the javascript code helps surely one or the other to design Redmine even more according to his own ideas.