Changing icons with CSS / part II
-
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; }
-
@raed
.button-toolbar:hover svg {color: a-darker-color}
-
@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}
-
Where have I to put the CSS / SVG code in?
-
-
@sjudenim said in Changing icons with CSS / part II:
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?
-
You add the path for the svg to your
custom.css
. The examples in this thread can be added directly to yourcustom.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; }
thank you @luetage -
@sjudenim Thank you.
-
@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.
-
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); }
-
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
-
Hi, I changed the "new tab icon"witht this code:
button.button-tabbar.newtab svg path { d: path("M 4.6666667e-6,0.12498045 15.875005,8.0624803 4.6666667e-6,15.99998 10.583338,8.0624803 Z"); fill: red !important; } button.button-tabbar.newtab:hover svg path { fill: green !important; }
How can I make it a bit bigger? The original svg is only 16 x 16
-
@burbuja By changing the width, height and viewbox.
-
Original home button:
button.button-toolbar.home svg path{ d: path("M 13,4 2.5,14 H 6 V 22 H 20 V 14 H 23.5 L 18,9 16,7 Z M 18,20 H 15 V 15 H 11 V 20 H 8 V 11.531 L 13,6.8 18,11.531 Z"); }
-
@raed great idea with the chimney
-
Alternative home-button in form of a flame of chimney.
The idea was: home -- chimney -- flame in it.button.button-toolbar.home svg path{ d: path("M 8.4493319,17.20534 C 3.7875194,5.4005603 13.868539,0.12444029 13.902412,0.10670029 14.812711,2.4808803 15.067052,2.8047003 17.322144,8.1476803 18.62605,11.23701 19.209239,14.81745 18.431242,18.03718 17.673521,21.17299 15.77664,23.63666 14.087265,25.8933 L 15.10394,18.68413 C 15.377507,16.74429 15.041565,13.38968 13.255439,11.84469 12.668738,11.33721 11.543912,11.23209 10.944808,11.56741 10.10382,12.03812 9.2811578,14.84513 8.4493319,17.20534 Z"); fill: blue; }
-
back-button:
button.button-toolbar.back svg path { d: path("M 19.477778,22.044444 17.522222,24 6.522222,13 17.522222,2 19.477778,3.9555556 10.677778,13 Z"); }
forward-button:
button.button-toolbar.forward svg path { d: path("M 6.522222,22.044444 8.477778,24 19.477778,13 8.477778,2 6.522222,3.9555556 15.322222,13 Z"); }
reload-button:
button.button-toolbar.reload svg path { d: path("M 20.529013,16.245264 C 19.230907,19.101096 16.375075,21.307876 13,21.307876 8.4566299,21.307876 4.6921234,17.54337 4.6921234,13 4.6921234,8.45663 8.4566299,4.6921235 13,4.6921235 15.33659,4.6921235 17.283749,5.6007975 18.841476,7.1585244 L 15.20678,11.052841 H 24.033899 V 1.9661016 L 20.788634,5.2113658 C 18.841476,3.2642073 15.985643,1.9661016 13,1.9661016 6.8989031,1.9661016 1.9661016,6.8989032 1.9661016,13 1.9661016,19.101096 6.8989031,24.033899 13,24.033899 17.932801,24.033899 22.08674,20.658824 23.514656,16.245264 Z"); }
I made all three a bit bigger:
-
@raed How can I change the order of the toolbar-buttons?
-
@raed Dont I need also javascript?