Changing icons with CSS / part II
-
@Narsis Nice work on these icons!
In other news the sync icon has been leaked on some screenshot. Can't remember where anymore. It's just the standard cloud icon. Does someone have an idea for an icon representing sync, that isn't a cloud? I've looked around and the options aren't plentiful.
-
@narsis thanks for notes, I actually have bookmark icon in panel, just forgot about it.
-
Round back/forward.
.button-toolbar.back > svg path { d: path('M293.004,78.525C249.64,3.436,153.62-22.295,78.531,21.061C3.436,64.411-22.296,160.443,21.068,235.542 c43.35,75.087,139.375,100.822,214.465,57.467C310.629,249.648,336.365,153.621,293.004,78.525z M219.836,265.802 c-60.075,34.685-136.894,14.114-171.576-45.969C13.57,159.762,34.155,82.936,94.232,48.253 c60.071-34.683,136.894-14.099,171.578,45.979C300.495,154.308,279.908,231.118,219.836,265.802z M211.986,141.328h-65.491 l17.599-17.603c6.124-6.129,6.124-16.076,0-22.197c-6.129-6.133-16.078-6.133-22.207,0l-44.402,44.4 c-6.129,6.131-6.129,16.078,0,22.213l44.402,44.402c6.129,6.128,16.078,6.128,22.207,0c6.124-6.131,6.124-16.077,0-22.201 l-17.606-17.601h65.499c8.669,0,15.697-7.041,15.697-15.701v-0.008C227.683,148.353,220.655,141.328,211.986,141.328z') !important; transform: scale(.08) !important; /*backbutton*/ } .button-toolbar.forward > svg path { d: path('M216.545,145.893l-44.374-44.368c-6.131-6.133-16.076-6.133-22.205,0h0.008c-6.129,6.121-6.129,16.068,0,22.197 l17.589,17.603h-65.485c-8.666,0-15.701,7.033-15.701,15.701v0.008c0,8.668,7.035,15.701,15.701,15.701h65.493l-17.597,17.601 c-6.129,6.132-6.129,16.069,0,22.201c6.122,6.136,16.066,6.136,22.197,0l44.41-44.402c6.128-6.127,6.128-16.078,0-22.209 C216.57,145.909,216.554,145.9,216.545,145.893z M235.533,21.057C160.438-22.291,64.414,3.433,21.063,78.521 c-43.356,75.096-17.633,171.119,57.464,214.483c75.087,43.353,171.119,17.625,214.476-57.47 C336.364,160.443,310.62,64.408,235.533,21.057z M265.801,219.83c-34.688,60.079-111.503,80.657-171.574,45.973 C34.158,231.118,13.565,154.304,48.25,94.229C82.932,34.151,159.756,13.567,219.828,48.25 C279.899,82.934,300.485,159.763,265.801,219.83z') !important; transform: scale(.08) !important; /*forwardbutton*/ }
Icons made from Chris Veigt for flaticon.com
-
@raed You should be able to do this without javascript, but since you are already using js code for the button it doesn't really matter. And yeah, you can color the svg, but I would keep it like it is – the Vivaldi theme color variables assure the button is consistent over all themes you load. In any case, that's your choice. The Vivaldi icon has 2 paths, and each path has a fill for the color (eg
fill=blue
). Just inspect the footer again and you will see how to do it. -
@raed You need to introduce a second path for this to work. Maybe I'll take a look at it later.
-
@raed As said, without the second path it's futile. This works.
setTimeout(function wait(){ toolbar = document.querySelector(".toolbar-addressbar.toolbar"); bookmarkbar = document.querySelector(".bookmark-bar"); morebookmarks = document.querySelector("button[title='More bookmarks']"); if (bookmarkbar != null){ bookmarkbar.style.width = 0; } if (toolbar !== null && bookmarkbar !== null && morebookmarks !== null){ morebookmarks.classList.add("button-toolbar"); morebookmarks.id = "addbookmarks"; bookmarkbar.remove(); var svg = morebookmarks.firstElementChild; svg.setAttribute("viewBox", "0 0 34 34"); svg.setAttribute("height", "34"); svg.setAttribute("width", "34"); svg.innerHTML = '<path d="M16 32c7 0 10.91 0 13.45-2.54S32 23 32 16s0-10.9-2.55-13.44S23 0 16 0 5.09 0 2.55 2.54 0 9 0 16s0 10.9 2.55 13.44S9 32 16 32z" fill="#ef3939"></path><path d="M24.43 7.53a12 12 0 1 0 0 16.94 12 12 0 0 0 0-16.94zM23.71 13l-5.93 10.35a2 2 0 0 1-1.63 1.08 1.89 1.89 0 0 1-1.88-1C13 21.27 11.79 19.11 10.55 17l-2.27-4a2 2 0 0 1 1.62-3 1.91 1.91 0 0 1 1.83 1c.56 1 1.1 1.92 1.66 2.88.4.69.79 1.39 1.2 2.07a3.13 3.13 0 0 0 2.62 1.62 3.19 3.19 0 0 0 3.36-2.84v-.33a3.35 3.35 0 0 0-.34-1.49A2 2 0 1 1 24 11.69a2.08 2.08 0 0 1-.29 1.31z" fill="#fff"></path>'; toolbar.appendChild(morebookmarks); } else { setTimeout(wait, 300); } }, 300);
-
@raed said in Changing icons with CSS / part II:
Any thoughts on changing the title bar (minimize, resize and close) icons, and on reducing the wasted screen real estate on top of the tabs?
Glad you are happy, but any requests unrelated to changing icons are off-topic here.
-
@raed The path is the alignment. It has a starting point M which places it in the viewbox. If you change the viewbox, the path might not be centered anymore, speak: changing the viewbox misaligned your path. Try scaling like @Hadden89 instead of changing the viewbox to control the size of the path/icon. If you start to scale it might be a good idea to make the viewbox 32x32, like in the original svg on the Vivaldi Forum.
-
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