Black is the new black... Changing colours

While the default dark black/grey interface of the B2 is smart and uniform sometimes one just need a small change.

Thankfully with the B2, the web interface is completely styled with CSS or Cascading Style Sheets. 

This allows for fairly easy changes to the look of the interface without interfering with the underlying code. That said, as always, make a copy of any file you edit on the B2, just in case. I also am going to assume you have some css or html knowledge. Note - performing an upgrade on the B2 will reset everything with regards css back to the default Black and grey.

The B2 uses a CSS framework called Bootstrap. Frameworks like this allows quick deployments of and nice uniformed style.  It also allow us to edit it.  The Bootstrap CSS files can be found

/var/www/css

And when viewed, due to the "compressed" nature look like just one very very long line of code.

Happly due to the fact we know the B2 uses a framework, we can goto the framework website and have look how it works.  Even better in the case of the Bootstrap framework as it even has a customize-able form that will give you all the required files (we only need one -  bootstrap.min.css ):

Just go the the form and change any thing you wish - however , in this example, the default bootstrap CSS is a nice and simple white, so we will not change anything and head to the base of the page and click download:

The downloaded zip need to be unzipped and traverse to the containing css folder.  In this example we only need one file the bootstrap.min.css.  You need to then upload this to your B2 (the /var/www/css folder) - my example below using the scp command:


iMac:css cm7$ pwd
/Users/cm7/Downloads/bootstrap-3/css
iMac:css cm7$ ls
bootstrap-theme.css    bootstrap-theme.min.css    bootstrap.css        bootstrap.min.css
iMac:css cm7$ scp bootstrap.min.css b2:/var/www/css
bootstrap.min.css                                                             100%  119KB 119.4KB/s   00:00   
iMac:css cm7$


Now when I reload the B2 webpage or my "webapp" I  see the changes:

This applies not only to a mobile device, but any view using a browser, as seem from my desktop with the css edited from being all white to adding a bit more grey:

Of course using the Bootstrap framework customise webpage you could create any number of variations. But that's for another day.

Have fun.