Navigation

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

    Widescreen Theme (Tested on 2.4.4 & 2.5.2)

    webGUI
    3
    3
    425
    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.
    • T
      TotallyInnocentTiefling last edited by

      Hello,

      I'm not sure if someone has already done this but I couldn't find one and it seemed easier to do it myself than to continue hunting around for it.

      This is just a css file that when changes the max width on the container to 100% and bumps up the left/right padding, within the min-width: 1200px condition. it imports the default pfSense.css file.

      To add:

      • Login to pfSense Web Interface
      • Go to Diagnostics > Edit File
      • Enter /usr/local/www/css/pfSense-wide.css as the path, click load. Ignore the 'File does not exist or is not a regular file.' error, it doesn't exist yet we're making it.
      • Past the below in to the content box, and hit save.
      /*
       * pfSense-Wide.css
       *
       */
      
      @import url("/css/pfSense.css");
      
      @media (min-width: 1200px) {
          .container {
              width: 100% !important;
              padding-left: 4em;
              padding-right: 4em;
          }
      }
      

      pfsense-addfile.png

      You can also do the same, but with the file path as /usr/local/www/css/pfSense-darkwide.css with the below, the only difference is the path in the @import

      /*
       * pfSense-darkwide.css
       *
       */
      
      @import url("/css/pfSense-dark.css");
      
      @media (min-width: 1200px) {
          .container {
              width: 100% !important;
              padding-left: 4em;
              padding-right: 4em;
          }
      }
      

      You can then change it under System > General Setup, Under the webConfigurator section

      pfsense-changetheme.png

      It should look like the below, once enabled.

      pfsense-webui.png

      F 1 Reply Last reply Reply Quote 5
      • K
        kevin.ruffus last edited by

        @TotallyInnocentTiefling
        Confirmed this works on 2.6 and 22.05.
        Also, I've found that 90% rather than 100% is more aesthetically pleasing to my eyes.
        It leaves a nice margin on the sides, yet utilizes most of the screen.

        1 Reply Last reply Reply Quote 2
        • F
          furom @TotallyInnocentTiefling last edited by

          @totallyinnocenttiefling This is awesome, thank you for sharing! Confirmed to work on 23.01 as well.

          1 Reply Last reply Reply Quote 0
          • First post
            Last post