Shrink OMV Gui

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • Shrink OMV Gui

      Hi all,

      After the newest change of the OMV Gui, everything looked a little bit too big for me as I don't like "wasted" space on my screen (see also this Pull Request). There's a reason why I have a high screen resolution and it is not to fill it with white but to display information :) So I created a theme-custom.css which I'd like to share with you. Basically I just decreased paddings and some other stuff. As I'm not a CSS specialist I don't know whether everything makes sense, I used Chrome to determine to parameters and then changed it. And some proportions might also not be perfect, but it's fine for me.

      Copy it to /var/www/openmediavault/css/theme-custom.css

      CSS Source Code: theme-custom.css

      1. .x-grid-cell-inner {
      2. padding-top: 2px;
      3. padding-bottom: 2px;
      4. }
      5. .x-panel-header-default-horizontal.x-header-noborder {
      6. padding: 6px 16px 6px 16px;
      7. }
      8. .x-form-item-label-default {
      9. padding-top: 0px;
      10. vertical-align: middle;
      11. }
      12. .x-column-header-inner {
      13. padding: 2px 10px 2px;
      14. }
      15. .style {
      16. height: 24px;
      17. }
      18. .x-window-header-default-top {
      19. padding: 2px 14px 2px 14px;
      20. }
      21. .x-grid-item {
      22. font: 400 13px/15px 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
      23. }
      24. .x-tab-default-top {
      25. padding: 2px 10px 2px 10px;
      26. }
      27. .x-btn-default-toolbar-small {
      28. padding: 3px 7px 3px 7px;
      29. }
      30. .x-panel-header-default-horizontal {
      31. padding: 8px 15px 7px;
      32. }
      33. #header {
      34. height: 60px;
      35. }
      36. #headerlogo {
      37. margin-top: 10px;
      38. }
      39. .x-fieldset .x-fieldset-header {
      40. padding: 2px 5px 2px 5px;
      41. }
      42. element.style {
      43. padding: 6px 5px 0px 5px;
      44. }
      45. /* Uncomment the following section if you would like to hide the logo */
      46. /*
      47. #header {
      48. display: none;
      49. }
      50. */
      Display All
      Maybe it's helpful for someone likewise as well.

      And thanks for the possibility to customize the GUI!

      The post was edited 2 times, last by sparx82 ().

    • Thanks, that is awesome.

      The font weight of .x-grid-item should be 400 instead of 300.

      I also add this to remove the OMV banner, which takes up too much space, and puts the OMV logo in the in the blank space above the tree menu instead:

      Source Code

      1. div#header {
      2. display: none;
      3. }
      4. .x-workspace-node-tree .x-panel-header-default {
      5. border: 0px;
      6. background-color: #98b7cf;
      7. }
      8. #workspace-node-tree-1019_header-title-textEl {
      9. background: url(/images/header_logo.svg), none;
      10. background-size: 100% 100%;
      11. background-repeat: no-repeat;
      12. background-color: #98b7cf;
      13. background-position: center left;
      14. }
      15. #tool-1064-toolEl {
      16. background-color: #98b7cf;
      17. }
      Display All

      The post was edited 1 time, last by Nibb31 ().

    • sparx82 wrote:

      So I created a theme-custom.css which I'd like to share with you. Maybe it's helpful for someone likewise as well.

      Nibb31 wrote:

      I also add this to remove the OMV banner, which takes up too much space, and puts the OMV logo in the in the blank space above the tree menu instead:
      I added both. You guys are awesome!

      If I had skills like that,, well,,, I wouldn't be a NOOB!
      Good backup takes the "drama" out of computing
      ____________________________________
      OMV 3.0.81 Erasmus
      ThinkServer TS140, 12GB ECC /
      32GB USB3.0 / 4TB SG / 1TB WD

      OMV 3.0.81 Erasmus - Rsync'ed Backup Server
      R-PI 2 $29 / 16GB SD Card $8 / Real Time Clock $1.86
      4TB WD My Passport $119
    • I am about to test this out, and just wanted to know how OMV knows which theme to use? I see there are 3 different themes already there. How does it pick? And/or how can I try one of the others?

      -rw-rw-r-- 1 openmediavault-webgui openmediavault-webgui 17K May 11 18:36 theme-all.css
      -rw-rw-r-- 1 openmediavault-webgui openmediavault-webgui 5.7K May 11 18:36 theme-gray.css
      -rw-rw-r-- 1 openmediavault-webgui openmediavault-webgui 8.1K May 11 18:36 theme-triton.css
    • It uses triton unless you override the default in /etc/default/openmediavault. I assume theme-all is used for both themes.
      omv 4.0.5 arrakis | 64 bit | 4.12 backports kernel | omvextrasorg 4.0.2
      omv-extras.org plugins source code and issue tracker - github.com/OpenMediaVault-Plugin-Developers

      Please don't PM for support... Too many PMs!
    • Blabla wrote:

      Wow this skin is great! I agree that there is too much space wasted on the new skin :(

      I have only a question: how can I change it?
      Read the first to posts in this thread closely. It's a copy and paste operation.
      Good backup takes the "drama" out of computing
      ____________________________________
      OMV 3.0.81 Erasmus
      ThinkServer TS140, 12GB ECC /
      32GB USB3.0 / 4TB SG / 1TB WD

      OMV 3.0.81 Erasmus - Rsync'ed Backup Server
      R-PI 2 $29 / 16GB SD Card $8 / Real Time Clock $1.86
      4TB WD My Passport $119
    • Blabla wrote:

      I created the file, but it doesn't change anything, am I missing something?
      Maybe you are missing something. Looking into it...

      I have 2 versions of OMV.

      In 3.0.68 the only file that exists in the folder /var/www/openmediavault/css is "omv.css" I didn't modifiy this file because, without the update, the page style hasn't changed yet.
      (The style change was part of an upgrade after 3.0.68.)

      In version 3.0.76 - the file I modified is /var/www/openmediavault/css/theme-custom.css I wasn't necessary to create this file. It was already there with three other theme files. I modified theme-custom.css with a couple of careful cut and pastes, using the code at the top of this thread.


      From the change log, it appears that custom web themes (theme-custom.css) was added as of 3.0.75

      Perhaps you haven't upgraded to 3.0.75 yet?
      Good backup takes the "drama" out of computing
      ____________________________________
      OMV 3.0.81 Erasmus
      ThinkServer TS140, 12GB ECC /
      32GB USB3.0 / 4TB SG / 1TB WD

      OMV 3.0.81 Erasmus - Rsync'ed Backup Server
      R-PI 2 $29 / 16GB SD Card $8 / Real Time Clock $1.86
      4TB WD My Passport $119
    • ryecoaaron wrote:

      It uses triton unless you override the default in /etc/default/openmediavault. I assume theme-all is used for both themes.
      How do you override the default? (I'm at ver 3.0.80)

      I looked at /etc/default/openmediavault and, as it seems, there's nothing in the config file that looks like a path to /var/www/openmediavault/css or a file name of theme-triton.css


      Thanks
      Good backup takes the "drama" out of computing
      ____________________________________
      OMV 3.0.81 Erasmus
      ThinkServer TS140, 12GB ECC /
      32GB USB3.0 / 4TB SG / 1TB WD

      OMV 3.0.81 Erasmus - Rsync'ed Backup Server
      R-PI 2 $29 / 16GB SD Card $8 / Real Time Clock $1.86
      4TB WD My Passport $119
    • Hi
      Get to copy
      github.com/openmediavault/open…ar/www/openmediavault/css

      Gesendet von meinem SM-G935F mit Tapatalk
      forum-bpi.de Visit on and help us, The Germany Forum :thumbsup:
      github.com/Wolf2000Pi
      Banana Pi /Armbian 3.4.109 / Openmediavault 2.x
      Banana Pi /Armbian 4.11.5-sunxi / Openmediavault 3.0.xx (Test)
      Dell Inspiron One 2205 | Openmediavault 3.0.xx / Kernel 4.7 (Test)
    • flmaxey wrote:

      How do you override the default?
      As per this post, you need to add the OMV_WEBUI_THEME variable to /etc/default/openmediavault.
      omv 4.0.5 arrakis | 64 bit | 4.12 backports kernel | omvextrasorg 4.0.2
      omv-extras.org plugins source code and issue tracker - github.com/OpenMediaVault-Plugin-Developers

      Please don't PM for support... Too many PMs!