Changing icons with CSS / part II
-
Hi, I am trying to replace the extentions-toggle-button (3 dots), but it does not work as expacted. Could you tel me why?
button.button-toolbar.toggle-extensions-group svg path { d: path("M 8.4089606,4.174856 V 29.825144 Z M 15.591039,4.174856 V 29.825144 Z"); stroke: var(--colorFg); stroke-width: 2px; }
My svg file:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg3014" version="1.1" viewBox="0 0 24 34" height="34" width="24"> <path style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none" d="M 8.4089606,4.174856 V 29.825144 Z M 15.591039,4.174856 V 29.825144 Z" id="path3038" /> </svg>
Expected result:
Actual result:
It is also good, but I would like to know why it behaves this way.
-
@burbuja I'd say you got the wrong viewbox there. The original svg is very narrow and you don't change this. The path is just two lines, why don't you make it yourself instead of using an existing oversized version?
-
@luetage said in Changing icons with CSS / part II:
why don't you make it yourself instead of using an existing oversized version?
Hi, I dont get you right. Sure, I put in the custom.css only the path.
this is the viewbox from my svg-file:
viewBox="0 0 24 34" height="34" width="24"
Which is the size, which I see in the developer tool.
The first screenshot is only zoom in.Edit:
I got it now:button.button-toolbar.toggle-extensions-group svg path { d: path("M 0.667943,0.16970139 V 15.710737 Z M 3.332057,0.16970139 V 15.710737 Z"); stroke: var(--colorFg); stroke-width: 1px; }
@luetage How could I change the original viewbox? The buttons size is 24 x 34 so there is enough space ...
Here is the result, which I wanted:
-
@burbuja it's too small. The original viewbox can only be changed with javascript I'm afraid. On other buttons it doesn't really matter, but the extension toggle's viewbox is 4x16px, which is really small, especially if you want to fit something wider as in your case.
With javascript it's easy, you just set the attribute of the svg. I don't know why this hasn't been introduced in css, would come in handy.
-
@luetage Thank you. I got it already
-
Now that the extension toggle looks like it's going to be a permanent feature of my browser, I felt it needed a better icon than the "3 dots" which usually means (for better or worse) "menu", not "overflow" or "things you hid".
.button-toolbar.toggle-extensions-group svg path { d: path("M 3.5178639,5.0873842 A 2.0163536,2.0163536 0 0 1 1.5015103,7.1037378 2.0163536,2.0163536 0 0 1 -0.51484333,5.0873842 2.0163536,2.0163536 0 0 1 1.5015103,3.0710306 2.0163536,2.0163536 0 0 1 3.5178639,5.0873842 Z m -1.9029832,10.6174408 4,-6.0000002 h -8 z"); }
-
@lonm Permanent because you hide many buttons and they are all in the new dropdown now? I really do hope this dropdown goes away lol. It's no problem to work around it but it's also a bad solution.
-
@luetage Yes. I hide them. Now that it functions more like firefox's overflow menu, I figured it would be easier to just get on board the train and start using it like that.
-
@lonm There is nothing to get on board. If the extension toggle is enabled, extension icons can't be hidden. If it's disabled and you hide an extension icon it shows but ceases normal functionality β shows the dropdown instead. It's really two different buttons. It's a bug. It's unintuitive and sloppy and it has to be fixed for stable. The logical thing to do is writing a different Vivaldi extensions page, should be really easy to do. Opera did it
-
-
@igor-krupenja
button.button-addressfield.addressfield-siteinfo.internal {display: none;}
take it and run, this is off-topic here -
-
Improved Speed Dial Folders
I'm not a massive fan of how folders in the speed dial add a background to a thumbnail with a strangesvg
folder strip along the top. So I used the path-changing trick to fix it.From this:
To this:
Code:
.dial-folder-icon { background: transparent; } .dial .folder-flap svg path{ d: path('M6.16,2.5H1.6A1.12,1.12,0,0,0,.5,3.63v8.75A1.12,1.12,0,0,0,1.6,13.5H14.4a1.12,1.12,0,0,0,1.1-1.12V5.76a1.19,1.19,0,0,0-1.1-1.23H7.76Z'); } .dial .thumbnail-image svg .folder-tab-color { fill: var(--colorBgIntense); } .dial .folder-flap svg{ width: 16px !important; height: 16px !important; position: relative !important; transform: scale(12); top: 42px !important; left: 16px; }
Notes:
Depending on your thumbnails, and speed dial background image you might need to fiddle with the fill colour and positioning of the folder svg. -
Hey guys,
Is there a svg star (like the fav star from old Twitter, for example) that could be used for all bookmarks icons?
Thanks! -
-
@luetage Thanks
Just another question, it's the first time I'm dealing with svg files, how do I change its size to fit with Vivaldi's bars?Thanks again for your help!
-
@goldnoway The better question is: How do you get the path? Click on "Original file", inspect and copy the path. Resizing with pure css can be done by scaling.
-
@luetage Yup, already understood that, but I don't know how to scale svg at the moment.
-
-
Thanks! Did that:
.bookmarks svg path { d: path('m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z'); transform: scale(0.48,0.48) translate(3px,4px); } .button-addressfield.bookmark svg path { d: path('m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z'); transform: scale(0.34,0.34);
I'll make sure to post there if I find other nice svg