Styling the webgui

    • OMV 1.0
    • "Well... lately this forum has become support for everything except omv" [...] "And is like someone is banning Google from their browsers"

      Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.


      Upload Logfile via WebGUI/CLI
      #openmediavault on freenode IRC | German & English | GMT+1
      Absolutely no Support via PM!

      I host parts of the omv-extras.org Repository, the OpenMediaVault Live Demo and the pre-built PXE Images. If you want you can take part and help covering the costs by having a look at my profile page.
    • /var/www/openmediavault/css/

      Greetings
      David
      "Well... lately this forum has become support for everything except omv" [...] "And is like someone is banning Google from their browsers"

      Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.


      Upload Logfile via WebGUI/CLI
      #openmediavault on freenode IRC | German & English | GMT+1
      Absolutely no Support via PM!

      I host parts of the omv-extras.org Repository, the OpenMediaVault Live Demo and the pre-built PXE Images. If you want you can take part and help covering the costs by having a look at my profile page.
    • Here is a dark-gray css with a background image
      put it in /var/www/openmediavault/
      Files
      • dark-gray.zip

        (405.46 kB, downloaded 692 times, last: )
      "Glowing days. Don't cry because they are over. Smile because they happened." - Confucius

      Server: 1x 32GB SSD (system) - 5x 2TB Data - 1x 2TB Snapraid-Parity - latest OMV 1.x
      No Support through PM
      Tutorials --- Howto install OMV-Extras --- Upgrade/Update-Problems --- If autoshutdown doesn' -work

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

    • Screenshot Solo?

      Greetings
      David
      "Well... lately this forum has become support for everything except omv" [...] "And is like someone is banning Google from their browsers"

      Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.


      Upload Logfile via WebGUI/CLI
      #openmediavault on freenode IRC | German & English | GMT+1
      Absolutely no Support via PM!

      I host parts of the omv-extras.org Repository, the OpenMediaVault Live Demo and the pre-built PXE Images. If you want you can take part and help covering the costs by having a look at my profile page.
    • screenshots added

      and yes, the css subdir is included inside the zip.
      "Glowing days. Don't cry because they are over. Smile because they happened." - Confucius

      Server: 1x 32GB SSD (system) - 5x 2TB Data - 1x 2TB Snapraid-Parity - latest OMV 1.x
      No Support through PM
      Tutorials --- Howto install OMV-Extras --- Upgrade/Update-Problems --- If autoshutdown doesn' -work
    • Some kind of:

      tekkbebe wrote:

      Login Page-
      On the use of body:

      Source Code

      1. body#shutdown-page {
      2. background: url("/images/bsg.jpg");
      3. }

      This code above sets that furthest back item on the page.

      You can use color or image. In the use of body if you use code:

      Source Code

      1. backgroud-image: *****

      it will put this over the backgroud color or image that you set with "background". So if you just want 1 thing in the background do not use background-image too. I could imagine there would be situations with a small picture where you might want color on the margins. In this case you could set base color with background and use background-image for the picture.

      Workspace-
      Status/Percentage Bar color (like cpu percentage bar):

      Source Code

      1. .x-progress-default .x-progress-bar-default {
      2. background-color: #99BDA4; /* Cooperate color */
      3. background-image: none; /* Flat design */
      4. ]


      Backgroud color when you put cursor over category (i.e. system, service, etc...):

      Source Code

      1. .x-workspace-node-view-category-header .x-item-over {
      2. background-color: #D8EDDB;
      3. cursor: pointer;
      4. }


      Backgroud color when you put cursor over an icon:

      Source Code

      1. .x-workspace-node-view-category-items .x-item-over {
      2. background-color: #D8EDDB;
      3. cursor: pointer;
      4. }


      Most of the functions are self explaining IMHO. But there is no complete documentation available.
      OMV stoneburner | HP Microserver | 256GB Samsung 830 SSD for system | 4x 2TB in a RAID5
      OMV erasmus| Odroid XU4 | 5TB Data drive | 500GB Backup drive
    • Here is the easiest way I find to get started:

      cd /var/www/openmediavault/css
      cp omv.css omv-custom.css

      This will copy everything from the default omv.css file and give you correct chown/cmod for the custom file.
      Then you can just test editing various things in the custom file. Some are described above.
      Remember that after every edit of the custom file you will need to refresh your browser to see the effects of the edits.