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



    Can anyone help?

    • Offizieller Beitrag

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

    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!

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


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



    Theming

    Take some time to read through that and then ask questions. Note you can copy the omv.css file and then edit the custom file which will override the original:
    cd /var/www/openmediavault/css
    cp omv.css omv-custom.css

  • 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.

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




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


    before:


    After:


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

Jetzt mitmachen!

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