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')";
}

Example - changing font size

The following example CSS greatly reduces the font sizes in use in the Firebrick's web pages -

@media screen
    {
    div.main,  div.sidemenu div.menu a
        {
        font-size:x-small
        }
    }

Internal inline CSS - using data URIs

To avoid having to use an external website to store your custom CSS, you can employ a "data:" uri. Be aware that there may be a limit on the length of URIs however. Example:

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

Base64-encoded data

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. Note the presence of the comma after the keyword base64. This is essential in a data URI, even if base64 is not used.

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, line-breaks may be included for readability. These must be removed and the whole string must be entered as a single line.

css-url="data:text/css;charset=UTF-8;base64,QG1lZGlhIHNjcmVlbntka
XYubWFpbixkaXYuc2lkZW1lbnUgZGl2Lm1lbnUgYXtmb250LXNpemU6eC1zbWFsbH19"