FireBrick Custom CSS

You can use custom css to override the css used on the FireBrick admin pages to create your own look.

Custom colour header by using css

The css file is set in the config in the <http section:

<http css-url="http://example.com/css/myfb.css">

For example, to change the header and footer bar from red to blue, create your myfb.css file as:

/* 
   Custom css to make my FireBrick visibly different to normal ones
*/

div.header {
        background: inherit;

        background-color: #000080;
        background: -moz-linear-gradient(top, #000080 0px, #202080 100%);
        background: -webkit-gradient(linear, top, bottom, color-stop(0%,#000080), color-stop(100%,#202080));
        background: -webkit-linear-gradient(top, #000080 0%,#202080 100%);
        background: -o-linear-gradient(top, #000080 0%,#202080 100%);
        background: -ms-linear-gradient(top, #000080 0%,#202080 100%);
        background: linear-gradient(top, #000080 0%,#202080 100%);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000080', endColorstr='#202080')";
}

div.footer {
        background: inherit;

        background-color: #000080;
        background: -moz-linear-gradient(top, #000080 0px, #202080 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000080), color-stop(100%,#202080));
        background: -webkit-linear-gradient(top, #000080 0%,#202080 100%);
        background: -o-linear-gradient(top, #000080 0%,#202080 100%);
        background: -ms-linear-gradient(top, #000080 0%,#202080 100%);
        background: linear-gradient(top, #000080 0%,#202080 100%);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000080', endColorstr='#202080')";
}

To avoid having to use an external website, you can employ a "data:" uri. Be aware that there may be a limit on the length of URIs however. The following example greatly reduces the font sizes in use in the Firebrick's web pages -

<http css-url="data:text/css,@media screen{div.main,div.sidemenu div.menu a{font-size:x-small}}"  />

You may use base64-encoded data: URIs for safety and complete flexibility, as you will otherwise have to be aware of the risk of your inline CSS containing characters that are either prohibited in data URIs, illegal in quoted strings or in XML attributes. Just some examples are ", %, &, >, newlines and probably various others, but base64-encoding removes this problem completely. If you are using any non-ASCII characters in your CSS, you should use Unicode text and first UTF-8-encode your text into a byte stream, before then base64-encoding those bytes. You must then also declare that your original CSS text was UTF-8 as in the example below. In the following example, a line-break has been added for readability. This must be removed and the whole string entered as a single line.

css-url="data:text/css;charset=UTF-8;base64,QG1lZGlhIHNjcmVlbntkaXYubWFpbixkaXYuc2lkZW1lbnUg
ZGl2Lm1lbnUgYXtmb250LXNpemU6eC1zbWFsbH19"