FireBrick Custom CSS: Difference between revisions

From AAISP Support Site
m (Example split off, for greater visibility)
m (→‎Base64-encoded data: line breaks - wording)
Line 64: Line 64:


=== Base64-encoded data ===
=== 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. 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.
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.
<syntaxhighlight>css-url="data:text/css;charset=UTF-8;base64,QG1lZGlhIHNjcmVlbntkaXYubWFpbixkaXYuc2lkZW1lbnUg

ZGl2Lm1lbnUgYXtmb250LXNpemU6eC1zbWFsbH19"
<syntaxhighlight>css-url="data:text/css;charset=UTF-8;base64,QG1lZGlhIHNjcmVlbntka
XYubWFpbixkaXYuc2lkZW1lbnUgZGl2Lm1lbnUgYXtmb250LXNpemU6eC1zbWFsbH19"
</syntaxhighlight>
</syntaxhighlight>
[[Category:FireBrick|Custom]]
[[Category:FireBrick|Custom]]

Revision as of 04:32, 6 August 2017

2700-small.png

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"