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

    Maybe it's helpful for someone likewise as well.


    And thanks for the possibility to customize the GUI!

  • 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:


  • 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

    • Offizieller Beitrag

    It uses triton unless you override the default in /etc/default/openmediavault. I assume theme-all is used for both themes.

    omv 7.0.4-2 sandworm | 64 bit | 6.5 proxmox kernel

    plugins :: omvextrasorg 7.0 | kvm 7.0.10 | compose 7.1.2 | k8s 7.0-6 | cputemp 7.0 | mergerfs 7.0.3


    omv-extras.org plugins source code and issue tracker - github


    Please try ctrl-shift-R and read this before posting a question.

    Please put your OMV system details in your signature.
    Please don't PM for support... Too many PMs!

  • 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?

    Intel G4400 - Asrock H170M Pro4S - 8GB ram - Be Quiet Pure Power 11 400 CM - Nanoxia Deep Silence 4 - 6TB Seagate Ironwolf - RAIDZ1 3x10TB WD - OMV 5 - Proxmox Kernel

    • Offizieller Beitrag

    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.

  • I created the file, but it doesn't change anything, am I missing something?

    Intel G4400 - Asrock H170M Pro4S - 8GB ram - Be Quiet Pure Power 11 400 CM - Nanoxia Deep Silence 4 - 6TB Seagate Ironwolf - RAIDZ1 3x10TB WD - OMV 5 - Proxmox Kernel

    • Offizieller Beitrag

    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?

  • After the reboot everything is fine :D really a great work!

    Intel G4400 - Asrock H170M Pro4S - 8GB ram - Be Quiet Pure Power 11 400 CM - Nanoxia Deep Silence 4 - 6TB Seagate Ironwolf - RAIDZ1 3x10TB WD - OMV 5 - Proxmox Kernel

  • I had to reboot, maybe that's was the problem :)
    Thanks for the help, the shrinked interface is so much better!

    Intel G4400 - Asrock H170M Pro4S - 8GB ram - Be Quiet Pure Power 11 400 CM - Nanoxia Deep Silence 4 - 6TB Seagate Ironwolf - RAIDZ1 3x10TB WD - OMV 5 - Proxmox Kernel

  • Best post! Thank you. The new scaling in OMW 3.0 was driving me mad.

    OMV - v6 - Media Server


    Lian-Li PC-Q25 | Asrock E3C226D2I | Intel® Xeon® Processor E3-1230 v3 | Kingston Valueram 8Gb ddr3-1600 with ECC | OS: Adata SP600 32GB SSD * DATA: 4 x WD 2TB RED HDD's (RAID5)

    • Offizieller Beitrag

    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

  • How do you override the default? (I'm at ver 3.0.80)

    There is a new environment variable which can be used to switch between "gray" and "triton" design.

    OMV 3.0.100 (Gray style)

    ASRock Rack C2550D4I C0-stepping - 16GB ECC - 6x WD RED 3TB (ZFS 2x3 Striped RaidZ1) - Fractal Design Node 304 -

    3x WD80EMAZ Snapraid / MergerFS-pool via eSATA - 4-Bay ICYCube MB561U3S-4S with fan-mod

    • Offizieller Beitrag

    How do you override the default?

    As per this post, you need to add the OMV_WEBUI_THEME variable to /etc/default/openmediavault.

    omv 7.0.4-2 sandworm | 64 bit | 6.5 proxmox kernel

    plugins :: omvextrasorg 7.0 | kvm 7.0.10 | compose 7.1.2 | k8s 7.0-6 | cputemp 7.0 | mergerfs 7.0.3


    omv-extras.org plugins source code and issue tracker - github


    Please try ctrl-shift-R and read this before posting a question.

    Please put your OMV system details in your signature.
    Please don't PM for support... Too many PMs!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!