New omv-theme changer based on Wolf2000Pi/omv-theme

    • New omv-theme changer based on Wolf2000Pi/omv-theme

      // 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 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 and started working on it, know my way around a linux workstation but bash is not something I know so this will be interesting.
      I started building a few CSS themes and removed the one in the original version (really did not like that one will bring back an updated version but nobody requested it so...), also added some new functionality based on some requests made on this topic.

      This tool has been divided into 2 categories CSS Themes and Javascript Plugins, CSS is purely for colours and UI manipulation without using javascript, for the javascript you guessed right we use javascript.
      If you are interested in the code just visit the github page and you can see my approach to this customisation actions.

      To install:

      Source Code

      1. apt-get install git
      2. git clone https://github.com/virgil-av/omv-theme.git && cd omv-theme && chmod +x install-omv-theme.sh && ./install-omv-theme.sh && cd
      To uninstall:
      Use the the uninstall option from omv-theme tool


      To Start:
      omv-theme

      To Update:
      omv-theme select the Update option

      To sneak peak on what I am working on (warning this can break stuff as it is a development tool ):
      omv-theme2


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


      This tool does not have bugs just unexpected features, :)) I am joking if you do find a bug please post it here I will try my best to fix it, all options have a revert option so I am careful not to break your servers.


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

      Some screenshots:

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

    • 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.
    • syrusstk wrote:

      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 4.1.12 arrakis | 64 bit | 4.15 proxmox kernel | omvextrasorg 4.1.11
      omv-extras.org plugins source code and issue tracker - github

      Please read this before posting a question and this and this for docker questions.
      Please don't PM for support... Too many PMs!
    • ryecoaaron wrote:

      syrusstk wrote:

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

      PHP Source Code

      1. // Set core CSS files.
      2. $cssList = [
      3. "extjs6/classic/theme-triton/resources/theme-triton-all.css",
      4. "css/theme-all.min.css",
      5. "css/theme-triton.min.css",
      6. "css/materialdesignicons.min.css"
      7. ];
      8. // Add additional CSS files.
      9. $cssList = array_merge($cssList, array_values(array_unique(
      10. $this->getCssIncludes())));
      11. $fileName = "css/theme-custom.css";
      12. if (file_exists($fileName))
      13. $cssList[] = $fileName;
      14. foreach ($cssList as $cssListv) {
      15. print "<link rel='stylesheet' type='text/css' media='all' href='{$cssListv}'/>\n";
      16. }
      Display All
      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.

      Post by TechnoDadLife ().

      This post was deleted by the author themselves ().
    • 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.
      Build, Learn, Create.

      How to Videos for OMV

      Post any questions to the forum, so others can benefit from your curiosity. :thumbsup:

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

    • TechnoDadLife wrote:

      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.
    • 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.)
      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.9, Acer RC-111, 4GB, 32GB USB boot, 3TB+3TB zmirror, 4TB Rsync'ed disk
      2nd Data Backup: OMV 3.0.99, R-PI 2B, 16GB boot, 4TB WD USB MyPassport - direct connect (no hub)
    • flmaxey wrote:

      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
      Images
      • Screenshot from 2018-10-04 23-51-17.png

        340.82 kB, 2,540×705, viewed 30 times
      • Screenshot from 2018-10-04 23-50-20.png

        13.67 kB, 528×381, viewed 22 times

      The post was edited 3 times, last by syrusstk ().

    • 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 ?
    • 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.
      OMV 4.X.XX, 5 * ODROID HC2, 2 * Seagate IronWolf 12TB, 1 * 500 GB 860 EVO, Netgear GS316, ASUS Lyra
    • ywgf88 wrote:

      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.

      Source Code

      1. cd /usr/share/php/openmediavault/controlpanel/
      2. rm controlpanelabstract.inc
      3. 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

      The post was edited 4 times, last by syrusstk ().

    • ywgf88 wrote:

      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.
      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.9, Acer RC-111, 4GB, 32GB USB boot, 3TB+3TB zmirror, 4TB Rsync'ed disk
      2nd Data Backup: OMV 3.0.99, R-PI 2B, 16GB boot, 4TB WD USB MyPassport - direct connect (no hub)
    • @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

      Post by syrusstk ().

      This post was deleted by the author themselves: Was writing it than the forum error-ed out, the site went down, this is up for moderation for some reason :) but even if I get the information I requested it will not help me find the reason why ().