Changing icons with CSS / part II
-
And here are the panel-buttons created by you!
Have you notice the Mail button displays the number of unread messages.
Thank you very much, friend:) -
@lamarca said in Changing icons with CSS / part II:
Have you notice the Mail button displays the number of unread messages.
No, I could not, I dont have soprano-versions of Vivaldi. I have to wait ....
-
Vivaldi menu ikon
Vivaldi-Original:
My intent:
Mein SVG-Code:<?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" height="19.833288" width="22" id="svg6" version="1.1"> <path style="fill:#ff0000;stroke-width:1.7212081" id="path4" d="M 20.354173,4.8706031 13.176735,17.314938 A 2.3924794,2.3924794 0 0 1 11.197345,18.623057 2.289207,2.289207 0 0 1 8.9253504,17.418211 C 7.4106864,14.819187 5.913236,12.254586 4.4157847,9.603925 L 1.6618517,4.8361788 A 2.4096915,2.4096915 0 0 1 3.6240292,1.2044288 2.3064192,2.3064192 0 0 1 5.8615998,2.4436986 L 7.8754144,5.8861161 C 8.3573509,6.7122966 8.822078,7.6073245 9.3212281,8.3818671 A 3.7866581,3.7866581 0 0 0 12.488252,10.344045 3.8555065,3.8555065 0 0 0 16.550304,6.9016304 V 6.5057509 A 4.0276272,4.0276272 0 0 0 16.137214,4.7845429 2.4096915,2.4096915 0 1 1 20.646777,3.2870915 2.512964,2.512964 0 0 1 20.354173,4.8706031 Z" /> </svg>
Mein custom.css:
.application-icon svg path { d: path("M 20.354173,4.8706031 13.176735,17.314938 A 2.3924794,2.3924794 0 0 1 11.197345,18.623057 2.289207,2.289207 0 0 1 8.9253504,17.418211 C 7.4106864,14.819187 5.913236,12.254586 4.4157847,9.603925 L 1.6618517,4.8361788 A 2.4096915,2.4096915 0 0 1 3.6240292,1.2044288 2.3064192,2.3064192 0 0 1 5.8615998,2.4436986 L 7.8754144,5.8861161 C 8.3573509,6.7122966 8.822078,7.6073245 9.3212281,8.3818671 A 3.7866581,3.7866581 0 0 0 12.488252,10.344045 3.8555065,3.8555065 0 0 0 16.550304,6.9016304 V 6.5057509 A 4.0276272,4.0276272 0 0 0 16.137214,4.7845429 2.4096915,2.4096915 0 1 1 20.646777,3.2870915 2.512964,2.512964 0 0 1 20.354173,4.8706031 Z") !important; fill: #ffffff; } .application-icon svg { height: 100%; width: 100%; } .application-icon:hover svg path { stroke: var(--colorAccentBg); fill: var(--colorAccentBg) }
-
@burbuja Another one:
.application-icon svg path { d: path("M 8.9015328,6.4758558 A 0.95170444,3.1556371 0 0 1 7.949828,9.6314932 0.95170444,3.1556371 0 0 1 6.9981236,6.4758558 0.95170444,3.1556371 0 0 1 7.949828,3.3202202 0.95170444,3.1556371 0 0 1 8.9015328,6.4758558 Z M 15.284281,6.4392462 A 0.95170444,3.1190264 0 0 1 14.332576,9.5582723 0.95170444,3.1190264 0 0 1 13.380872,6.4392462 0.95170444,3.1190264 0 0 1 14.332576,3.3202202 0.95170444,3.1190264 0 0 1 15.284281,6.4392462 Z M 20.178158,10.063888 C 15.264313,23.89618 6.4193927,23.745003 1.7512409,10.063888 5.4366238,25.332321 16.492774,25.332321 20.178158,10.063888 Z M 2.2736889,9.984828 A 0.52244901,0.86880792 0 0 1 1.7512401,10.853636 0.52244901,0.86880792 0 0 1 1.2287912,9.984828 0.52244901,0.86880792 0 0 1 1.7512401,9.1160193 0.52244901,0.86880792 0 0 1 2.2736889,9.984828 Z M 20.771209,9.8110651 A 0.52244901,0.86880792 0 0 1 20.24876,10.679875 0.52244901,0.86880792 0 0 1 19.726311,9.8110651 0.52244901,0.86880792 0 0 1 20.24876,8.9422589 0.52244901,0.86880792 0 0 1 20.771209,9.8110651 Z") !important; stroke-width: 1px; } .application-icon svg { height: 100%; width: 100%; } .application-icon svg path { fill: #2a7fff; stroke: #2a7fff; }
Hab schon alles Mögliche probiert, jetzt sieht das bei mir so aus:
@burbuja Another one:
.application-icon svg path { d: path("M 8.9015328,6.4758558 A 0.95170444,3.1556371 0 0 1 7.949828,9.6314932 0.95170444,3.1556371 0 0 1 6.9981236,6.4758558 0.95170444,3.1556371 0 0 1 7.949828,3.3202202 0.95170444,3.1556371 0 0 1 8.9015328,6.4758558 Z M 15.284281,6.4392462 A 0.95170444,3.1190264 0 0 1 14.332576,9.5582723 0.95170444,3.1190264 0 0 1 13.380872,6.4392462 0.95170444,3.1190264 0 0 1 14.332576,3.3202202 0.95170444,3.1190264 0 0 1 15.284281,6.4392462 Z M 20.178158,10.063888 C 15.264313,23.89618 6.4193927,23.745003 1.7512409,10.063888 5.4366238,25.332321 16.492774,25.332321 20.178158,10.063888 Z M 2.2736889,9.984828 A 0.52244901,0.86880792 0 0 1 1.7512401,10.853636 0.52244901,0.86880792 0 0 1 1.2287912,9.984828 0.52244901,0.86880792 0 0 1 1.7512401,9.1160193 0.52244901,0.86880792 0 0 1 2.2736889,9.984828 Z M 20.771209,9.8110651 A 0.52244901,0.86880792 0 0 1 20.24876,10.679875 0.52244901,0.86880792 0 0 1 19.726311,9.8110651 0.52244901,0.86880792 0 0 1 20.24876,8.9422589 0.52244901,0.86880792 0 0 1 20.771209,9.8110651 Z") !important; stroke-width: 1px; } .application-icon svg { height: 100%; width: 100%; } .application-icon svg path { fill: #2a7fff; stroke: #2a7fff; }
-
@burbuja I liked this one very much. Quite similar to Bunsenlans:
-
@lamarca its a great idea! tu put the flame there, replacing the vivaldi-icon!
Sorry, I really dont like it. -
@burbuja said in Changing icons with CSS / part II:
O its a great idea! tu put the flame there, replacing the vivaldi-icon!
I did not think about it. It's okay for me.
-
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.