NEW THEME: pfsense-dark-orange

cheesyboofs

Hello All,

Just posting a new theme I am working on, more over posting the methods used so that others can feel confident to create their own.

Some points to note;

This theme will never be incorporated into the official build as it 'incorporates' the freebsd logo. While this is allowed the freebsd logo has to be separately displayed alongside, not in conjunction with. Please see the following forum thread, https://forum.pfsense.org/index.php?topic=14282.45 for further info.
This theme is supplied with absolutely no warranty.
Any changes to the supplied files purely affect the cosmetic appearance and represent no additional security risk other than that which was there in the first place before the files were altered.
Backup any files BEFORE you overwrite them.
Tested on version 2.3.4-RELEASE-p1. If you have a different version I'd suggest you make the file changes manually.

I will go on to explain the minor changes I have made but if you are unsure about using the supplied files I will explain how to make the changes yourself to your own files.

Quick Install:

Temporarily enable SSH on your firewall,
Copy the supplied files to the www folder on your firewall at /usr/local/www with WinSCP
Enable theme pfSense-dark-orange

Explanation:
The original pfSense-dark.css file was modified, substituting any references to the Teal colour HEX Code #009688, to Orange HEX Code #FE9929
Some other colours were substituted and are listed here in,
#fe9929 - Orange
#ec7014 - Orange Hover
#993404 - Very Dark Orange
#ffcc00 - Light Orange
#fff9c4 - Light Orange Background
#fee391 - Orange Background
#ffcccc - Light Pink
If you search for these in the css file you will see all the places I have made the change. The size of the logo was also adjusted.

The original traffic-graphs.js file was modified in the following way.

The line .color(d3.scale.category20().range())

was changed to
.color(d3.scale.category10().range())

This was done so that I can modify the colours in the next file without upsetting any existing references to category20 scale.

The colour scales are held in the next file d3.min.js, it is these scales that determine the different colours of all the lines plotted on the traffic graph.

The section we are interested in is,

ao.scale.category10=function(){return ao.scale.ordinal().range(Al)},ao.scale.category20=function(){return ao.scale.ordinal().range(Cl)},ao.scale.category20b=function(){return ao.scale.ordinal().range(zl)},ao.scale.category20c=function(){return ao.scale.ordinal().range(Ll)};var Al=[2062260,16744206,2924588,14034728,9725885,9197131,14907330,8355711,12369186,1556175].map(xn),Cl=[2062260,11454440,16744206,16759672,2924588,10018698,14034728,16750742,9725885,12955861,9197131,12885140,14907330,16234194,8355711,13092807,12369186,14408589,1556175,10410725].map(xn),zl=[3750777,5395619,7040719,10264286,6519097,9216594,11915115,13556636,9202993,12426809,15186514,15190932,8666169,11356490,14049643,15177372,8077683,10834324,13528509,14589654].map(xn),Ll=[3244733,7057110,10406625,13032431,15095053,16616764,16625259,16634018,3253076,7652470,10607003,13101504,7695281,10394312,12369372,14342891,6513507,9868950,12434877,14277081].map

This looks confusing but its really not.
If you look you will see it says scale.category10 (the one we have told traffic-graphs.js to use for our traffic graphs) is using scale.ordinal and the colour range (Al)

Then Al=[[b]2062260,16744206,2924588,14034728,9725885,9197131,14907330,8355711,12369186,1556175].map is our colours left to right in binary!

If we then convert the two colours we want (Orange and white) to binary and substitute the first two numbers in our sequence we get the following,
Al=[[b]16685353,16777215,2924588,14034728,9725885,9197131,14907330,8355711,12369186,1556175].map

Now any traffic graph plotted with range Al will plot with orange as the 1st colour and white as the 2nd. For this reason it will affect all themes selected, unless you change scale.category10 back to scale.category20, so ensure you have backups of the two files.
If you want to try your own colours for traffic graphs you just need to convert the HEX colour you want into binary and paste over the 1st two numbers in this range.

If you update your firewall these modified files will be overwritten so you will need to re-upload them or you may even need to modify the new files to make it work but as you can see there isn't really that much that needs to be changed.

Will tweak it some more over the coming days but just putting it out there as there doesn't seem to be many themes about.

ChEeSyBoOfs
www.zip