[Windows] Need help with custom.css script.



  • Hello,

    I am using custom.css script to modify vivaldi layout. Unfortunately since version 2.0 there is an issue where drop down list from URL bar is covered by tabs bar that is under it (see screenshot below). The script worked fine for countless versions until last two and i wanted to ask: How can i fix it by modifying script below (very bottom of this post)? My guess is it might have something to do with the z-index thingy.
    0_1539788776781_vivaldidropdownlist1.png

    Thx in advance,
    TreaKu

    This is my custom.css file that i use via @import "custom.css"; at the beginning of common.css .

    
    .button-toolbar.rewind{
        display: none;
    }
    
    .button-toolbar.next{
        display: none;
    }
    
    .topmenu+#tabs-container.top {
        border-bottom: 1px solid;
        position: absolute;
        top: 84px;
        width: 100%;
        z-index: 1 !important;
    }
    
    .bookmark-bar {
        margin-bottom: 33px;
    }
    

    //MODEDIT: Added the code block

    edit: added empty line so code block correctly shows whole script
    edit2: tags


  • Moderator

    You could try changing the z index of the address bar drop down to be higher than that of the tab bar.


  • Moderator

    @lonm This doesn't work, both are positioned absolutely and since #tabs-container.top is earlier in the code, it overlays .urlSearch regardless of the z-index value of both elements.



  • I tried adding

    .urlSearch {
    position: absolute;
    z-index: 1 !important;
    }

    before tabs-containter.top and tried to tweak z-index to other values but it didn't do anything.


  • Moderator

    @treaku It won't do anything, you've got to figure out another workaround. I tried to fiddle with it for a while but to no avail.

    Also, please use a triple grave accent (```) when you're inserting a code in your posts (paste it before and after the code, in separate lines).



  • I found this: https://forum.vivaldi.net/topic/15834/tabs-on-bottom-for-1-8
    And its working, also apparently now including stuff in common.css is bad and should be done in ../browser.html with:

     <link rel="stylesheet" href="style/custom.css" />
    


  • @treaku Making the import via common.css isn't bad (it works and causes no issues), but all explanations and batch scripts are written by referring the custom files in browser.html, therefore it's the recommended variant. Also if you're running javascript you have to do the browser.html edit anyway.



  • @luetage Given that @TreaKu is on Windows, I'd recommend @NeoCortex's mod's manager instead: https://forum.vivaldi.net/topic/30984/windows-vivaldi-mod-manager/


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.