Unofficial OMV Theme Changer tool, css themes and UI manipulation

  • // this is edited to make this topic starter more relevant.


    Hi everyone,


    I always wanted my own managed server, mostly because I moved from my country to the UK and I wanted to create a VPN and Cloud, finally did it with OMV (Freenas was a nightmare) nice clean and simple to use. Now my server is stable ( thank you @TechnoDadLife your videos helped a lot in this process ).


    After seeing one of @TechnoDadLife videos regarding the theme changer it got me curious to experiment with it, but the tool was not updated in the past year so as I like a challenge to keep my mind busy I forked this project (https://github.com/Wolf2000Pi/omv-theme) and started working on it, know my way around a linux workstation but bash is not something I know that well so this will be interesting.


    To install:

    Code
    mkdir /root/omv-theme && cd "$_"; wget --no-check-certificate https://github.com/virgil-av/omv-theme/archive/master.tar.gz; tar -zxvf master.tar.gz && mv omv-theme-master/* ./ && rm -rf master.tar.gz omv-theme-master/; chmod u+x install-omv-theme.sh && ./install-omv-theme.sh

    To uninstall:
    Use the the uninstall option from omv-theme tool


    To Start:
    omv-theme


    To Update:
    omv-theme select the Update option



    If you want to build a CSS theme check the guide on github
    I accept requests and suggestions here on forum I prefer a design, but a description is also ok but I will probably interpret it my own way :))


    If you experience any bug please report it on this thread or on github. All customisation options have a revert option but be advised as interactions between multiple options is not tested, but if your UI goes bad just give me a shout and I will help you fix it.



    Links: https://github.com/virgil-av/omv-theme


    Some screenshots:




    Version 1.5.0 now available

    - you can change header color
    - you can remove header altoghether

  • I know the UI is not that important for the OMV team and why should it be because the primary goal is to have a simple UI that works unlike others, but this is a task for the community to work on not the OMV devs (can't wait for v5).


    Now the thing is I am traversing the code from the www folder but can't find a damn thing when it comes to where the html code is generated. so I am thinking that this is done somewhere in the backend but I am still figuring this one out.


    Will have more time to look over this next week when I am back at work.

    • Offizieller Beitrag

    Now the thing is I am traversing the code from the www folder but can't find a damn thing when it comes to where the html code is generated. so I am thinking that this is done somewhere in the backend but I am still figuring this one out.

    Most of the pages are generated from php and extjs/javascript with css applied

    omv 7.0-32 sandworm | 64 bit | 6.5 proxmox kernel

    plugins :: omvextrasorg 7.0 | kvm 7.0.9 | compose 7.0.9 | 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!

  • Most of the pages are generated from php and extjs/javascript with css applied

    Downloaded the source code to understand how this works, found the place where the index is being generated controlpanelabstract.inc looking over the code, did php years back but now I am full frontend javascript but in general things look similar in most languages.


    What I am looking over is this piece of code:


    Looks like css/theme-custom.css is the only one defined it is ok now makes a bit more sense on how to approach this. Maybe at some point I will be able to build a plugin and integrate it the webui, seen the guide on the forum.

  • What ever the first theme is that I install, it stays that color or switches back to stock theme. I tried on virtual machine and regular server.


    Unless I clear browser data, then it switches to whatever I changed it too.


    So always clear the browser after changing themes.

  • What ever the first theme is that I install, it stays that color or switches back to stock theme. I tried on virtual machine and regular server.


    Unless I clear browser data, then it switches to whatever I changed it too.


    So always clear the browser after changing themes.


    Yes, that is annoying, fixed this issue, if you do an update (omv-theme select update), it will apply the theme without the need to clear the cache just normal refresh.

    • Offizieller Beitrag

    Changing the default background color is certainly helpful for server identification:


    However, it would be great if the hostname could be added to the top Openmediavault banner, in the middle, with Large letters. In any environment, when dealing with multiple servers, having the hostname prominently displayed is a much needed feature. (This is especially true for business servers.)

  • Changing the default background color is certainly helpful for server identification:


    However, it would be great if the hostname could be added to the top Openmediavault banner, in the middle, with Large letters. In any environment, when dealing with multiple servers, having the hostname prominently displayed is a much needed feature. (This is especially true for business servers.)


    I was thinking on working on a new side menu, but I think this one should be an easy one to do ( not sure yet ), will give a shout when I have an update on this.

  • Did a complete overhaul of the omv-theme menu, themes and UI plugins are grouped in their own categories with a different selection menu.


    The main menu:
    1. Themes
    2. UI plugins
    3 About
    4 Update
    5 Uninstall


    <Select> <Exit>


    The themes menu
    1. <<< Back
    2. Default
    3. Blackish
    4. Sour Cherry
    5. Green Peace
    6. Old Gold


    <Select> <Back>


    The ui plugins menu
    1. <<< Back
    2. Custom header



    <Select> <Back>


    The custom header menu
    1. <<< Back
    2. Set domain name
    3. Apply custom header
    4. Revert changes


    <Select> <Back>


    Grouping is so much better.


    Warnings and Info:
    - This has been tested on latest v4.x
    - Bugs may be present
    - Themes apply without removing browser cache
    - Plugins need a clear browser cache to be applied


    For development purposes I have created a 2nd command omv-theme2, this will allow me to work on new stuff without damaging the omv-theme app, so far I was working on the main thing and breaking it most of the times, I included this in the install and uninstall process.



    For the custom header title how to:
    Navigate to the config menu
    a) 2. UI plugins >> 2. Custom header
    b) Set a value for your domain
    c) Apply the custom header
    d) Clear browser cache
    ----- apply a new name
    e) Set a value for your domain
    f) Apply the custom header
    g) Clear browser cache
    ----- restore back to default
    h) revert changes


    How the restore process works:
    - when you first access 2. Custom header option from the menu I backup the Workspace.js file, if the file exists in the backup folder skip this action
    - when you update or uninstall the header will reset back to default
    - when you restore, the original Workspace.js will be copied back to the omv www


    Keep in mind that this may or may not work in OMV v3.x and v2.x, the restore option will repair any damage if it does not work.


    Tagging people that may be interested of this update @TechnoDadLife @flmaxey @Adoby

  • my OMV is the latest version , so I think I can follow your guide;
    I have your theme according to your previous vedio, but when I followed this new vedio, and try to install new theme, but when I open the omv-theme and try to change another theme, I got this error: root@openmediavault:~# omv-theme rm: cannot remove '/var/www/openmediavault/css/theme-custom.*.css': No such file or directory sed: can't read /usr/share/php/openmediavault/controlpanel/controlpanelabstract.inc: No such file or directory



    now I cannot open my OMV webUI, how can I fix it ?

    • Offizieller Beitrag

    I don't want to sound too patronizing. Sorry! I have been in your position a lot of times. Enough so that I've started to make backups before I upgrade or install something new.
    You might be able to figure out how to fix it. Or you might have to reinstall from scratch.

  • my OMV is the latest version , so I think I can follow your guide;
    I have your theme according to your previous vedio, but when I followed this new vedio, and try to install new theme, but when I open the omv-theme and try to change another theme, I got this error: root@openmediavault:~# omv-theme rm: cannot remove '/var/www/openmediavault/css/theme-custom.*.css': No such file or directory sed: can't read /usr/share/php/openmediavault/controlpanel/controlpanelabstract.inc: No such file or directory



    now I cannot open my OMV webUI, how can I fix it ?


    That is a very interesting error, and I am not sure if this is caused by the omv-theme app, I know there is in the code a remove command which removes custom theme file, just a clean-up job but it doesn't delete the controlpanelabstract.inc, could you please do a cd to /var/www/openmediavault/css/ and do a print screen and also cd to /usr/share/php/openmediavault/controlpanel/ and do a print screen, I am very curious to see the contents.


    Now to manually restore the edited file you need to follow the steps below, and than do a clear cache of your browser just in case.

    Code
    cd /usr/share/php/openmediavault/controlpanel/
    
    
    rm controlpanelabstract.inc
    
    
    wget https://raw.githubusercontent.com/openmediavault/openmediavault/master/deb/openmediavault/usr/share/php/openmediavault/controlpanel/controlpanelabstract.inc


    !! update was pushed, now the edited file controlpanelabstract.inc is backed up, if something fails you will be able to restore it from the omv-theme CSS themes menu "restore default" for manual restore use the steps above

    • Offizieller Beitrag

    but I don't have backup image,where can I find the backup file? please

    If you have to rebuild (sorry if you do), take a look at this guide. It will show you how install OMV to a USB boot drive and how to clone the drive. With at least two working copies of your boot drive, available at all times, it's unlikely that you'd ever have to rebuild again.

  • @syrusstk


    That is a very interesting error, and I am not sure if this is caused by the omv-theme app, I know there is in the code a remove command which removes custom theme file, just a clean-up job but it doesn't delete the controlpanelabstract.inc, could you please do a cd to /var/www/openmediavault/css/ and do a print screen and also cd to /usr/share/php/openmediavault/controlpanel/ and do a print screen, I am very curious to see the contents.


    the print is following:
    root@openmediavault:/var/www/openmediavault/css# ls
    defaults.scss materialdesignicons.min.css omv-theme theme-all.min
    Makefile materialdesignicons.min.css.map theme-all.min.css theme-all.scs
    root@openmediavault:/var/www/openmediavault/css#



    root@openmediavault:/var/www/openmediavault/css# ls /usr/share/php/openmediavault/controlpanel
    administration.inc http404.inc login.inc

  • @syrusstk




    That is a very interesting error, and I am not sure if this is caused by the omv-theme app, I know there is in the code a remove command which removes custom theme file, just a clean-up job but it doesn't delete the controlpanelabstract.inc, could you please do a cd to /var/www/openmediavault/css/ and do a print screen and also cd to /usr/share/php/openmediavault/controlpanel/ and do a print screen, I am very curious to see the contents.


    the print is following:
    root@openmediavault:/var/www/openmediavault/css# ls
    defaults.scss materialdesignicons.min.css omv-theme theme-all.min
    Makefile materialdesignicons.min.css.map theme-all.min.css theme-all.scs
    root@openmediavault:/var/www/openmediavault/css#



    root@openmediavault:/var/www/openmediavault/css# ls /usr/share/php/openmediavault/controlpanel
    administration.inc http404.inc login.inc



    thank you very much for your guide, now I can login to the Openmediavault, the issue is fixed.

  • @syrusstk


    the print is following:
    root@openmediavault:/var/www/openmediavault/css# ls
    defaults.scss materialdesignicons.min.css omv-theme theme-all.min
    Makefile materialdesignicons.min.css.map theme-all.min.css theme-all.scs
    root@openmediavault:/var/www/openmediavault/css#



    root@openmediavault:/var/www/openmediavault/css# ls /usr/share/php/openmediavault/controlpanel
    administration.inc http404.inc login.inc



    thank you very much for your guide, now I can login to the Openmediavault, the issue is fixed.

Jetzt mitmachen!

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