Netgate Discussion Forum
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Search
    • Register
    • Login

    Web GUI colors change

    Scheduled Pinned Locked Moved webGUI
    6 Posts 3 Posters 3.7k Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      Supermule Banned
      last edited by

      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!
      bar_blue.gif
      bar_left.gif
      hostname.png
      hostname.png_thumb
      header.png
      header.png_thumb

      1 Reply Last reply Reply Quote 0
      • C
        chadc01e
        last edited by

        @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.

        1 Reply Last reply Reply Quote 0
        • C
          chadc01e
          last edited by

          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...

          1 Reply Last reply Reply Quote 0
          • S
            Supermule Banned
            last edited by

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

            1 Reply Last reply Reply Quote 0
            • C
              chadc01e
              last edited by

              @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.

              1 Reply Last reply Reply Quote 0
              • L
                lburr
                last edited by 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.

                sys-info.JPG

                1 Reply Last reply Reply Quote 1
                • First post
                  Last post
                Copyright 2025 Rubicon Communications LLC (Netgate). All rights reserved.