Unofficial OMV Theme Changer tool, css themes and UI manipulation

    • OMV 4.x
    • A new update was released (v1.3.0)

      New features:
      - add a custom logo to header

      Updates and fixes:
      - always backing up original file before edit
      - when changing themes and adding plugins sed is targeting pattern and not lines, this should make it compatible with previous versions and future proof
      - uninstall also closes the app
      - updated various leftover text in menu (when copy pasting from the internet the examples :)) )
      - every customisation action has a revert option

      Please keep in mind:
      - javascript UI plugins require a browser clear cache


      Images
      • 68747470733a2f2f707265766965772e6962622e636f2f6652374231392f53656c656374696f6e5f3031342e706e67.png

        131.64 kB, 640×337, viewed 66 times
    • syrusstk wrote:

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

      /----/

      Tagging people that may be interested of this update @TechnoDadLife @flmaxey @Adoby
      It works as advertised. :)
      Being able to label a server in the Top Banner is really useful - a designation greatly reduces the chance of making a mistake.

      Thanks! :thumbup:

      (I hope you'll maintain this mod' on Git Hub for awhile.)

      Video Guides :!: New User Guide :!: Docker Guides :!: Pi-hole in Docker
      Good backup takes the "drama" out of computing.
      ____________________________________
      Primary: OMV 3.0.99, ThinkServer TS140, 12GB ECC, 32GB USB boot, 4TB+4TB zmirror, 3TB client backup.
      Backup: OMV 4.1.13, Intel Server SC5650HCBRP, 6GB ECC, 16GB USB boot, UnionFS+SNAPRAID
      2nd Backup: OMV 4.1.9, Acer RC-111, 4GB, 32GB USB boot, 3TB+3TB zmirror, 4TB Rsync'ed disk

      The post was edited 1 time, last by flmaxey: edit ().

    • Well due to work I needed to pause the work on this, but I finally got some time to work on something, so you can just hit update if you have the previous version, but a clean install would be advised, see updated install command below

      What changed for the user:

      - Added the possibility to only change the header background colour be it a hex colour or a colour name can be just red or #ff0000 which is the same thing
      - Future release will have a background image
      - the command to install has changed you don't need to remember to install git, and if you have it it will just skip that step.

      Source Code

      1. apt-get install git -y; cd ~ ; git clone https://github.com/virgil-av/omv-theme.git && cd omv-theme && chmod +x install-omv-theme.sh && ./install-omv-theme.sh
      What changed in the app:
      - everything was in one file, I needed to break things in smaller chunks of logic as it wil be hard to maintain when I add more functionality.
      - updater was moved into a function and not as an executable as before

      Be my guest and review the code github.com/virgil-av/omv-theme open for suggestions
    • New omv-theme changer based on Wolf2000Pi/omv-theme

      WOW!!! Openmediavault gets a completely new face. Fantastic!
      ---------------------------------------------------------------------------------------------------------------
      frontend software - tvos | android tv | libreelec | win10 | kodi krypton
      frontend hardware - appletv 4k | nvidia shield tv | odroid c2 | yamaha rx-a1020 | quadral chromium style 5.1 | samsung le40-a789r2
      -------------------------------------------
      backend software - debian | openmediavault | latest backport kernel | zfs raid-z2 | docker | emby | unifi | vdr | tvheadend | fhem
      backend hardware - supermicro x11ssh-ctf | xeon E3-1240L-v5 | 64gb ecc | 8x10tb wd red | digital devices max s8
      ---------------------------------------------------------------------------------------------------------------------------------------
    • hoppel118 wrote:

      WOW!!! Openmediavault gets a completely new face. Fantastic!
      Yeah, some of the high contrast themes are great, especially for the vision impaired and, umm (to a lesser extent), for those of us who should be wearing glasses.... :)

      Video Guides :!: New User Guide :!: Docker Guides :!: Pi-hole in Docker
      Good backup takes the "drama" out of computing.
      ____________________________________
      Primary: OMV 3.0.99, ThinkServer TS140, 12GB ECC, 32GB USB boot, 4TB+4TB zmirror, 3TB client backup.
      Backup: OMV 4.1.13, Intel Server SC5650HCBRP, 6GB ECC, 16GB USB boot, UnionFS+SNAPRAID
      2nd Backup: OMV 4.1.9, Acer RC-111, 4GB, 32GB USB boot, 3TB+3TB zmirror, 4TB Rsync'ed disk
    • Unofficial OMV Theme Changer tool, css themes and UI manipulation

      Amazing!

      syrusstk wrote:

      If you guys have ideas for what you want to see next give me a shout in this topic.


      Maybe you have ideas for your own dark mode style.

      Regards Hoppel
      ---------------------------------------------------------------------------------------------------------------
      frontend software - tvos | android tv | libreelec | win10 | kodi krypton
      frontend hardware - appletv 4k | nvidia shield tv | odroid c2 | yamaha rx-a1020 | quadral chromium style 5.1 | samsung le40-a789r2
      -------------------------------------------
      backend software - debian | openmediavault | latest backport kernel | zfs raid-z2 | docker | emby | unifi | vdr | tvheadend | fhem
      backend hardware - supermicro x11ssh-ctf | xeon E3-1240L-v5 | 64gb ecc | 8x10tb wd red | digital devices max s8
      ---------------------------------------------------------------------------------------------------------------------------------------
    • syrusstk wrote:

      Back from holidays and with the worst stomach bug that does not give me peace for the past 6 days but doing some updates on this tool to keep me busy.

      This release includes the option to set a header background image
      Do you plan on maintaining the theme changer for awhile? We'll say a year or two - or even if you abandon it, maybe leave it on Git-hub?)

      I'll be working on the user guide soon and it seems like a good add-on to include in an OMV "Hacks" section for intermediate users.

      Video Guides :!: New User Guide :!: Docker Guides :!: Pi-hole in Docker
      Good backup takes the "drama" out of computing.
      ____________________________________
      Primary: OMV 3.0.99, ThinkServer TS140, 12GB ECC, 32GB USB boot, 4TB+4TB zmirror, 3TB client backup.
      Backup: OMV 4.1.13, Intel Server SC5650HCBRP, 6GB ECC, 16GB USB boot, UnionFS+SNAPRAID
      2nd Backup: OMV 4.1.9, Acer RC-111, 4GB, 32GB USB boot, 3TB+3TB zmirror, 4TB Rsync'ed disk
    • flmaxey wrote:

      syrusstk wrote:

      Back from holidays and with the worst stomach bug that does not give me peace for the past 6 days but doing some updates on this tool to keep me busy.

      This release includes the option to set a header background image
      Do you plan on maintaining the theme changer for awhile? We'll say a year or two - or even if you abandon it, maybe leave it on Git-hub?)
      I'll be working on the user guide soon and it seems like a good add-on to include in an OMV "Hacks" section for intermediate users.

      Can't say for sure for how much time I will maintain it, can be months can be years, but most probably as long as I use OMV I will maintain this.
      When OMV 5 gets launched If not compatible with 4.x or lower I will probably create a new app for that as I will probably migrate my server to it.
      I still have plans for someday integrating it as a omv plugin but I do not have time to learn and make an UI deb package although I would want to (if there there is a video tutorial with a simple example I think I would be able to understand how it works faster).

      I would actually love to revamp more on the UI (I am an actual frontend javascript developer) but the framework used for UI is very old and not that flexible unless you worked with it for a while, I tried to reverse engineer the menu and I failed miserably :)) the way it is generated it breaks all modern good practices rules, I do applaud the OMV team for their work but man it is time you guys change this to a backend API and a frontend interface this way you guys can work on the backend with no issues and have the fronend build on any other fronend framework (Angular, VueJS even the garbage ReactJS ).

      In short yes I will maintain this or a while, I would like to hear Ideas on what to work on next, will work on a black/white theme as requested, don't think the menu will suffer any UI changes in the near future.

      Cheers for wanting to make a user guide, I know this takes a ton of time, thank you for your interest.
    • @flmaxey as a mention the github repo will be there as long as my account or github is still there, even if I am not maintaining it any more.


      NEW RELEASE

      - added a new theme, my version of black theme,
      *if you notice something please screen cap it and post it here so I can fix it.
      - under the hood: improved code for theme changing

      This can be combine with other css plugins for more flexibility, do not forget to clear the browser cache when using the plugins

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

    • HOTFIX

      Bug fix
      - in the css plugins if you apply an option multiple time without reverting first, it created multiple instances of the same css code in the theme file.

      If you used this options you can check the css by pasting in the browser YOUR_OMV_URL_OR_IP/css/theme-triton.min.css

      If you see same code repeated multiple times eg. like below:

      Source Code

      1. /*custom-background-image-start*/
      2. div#header{
      3. background-image: url(../images/custom-background.png) !important;
      4. background-position: center center !important;
      5. background-size: cover !important;
      6. height: 80px;
      7. background-repeat: no-repeat !important;
      8. width: 100%;
      9. }
      10. /*custom-background-image-end*/
      11. /*custom-background-image-start*/
      12. div#header{
      13. background-image: url(../images/custom-background.png) !important;
      14. background-position: center center !important;
      15. background-size: cover !important;
      16. height: 80px;
      17. background-repeat: no-repeat !important;
      18. width: 100%;
      19. }
      20. /*custom-background-image-end*/
      21. /*custom-background-image-start*/
      22. div#header{
      23. background-image: url(../images/custom-background.png) !important;
      24. background-position: center center !important;
      25. background-size: cover !important;
      26. height: 80px;
      27. background-repeat: no-repeat !important;
      28. width: 100%;
      29. }
      30. /*custom-background-image-end*/
      31. /*custom-background-image-start*/
      32. div#header{
      33. background-image: url(../images/custom-background.png) !important;
      34. background-position: center center !important;
      35. background-size: cover !important;
      36. height: 80px;
      37. background-repeat: no-repeat !important;
      38. width: 100%;
      39. }
      40. /*custom-background-image-end*/
      Display All


      The revert option will probably not fix this, so you have two options:

      Manual method:
      nano /var/www/openmediavault/css/theme-triton.min.css
      And deleted everything under the first line

      Simple method:
      copy paste in your ssh console

      Source Code

      1. cd /var/www/openmediavault/css/; rm theme-triton.min.css; wget https://raw.githubusercontent.com/openmediavault/openmediavault/master/deb/openmediavault/var/www/openmediavault/css/theme-triton.min.css