User comments on ISPs
  >> AAISP


Register (or login) on our website and you will not see this ad.


  Print Thread
Standard User CecilWard
(newbie) Wed 10-Jan-18 19:29:02
Print Post

Anyone got a Firebrick? Would you fancy testing out some CSS


[link to this post]
 
This fragment of Firebrick XML config will do some user-defined CSS to customise the appearance of the FB's control/admin web pages. If you fancy giving it a try you could tell me how you get on and perhaps help with some improvements, alternative ideas or bug reports?

It does two things currently:

1. The part after the }} is an attempt at prettification of the Firebrick's status page, the one at eg http://firebrick/status/ at the top level where it shows the software version, a diagram of the ports, has a reboot option and so on.

2. The first part, from the '@media' to the '}}' inclusive can be deleted as it's meant for an iPad Pro 12.9" (the largest one of the current three). The stupid Safari browser for the ipad Pro makes the text uncomfortably huge for me especially in landscape, but even portrait is not great. That section of code is an override mod which makes the text size more comfortable for me on the ipad Pro 12.9" only and hopefully leaves things as they are for other screen sizes. I haven't looked into what if anything I might want to also tweak in this respect for other screen sizes, by putting in additional similar tests and customisation blocks.

if you would like to test that part (2) text size mod for me and you don't have an ipad Pro, then (i) kill the '@media' test rule by deleting the section from '@media' upto and including the very first '{' and then (ii) reduce the '}}' to a single '}' to match the bracket nesting count. If you do so then you will have my rather smaller text which you might or might not find uncomfortable. You might want instead to have several differing modified versions of that initial screen-size test for different size devicesí individual needs each with a similar duplicate blocks within its own outer { } side by side, all at the top level. Keep everything on one line - in theory you may be supposed to do so. But if it works breaking such 'rules' then it works. If readability becomes a nightmare for you then the alternative is to base-64 encode the CSS text. (See the RFC for data: URI).

If you already have an <http/> element than merge the 'css-url=' attribute below into your existing element.

By the way, the comma at the start, after the 'text/css' is obligatory, careful not to knock it out.

Here is the XML

<services>
<http css-url="data:text/css,@media screen and (min-device-width:1024px) and (max-device-width:1366px){div.main,div.sidemenu div.menu a,div.topmenu,textarea{font-size:x-small}div.footer{padding:2px 10px 1px}div.footer *{vertical-align:top}.sessions td,.sessions td *,.sessions tr{font-size:xx-small}}img[alt~='FB']{display:none}table.ident,table.port-status,table.status,table.software{border:1px solid #9a9;box-shadow:6px 4px 6px #ccc;float:left;margin:0 1.5em 2.5em 0;padding:10px}table.port-status{margin:0 1.5em 0 0;min-width:30em}table.software+*:before{content:'';display:block;clear:both;margin:0}table.software+*+*{font-weight:bold;border:2px #fc0 solid;border-radius:10px;padding:2px 1.5em;text-align:center;width:8em;background-color:#eee;box-shadow:6px 4px 6px #ccc}"/>
</services>
  Print Thread

Jump to