Web GUI colors change

[Supermule]

If you want to change colors on the theme do this.

Go to /usr/local/www/themes/pfsense_ng_fs/ of you have the widescreen theme installed. I have so this will do.

Download header.png and hostname.png

Do a color replacement in Photoshop using whatever color you like.

Upload to the folder to replace existing files.

Download all.css and find .widgetheader

.widgetheader {
border-right: 1px solid #999999;
font-size: 11px;
background-color: #004F87;
padding-right: 6px;
padding-left: 6px;
color: #FFFFFF;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;

Change #990000; to whatever colorcode you like (in this case its 004F87).

If you want to change all submenus and subpages, search and replace all #990000 with the color you like. Save and upload the file.

Done!

[chadc01e]

@Supermule:

If you want to change colors on the theme do this.

Go to /usr/local/www/themes/pfsense_ng_fs/ of you have the widescreen theme installed. I have so this will do.

Download header.png and hostname.png

Do a color replacement in Photoshop using whatever color you like.

Upload to the folder to replace existing files.

Download all.css and find .widgetheader

.widgetheader {
border-right: 1px solid #999999;
font-size: 11px;
background-color: #004F87;
padding-right: 6px;
padding-left: 6px;
color: #FFFFFF;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;

Change #990000; to whatever colorcode you like (in this case its 004F87).

If you want to change all submenus and subpages, search and replace all #990000 with the color you like. Save and upload the file.

Done!

Do you happen to know the location of the file that has control of the color of the bar graphs in the system information widget? (The ones for items like memory usage, temperature, disk and swap usage, etc.)

I've managed to get everything else changed (unfortunately before I found your guide lolz,) but I just can't for the life of me locate that last thing.

[chadc01e]

So due to lack of response let me post this for other newbs who are interested…

/usr/local/www/javascript/jquery/jquery-ui-1.11.1.css

Search for #990000

Replace as needed... Reboot pfsense or reload widget...

[Supermule]

Thanks man, currently working in Qanaag in Greenland for the government so not on the WWW so often.

[chadc01e]

@Supermule:

Thanks man, currently working in Qanaag in Greenland for the government so not on the WWW so often.

All good, I can understand how things can move kinda slow on forums. I'm more angry at myself for not finding the little bugger sooner. I must have gone through that folder at least twice and walked right past the file.

[lburr]

The file path that @chadc01e provided no longer exists on the current version, so I thought I'd update the topic for anyone interested in making this change.

As of version 2.4.4 p3, the bar graphs for the System Information widget on the dashboard (memory usage, temperature, disk & swap usage, etc.) are red regardless of the value.

Go to System > General Setup and in the webConfigurator section it will show your theme, our system uses pfSense.

Go to Diagnostics > Edit File and in the /usr/local/www/css/ folder open your theme (pfSense.css). Use the browser search feature (Ctrl +F) for ".progress-bar" and edit this section:

.progress-bar {
    background-color: #B71C1C;
}

I changed the color from #B71C1C (red) to #4CAF50 (green) that matches the Thermal Sensors, Interfaces, and other dashboard widgets. When finished, click "Save" and reload your dashboard.