a little moding help please!



  • is it possible to change those?

    1. color of the url bar border
    2. grey borders of the panel cause i use a black color on this, grey borders shows and its ugly
    3. color the inactive tab cause i dont like the dark grey that is now
    4. change the hightlight color of the url bar

    please anyone can help will be apriciate! i search everywhere can find a thing on those! thx in advance!



  • @johnnyfire

    CSS Mods are the way to go. See https://forum.vivaldi.net/topic/10549/modding-vivaldi/

    \1. Url Bar Border
    You need to choose a colour, but the selectors in action are either .addressfield:focus-within{border-color:#fff} or just .address-field{border-color:#fff}, depending on where the border you dont like is. Also works for .searchfield.

    \2. Mod for the ugly borders:

    #footer{box-shadow:none}
    #switch button.active,#panels-container,#switch,#panels .panel-group{border-color: transparent}
    #panels-container.left #switch{box-shadow: none}
    #footer .zoom-control {border-left-color: transparent}
    .zoom-control input {border-width: 0px}
    #footer .button-toolbar-small {box-shadow: none}
    #panels-container:after {background-color: transparent}
    #switch button:hover:not(:disabled):not(.active), #switch button:focus:not(.active) {box-shadow: none !important}
    

    \3. Colured BG tabs
    I've made a few posts about this, my current setup is to set background tabs as being the current accent but slightly darker

    .tab:not(.active) { background: var(--colorAccentBgDarker) !important}
    

    \4. See point 1, but switch border-color for color

    Hopefully this helps.



  • @lonm said in a little moding help please!:

    @johnnyfire

    CSS Mods are the way to go. See https://forum.vivaldi.net/topic/10549/modding-vivaldi/

    \1. Url Bar Border
    You need to choose a colour, but the selectors in action are either .addressfield:focus-within{border-color:#fff} or just .address-field{border-color:#fff}, depending on where the border you dont like is. Also works for .searchfield.

    \2. Mod for the ugly borders:

    #footer{box-shadow:none}
    #switch button.active,#panels-container,#switch,#panels .panel-group{border-color: transparent}
    #panels-container.left #switch{box-shadow: none}
    #footer .zoom-control {border-left-color: transparent}
    .zoom-control input {border-width: 0px}
    #footer .button-toolbar-small {box-shadow: none}
    #panels-container:after {background-color: transparent}
    #switch button:hover:not(:disabled):not(.active), #switch button:focus:not(.active) {box-shadow: none !important}
    

    \3. Colured BG tabs
    I've made a few posts about this, my current setup is to set background tabs as being the current accent but slightly darker

    .tab:not(.active) { background: var(--colorAccentBgDarker) !important}
    

    \4. See point 1, but switch border-color for color

    Hopefully this helps.

    you are the best ill try em and report back! thxxx!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!



  • @johnnyfire

    thx again! lets start!

    1. works perfectly but if i want to remove the border? i try some changes but i have no luck...
    2. this work awsomelly! can i remove the sliding border on download filename-speed too?
    3. for this ii use .tab:not(.active) { background: none !important} to make the result need! can i make the tab bar black completely?
    4. i use .addressfield:focus-within{color:#fff} and .address-field{color:#fff} works but i dont wont the text to change only the blue highlight to other color

    if this litle solved i have the best expiriece! again your help is so so so greatfull!



  • @johnnyfire

    1. You could remove the border completely by setting border-color: transparent
    2. Does this do what you're after? .download-editor button.fullwidth.alternate::after {border-color: transparent !important}
    3. and 4. I'm not quite sure what you're asking for.

    I would suggest using the inspector tool as described here: https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools/2 this way you can play around and find a setting that works for yourself. There are some good starter resources on hacking CSS here: https://www.w3schools.com/css/default.asp



  • @lonm

    1. i use this value but a thin border line stays FIXED was the box shadow!
    2. nop this is not that its a slider line above the download panel info ?
    3. i done that i found it and works! FIXED
    4. i mean the coloring above the text the trails if i say it right! ?

    *** 5. there is a line separator under the urlbar and above the bookamarksbar, cant be removed or colored ?



  • @johnnyfire Would you be able to provide some screenshots to better explain what you mean? That might be easier to explain with than words.

    1. You can do that with .toolbar-addressbar:after{background-color: transparent !important}


  • @lonm said in a little moding help please!:

    @johnnyfire Would you be able to provide some screenshots to better explain what you mean? That might be easier to explain with than words.

    1. You can do that with .toolbar-addressbar:after{background-color: transparent !important}

    works like a charm!!!!!!!!!

    i post a new thread with gifs to show you better whats let and if you have the time to give me some more helpy :P


Log in to reply
 

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