Welcome to the Tweaking4All community forums!
When participating, please keep the Forum Rules in mind!
Topics for particular software or systems: Start your topic link with the name of the application or system.
For example “MacOS X – Your question“, or “MS Word – Your Tip or Trick“.
Please note that switching to another language when reading a post will not bring you to the same post, in Dutch, as there is no translation for that post!
Just a quick tip in case you're using OPNSense as your firewall application.
I've switched the theme of mine to dark theme, but there were a few colors I didn't like, so I wanted to edit the CSS file to adjust those.
I've used the Vicuna theme as my base, but this works for any theme.
To install a different theme, in this case the Vicuna theme (os-theme-vicuna) go to System - Firmware - Plugins and locate "os-theme-vicuna" and install it.
After installing the new theme, go to System - Settings - General and set the theme to "vicuna" and click Save. You may have to refresh the page to see the new theme.
Next we're going to use SSH to edit our files, to do so we need to enable SSH access. I do this only temporary while working on the CSS file. When done editing I disable SSH again.
Go to System - Settings - Administration and scroll to Secure Shell Server and check Enable Secure Shell and scroll down and click Save.
You can now connect to you firewall with SSH, so lets do just that: connect to OPNSense with SSH.
On MacOS/Linux (change the IP address to the one of your server):
ssh root@192.168.1.1
Your password will be asked and a menu will appear after successful login - select option 8 (Shell).
Next we want to make a copy of an existing theme, for example the Vicuna theme to "mytheme".
I intentionally work with a copy, just in case I screw up, and to easier identify the them I'm tinkering with.
cd /usr/local/opnsense/www/themes/ cp -r vicuna mytheme
In the OPNSense web interface, you can now see your "mytheme" listed (may need to refresh the page: System - Settings - General).
I prefer using nano as my text editor, which can be installed like so (source):
pkg install nano
Next, go to the directory in your theme where you can find the main.css file which holds most of the theme colors and such.
cd /usr/local/opnsense/www/themes/mytheme/build/css nano main.css
Feel free to edit what ever you want. 😊
When testing, do not forget that your browser may be caching the CSS, so a forced refresh may be needed to reflect the changes.
Also note that the colors for the graphs are not controlled (yet) by the theme - so you cannot change these here.
Do no forget: disable SSH access when done 😉
Tips:
Increase height of the "CPU usage" graph in the dashboard:
div#system_information_widget_chart_cpu_usage svg {
height: 140px !important;
}
Change the color or stroke width of the CPU usage line in that graph:
g.nv-group.nv-series-0 {
fill: orange !important;
stroke: orange !important;
stroke-width: 2.5px !important;
}
Increase height of "Traffic Graph" graphs in the Dashboard:
#traffic_graphs-container .chart-container {
height: 268px;
}
Note: to access files (copy to your PC or Mac for example): enable SSH and use either SFTP or a SSHFS utility.
Forklift for MacOS worked great with SFTP. Had to first login with SSH tough to get the fingerprint.