[CSS] Customize WebGui - need CSS Help?

    • OMV 1.0

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • [CSS] Customize WebGui - need CSS Help?

      I'm customizing my CSS (via the omv-custom.css) method.
      I'm trying to modify the color of the shadow on the Login Screen usr/pwd "pop-up"- on this part of the code to be precise:

      <div class="x-css-shadow" role="presentation" id="ext-gen1064" style="z-index: 19000; right: auto; left: 800px; top: 420px; width: 320px; height: 143px; box-shadow: rgb(136, 136, 136) 0px 0px 6px; display: block;"></div>

      FROM:
      >>>> box-shadow: rgb(136, 136, 136) 0px 0px 6px;

      TO:
      >>>> box-shadow: rgb(31, 31, 31) 5px 5px 6px;

      It makes the Login pop-up look much better - IMO, where can I edit that on the source ?? the CSS-custom thing doesn't allow me to do that?
      here is how it looks like modified:

      [IMG:http://i.imgur.com/gNmvXad.jpg]

      Can anyone help?
    • What file are you finding box-shadow or css-shadow in? A quick grep doesn't show either.
      omv 4.1.11 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:

      What file are you finding box-shadow or css-shadow in? A quick grep doesn't show either.


      doing a inspect element in Chrome, and looking at the compiled source code, and where it is fetching the styles from. seems to be under the ext-theme-gray-all.css but that is a property in there, somehow those values were defined. and it is all css.

      Seems like an assigned class by the webkit being used, but i was wondering if it could be overwritten
      That style was setup somewhere, I'm trying to find, where :)

      [IMG:http://i.imgur.com/jmXPCXt.jpg]
    • tekkb wrote:

      Before you delve into this there are some other things you should know... I try to find some old posts regarding styling.


      Theming


      Yes, i've done that, read it, this is what I mentioned about the omv-custom method you posted on that very same topic:

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

      I was wondering if that setting for the drop shadow could be also overwritten by the custom one? and if could, how do I identify and which class I use to overwrite it? i had no luck yet.

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

    • tekkb wrote:

      I haven't read everything you wrote. But if you do not find it in the omv.css file then we would have to ask Volker to add any items you would like to customize. I will try to read what you wrote later. Just getting off work....


      I think I found it - at least it worked, maybe not on the right way... bad thing about thsi apporach, is that I changed the root class border.box, meaning everything else got a drop shadow as well... back to square 1.

      Used:
      x-border-box {
      box-shadow: rgb(31, 31, 31) 5px 5px 5px;
      }

      Looked at:

      [IMG:http://i.imgur.com/BWFYs4v.jpg]


      that 1 line code above made the login drop shadow look awesome. :thumbsup:

      before:
      [IMG:http://i.imgur.com/QvThVk8.jpg]

      After:
      [IMG:http://i.imgur.com/1qW55cG.jpg]

      believe me, on teh bigger screen now it really looks to be hovering on top of the site...

      The post was edited 2 times, last by DanielP ().