Changing icons with CSS / part II



  • @raed

    You can set your address bar's height and then set the toolbar buttons to the same height.

    I have everything merged onto one bar so I'm not sure the selector, but you can try this

    .toolbar.toolbar-addressbar,
    .toolbar .button-toolbar {
        height: 36px !important;
    }


  • @sjudenim
    A by product of playing around with your code was to reduce the height of the address bar from 32px to 28px saving 4px of wasted horizontal space on the screen, the native Vivaldi tool buttons were resized correctly without having to make any further adjustments.

    After looking at the various bits of code I could find on the forum and googling the ones that looked promising, transform: translate() did the trick of correctly positioning the resized icons in both resized and maximized Vivaldi windows.

    .button-toolbar.back {
    	transform: translate(3px, 2px) !important;
    }
    

    and

    .button-toolbar.forward {
    	transform: translate(3px, 2px) !important;
    } 
    

    Correctly positioned icons reduced to transform: scale(.07) on a 28px high address bar:

    0_1520118157706_0101.png

    Again, I am clueless if this is the correct or prefered method of centering the icons, but it works.

    Regards
    raed



  • This reduces the width of the big red close icon on the title bar:

    #browser.win .window-buttongroup button.window-close {
    width:26px !important;
    }
    
    

    0_1520170297840_000.png

    Changing width: value changes size of red close icon.

    Regards
    raed

    Edit:

    Further variations on the theme:

    Completely remove red sqaure overlay on close icon:

        #browser.win .window-buttongroup button.window-close {
        width:24px !important;
        background-color: transparent !important;
    }
    
    

    Red square overlay on mouse over only:

        #browser.win .window-buttongroup button.window-close {
        width:24px !important;
        background-color: transparent;
    }
    
    


  • How to make icons on address bar (home, back,rewind, reload, next, forward) change color on mouse hover, similar to color change on mouse hover for trash and new tab icons on tabs bar?

    Regards
    raed



  • @raed .button-toolbar:hover svg {color: a-darker-color}



  • @lonm

    .button-toolbar:hover svg {color: a-darker-color}
    

    The code you kindly provided is not making any difference for me, I even tried it on its own in a custom.css file to make sure it is not conflicting, still it does not make any difference to the color of the address bar icons on mouse over.

    I have also substituted a-darker-color for a-lighter-color and a color hex value, still it does not want to play nice with me, I have a feeling that I am not implementing your line of code correctly.



  • @raed My bad, the correct property for SVGs is different to text. It should have been fill. Try this one:

    .button-toolbar:hover svg {fill: red}
    


  • @lonm
    Your magic works this time 😉
    Many thanks
    raed



  • Where have I to put the CSS / SVG code in?





  • @sjudenim said in Changing icons with CSS / part II:

    @burbuja

    https://forum.vivaldi.net/topic/10549/modding-vivaldi?page=1

    Thank you, I just added my custom.css to browser.html. One more question: Where or how to add my custom svg?



  • @burbuja

    You add the path for the svg to your custom.css. The examples in this thread can be added directly to your custom.css file.

    If you are using an actual .svg image, you would have to place it in a folder and add a url to it in your css file, the svg path method is the better way.

    You can extract the path from most svg images with this online tool https://jakearchibald.github.io/svgomg/



  • I was able to change the V-icon using this code:

    button.vivaldi {
       background-color:  var(--colorBg);
    }
    .application-icon svg path {
         d: path("M 11.342262,2.01002 V 2.34237 C 11.342262,2.34237 11.654172,2.29656 11.841512,2.29656 13.022042,2.29656 14.014762,6.4553 15.168472,6.77727 13.692812,7.2602 12.485442,8.41387 12.485442,10.02369 12.485442,12.08962 16.563622,14.23607 16.563622,16.54347 16.563622,18.01914 15.272382,19.70895 13.987922,19.03871 8.304672,16.07314 7.580382,8.10275 8.431152,5.01726 L 5.863732,1.35152 C 5.863732,1.35152 3.6911919,5.08654 3.5350819,6.82628 3.5717921,12.34149 8.0047519,20.64849 11.546362,20.64849 14.846482,20.64849 18.280742,17.91184 18.280742,14.45074 18.280742,11.63355 14.739182,10.453 14.739182,8.36023 14.739182,7.63581 15.168432,7.23338 15.812342,6.91142 17.073372,6.91142 17.690492,6.37478 18.710032,5.83819 L 18.495392,5.3284 C 18.307582,5.46254 18.173482,5.54304 18.066162,5.56986 17.932012,5.5967 17.824672,5.62354 17.717352,5.62354 17.475882,5.62354 17.019732,4.89913 16.375802,3.42345 14.989492,1.00437 13.397032,1.07783 11.342262,2.01002 Z");
    
    }
    .application-icon svg {
       height: 100%;
       width: 100%;
    }
    
    .application-icon:hover svg path {
       fill: darkred;
       }
    

    0_1520821480283_customized.png
    thank you @luetage



  • @sjudenim Thank you.



  • @lonm
    Playing around with address bar icons I came across this script that turns displayed extension icons to grey:

    
    .toolbar.toolbar-addressbar .extensions-wrapper .button-toolbar.browserAction-button {
    -webkit-filter: grayscale(100%) contrast(90%) opacity(90%);
    }
    

    I attempted to use the code you kindly provided to make the extension icon colors change to the same color used for mouse over on the toolbar icons, but I do not seem to be doing it right:

    .toolbar.toolbar-addressbar .extensions-wrapper .button-toolbar.browserAction-button:hover svg {
    fill: red
    }
    

    The best I could do is make the extension icons revert to their original colors on mouse hover by using:

    .toolbar.toolbar-addressbar .extensions-wrapper .button-toolbar.browserAction-button:hover {
    -webkit-filter: grayscale(0%) contrast(100%) opacity(100%);
    }
    

    How can I make it to work?

    Regards
    raed



  • @raed The tricky thing is that extensions very likely won't use SVGs for their Icons, so you can't use the fill property.

    The best bet would be to see this thread about changing panel icons (you'll need to change the selectors but changing the image should be the same).

    You could then make your own custom image.



  • @retoree
    I have attempted to implement your script to change the add bookmark icon in the address field, it refused to run, removing .bookmarked from the following two lines, made it work for me.

    .button-addressfield.bookmark.bookmarked svg .bookmark-outline
    

    and

    .button-addressfield.bookmark.bookmarked:hover svg .bookmark-outline
    

    to

    .button-addressfield.bookmark svg .bookmark-outline
    

    and

    .button-addressfield.bookmark:hover svg .bookmark-outline
    

    One other thing, I am attempting to make the color of the add bookmark icon black, turning red on hover, but changing the fill: value is not making the slightest of difference, any and all tips greatly appreciated.

    Regards
    raed



  • @raed

    Those are 2 different states you're talking about. The addition of .bookmarked is the colour of the icon when you are viewing a saved page. What you want is for unsaved pages, which is why you remove the .bookmarked part.

    As for the hover, don't forget that it is often times necessary to use !important

    .button-addressfield.bookmark:hover svg .bookmark-outline {
        fill: var(--colorHighlightBgDark) !important;
    }
    

    There is also another selector that was not mentioned that can add a nice effect for the existing bookmark icon

    .button-addressfield.bookmark svg .bookmark-animated-fill {
        fill: var(--colorHighlightBgAlpha);
    }
    


  • @sjudenim
    Thank you sjudenim , now I know what I am dabbling with:) also thank you for providing an alternative animation/color scheme, now we have a choice between bling and subtlety.

    The change of color upon visiting a saved page works for some bookmarks but fails to work for other bookmarks, but I suspect that is not due to the script but to Chromium.

    Once again, many thanks to you and the multitude of others on this forum that help make Vivaldi what it is.

    Regards
    raed



  • @raed

    no problem.

    Since you're adding a hover effect to the icons in address bar, here's the other selectors for the icons found inside the address and search bars

    .addressfield button.button-addressfield.input-dropdown:hover svg,
    .button-addressfield.reader-mode:hover svg,
    .button-addressfield.bookmark:hover svg .bookmark-outline,
    .searchfield .search-engines:hover svg,
    .searchfield .search-history:hover svg {
        fill: var(--colorHighlightBgDark) !important;
    }
    

    This should theme everything in there to make it look complete


 

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