Changing icons with CSS / part II
-
@ruulrskybound You can do that with Javascript. Changing text is generally not possible with CSS, although we can hack our way around that and hide the text and make a
:before
or:after
pseudo element taking its place. As far as I know that’s not possible with title attributes. You could try to hide the title altogether and make a new hover pseudo element with CSS with your desired text. Then you just have to style it in a way that it emulates your system’s style. In my opinion not worth it. If you’ve already got a Javascript mod running, do it from there, if not, let it be. -
@lonm Hi. Thanks , it works fine.
But with the default color at my theme the trash icon looks like this :
Is there a way to change the color of the trash icon ?
Thanks. -
@buglocker
.toggle-trash.button-toolbar button svg path {fill: pink;}
-
@luetage Thanks for your response.
It changed it but ..... , I have set the color of Window's buttons (min/max-restore/close) and Trash icon both to yellow. But they appear with that way (trash is dull) :
In addition, after a few mods of Window buttons, the distance between Trash and the other buttons is very long. Can I make it smaller?
The code for Window's buttons , if it helps you :#browser.win .window-buttongroup {stroke: yellow !important;} .window-close:hover { background-color: red !important; border: 2px solid yellow !important; } .window-minimize:hover {background-color: red !important; border: 2px solid yellow !important;} .window-maximize:hover { background-color: red !important; border: 2px solid yellow !important; } #browser.win .window-buttongroup button.window-close{width:36px !important;} #browser.win .window-buttongroup button.window-minimize{width:36px !important;} #browser.win .window-buttongroup button.window-maximize{width:36px !important;}
Thanks.
-
@buglocker It’s toned down, the trash button highlights when you hover it. As for the margins, inspect and play with them. Be aware that the trash button has nothing to do with the window buttons, they aren’t children of the same element.
-
@luetage To be honest, I have no idea how to change the margins . Anyway thanks.
-
Alternative fontawesome icon for reading list (new experiment).
/* reading list */ .profile-popup + .button-toolbar button svg path { d: path( "M 18.41562,7.91813 16.08344,5.58563 C 15.70625,5.21069 15.19687,5 14.66875,5 H 9 C 7.89531,5 7,5.89531 7,7 l 2e-4,12 c 0,1.10438 0.89532,2 2,2 H 17 c 1.1,0 2,-0.9 2,-2 V 9.33125 C 19,8.80313 18.79062,8.29375 18.41562,7.91813 Z M 17.5,19 c 0,0.27613 -0.22388,0.5 -0.5,0.5 H 9.00063 c -0.27619,0 -0.5,-0.22387 -0.5,-0.5 L 8.5,7.00407 c 0,-0.27613 0.22387,-0.5 0.5,-0.5 h 5 V 9 c 0,0.55219 0.44781,1 1,1 h 2.47187 v 9 z M 10,13.75 c 0,0.41563 0.3375,0.75 0.75,0.75 h 4.5 C 15.66562,14.5 16,14.16563 16,13.75 16,13.33438 15.66562,13 15.25,13 h -4.5 C 10.3375,13 10,13.3375 10,13.75 Z M 15.25,16 h -4.5 C 10.3375,16 10,16.3375 10,16.75 c 0,0.4125 0.33594,0.75 0.75,0.75 h 4.5 C 15.66406,17.5 16,17.16407 16,16.75 16,16.33594 15.66562,16 15.25,16 Z" ); }
-
Trying to "re-icon" a command chain icon with a title of "Restart", what do I use for the selector? Here's what I have
.ToolbarButton-Button button[title="Restart"] svg path { d: path( "M288 256C288 273.7 273.7 288 256 288C238.3 288 224 273.7 224 256V32C224 14.33 238.3 0 256 0C273.7 0 288 14.33 288 32V256zM80 256C80 353.2 158.8 432 256 432C353.2 432 432 353.2 432 256C432 201.6 407.3 152.9 368.5 120.6C354.9 109.3 353 89.13 364.3 75.54C375.6 61.95 395.8 60.1 409.4 71.4C462.2 115.4 496 181.8 496 255.1C496 388.5 388.5 496 256 496C123.5 496 16 388.5 16 255.1C16 181.8 49.75 115.4 102.6 71.4C116.2 60.1 136.4 61.95 147.7 75.54C158.1 89.13 157.1 109.3 143.5 120.6C104.7 152.9 80 201.6 80 256z" ); } /* icon from FontAwesome */
For the record I'm awful at CSS
-
@legobuilder26 Try this, I just used a comet. I think your svg path has issues, but selector doesn’t work either.
.toolbar-command button[title="Restart"] svg path { d: path( "m 22.218088,4.7505648 c -0.409806,1.3633933 -1.209716,3.9357145 -2.160742,6.6110782 0.246277,0.07881 0.470883,0.137916 0.656084,0.198993 0.157617,0.0394 0.295533,0.157617 0.35661,0.321146 0.05911,0.157617 0.05911,0.334937 -0.0197,0.484674 -0.778238,1.487517 -2.908836,5.379099 -5.016382,7.547525 -0.0394,0.0394 -0.07881,0.07881 -0.09851,0.118213 -2.675364,2.680092 -7.0195051,2.680092 -9.6984152,0.0045 -2.6798953,-2.680092 -2.6798953,-7.023052 0,-9.705508 0.039404,-0.0394 0.078809,-0.07881 0.1182133,-0.09851 2.1629091,-2.1067581 6.0493679,-4.2375526 7.5138339,-5.0165782 0.157618,-0.078809 0.325086,-0.078809 0.478764,-0.019702 0.157617,0.059107 0.277801,0.1989923 0.325086,0.3566101 0.05911,0.1773199 0.118213,0.409806 0.197022,0.6560837 2.671227,-0.9496467 5.241578,-1.7515269 6.603986,-2.1562104 0.202933,-0.059107 0.417687,-0.00867 0.567424,0.1379155 0.17732,0.1379155 0.202933,0.364491 0.17732,0.5634834 z M 15.448604,15.25421 c 0,-2.486223 -2.019872,-4.505897 -4.505897,-4.505897 -2.4905573,0 -4.5058969,2.020068 -4.5058969,4.505897 0,2.490951 2.0153396,4.506093 4.5058969,4.506093 2.516958,0.0394 4.505897,-1.982042 4.505897,-4.506093 z m -4.505897,-1.126967 c 0,0.62062 -0.506347,1.126967 -1.1269665,1.126967 -0.6245607,0 -1.1269672,-0.506347 -1.1269672,-1.126967 0,-0.62062 0.5024065,-1.126967 1.1269672,-1.126967 0.2994735,0 0.5851555,0.118214 0.7959695,0.330998 0.210813,0.210813 0.329026,0.528019 0.329026,0.795969 z m 1.154549,2.816235 c 0,0.313265 -0.254158,0.563483 -0.561513,0.563483 -0.313265,0 -0.563483,-0.250218 -0.563483,-0.563483 0,-0.313265 0.250218,-0.563484 0.561513,-0.563484 0.309325,0 0.563483,0.281742 0.563483,0.563484 z" ); }
The starting point of your svg is
288
, which isn’t visible. You would need to adjust the viewbox to use the svg code unaltered, which is only possible with Javascript. Therefore you need to edit the svg to scale it directly, with Inkscape for example. -
@luetage Thanks for your help, I figured it out
It doesn't quite match the thickness/style/design of the other icons, but what can I say, I'm not a graphic designer.Here's my code
.toolbar-command button[title="Restart"] svg path { d: path( "m 14.032257,13.258065 c 0,0.570967 -0.461289,1.032257 -1.032256,1.032257 -0.570968,0 -1.032258,-0.46129 -1.032258,-1.032257 V 6.0322579 C 11.967743,5.4622579 12.429033,5 13.000001,5 c 0.570967,0 1.032256,0.4622579 1.032256,1.0322579 z m -6.7096759,0 c 0,3.135485 2.541934,5.677417 5.6774199,5.677417 3.135482,0 5.677417,-2.541932 5.677417,-5.677417 0,-1.75484 -0.796772,-3.325808 -2.048386,-4.3677427 -0.43871,-0.3645154 -0.499999,-1.015161 -0.135485,-1.4535481 0.364517,-0.4383871 1.016131,-0.4980645 1.45484,-0.1335485 1.703227,1.4193549 2.793548,3.5612913 2.793548,5.9258063 C 20.741935,17.532257 17.274193,21 13.000001,21 8.7258071,21 5.2580649,17.532257 5.2580649,13.229032 c 0,-2.364517 1.0887096,-4.5064514 2.7935483,-5.9258063 0.4387092,-0.364516 1.0903229,-0.3048386 1.4548389,0.1335485 0.335484,0.4383869 0.303226,1.0890327 -0.135484,1.4535481 C 8.1193552,9.932257 7.322581,11.503225 7.3225811,13.258065 Z" ); } /* icon from FontAwesome */
-
@legobuilder26 It’s appropriate for a restart button. I thought about changing the look of the command chain buttons myself, but I’m only using a single one at the moment and it isn’t confusing yet.
-
I copied and adjusted @sjudenim 's code from this post, and surprisingly it still works.
My code (just changed the svg)
#tabs-container .newtab svg path { d: path( "m 19,13 a 1,1 0 0 1 -1,1 h -4 v 4 a 1,1 0 0 1 -2,0 V 14 H 8 a 1,1 0 0 1 0,-2 h 4 V 8 a 1,1 0 0 1 2,0 v 4 h 4 a 1,1 0 0 1 1,1 z" ); }
My question is: how do I apply this to the 2nd level tab bar for tab stacks?
-
@legobuilder26 If you want to change both new tab buttons with the same CSS, then use this:
.newtab svg path { d: path( "m 19,13 a 1,1 0 0 1 -1,1 h -4 v 4 a 1,1 0 0 1 -2,0 V 14 H 8 a 1,1 0 0 1 0,-2 h 4 V 8 a 1,1 0 0 1 2,0 v 4 h 4 a 1,1 0 0 1 1,1 z" ); }
If you want to change the the 2nd level icon specifically, then use this:
#tabs-subcontainer .newtab svg path { d: path( "m 19,13 a 1,1 0 0 1 -1,1 h -4 v 4 a 1,1 0 0 1 -2,0 V 14 H 8 a 1,1 0 0 1 0,-2 h 4 V 8 a 1,1 0 0 1 2,0 v 4 h 4 a 1,1 0 0 1 1,1 z" ); }
-
@nomadic thanks for making up for my complete lack of skill with CSS selectors
-
Copy Page Address button svg. Currently not a command, but we can create a custom command chain ☛ https://forum.vivaldi.net/post/509249
.toolbar-command button[title="Copy Page Address"] svg path { d: path( "m 6.5607295,12.172913 c 0,-0.895773 0.7270223,-1.624062 1.6240636,-1.624062 h 1.6240628 v 3.248125 c 0,1.344928 1.0683301,2.436095 2.4360961,2.436095 h 3.248126 v 1.624065 c 0,0.895772 -0.728291,1.624063 -1.624063,1.624063 H 8.1847931 c -0.8970413,0 -1.6240636,-0.728291 -1.6240636,-1.624063 z m 5.6842225,3.248127 c -0.895772,0 -1.624064,-0.728292 -1.624064,-1.624064 V 8.1127543 c 0,-0.8970413 0.728292,-1.6240636 1.624064,-1.6240636 h 5.68422 c 0.895773,0 1.624065,0.7270223 1.624065,1.6240636 v 5.6842217 c 0,0.895772 -0.728292,1.624064 -1.624065,1.624064 z" ); }
-
Settings button:
.toolbar-command button[title="Settings"] svg path { d: path( "m 14.961475,5.337113 0.236573,2.076579 c 0.561144,0.220574 1.080004,0.523432 1.542863,0.892577 l 1.920007,-0.828574 c 0.19544,-0.11316 0.404573,0.02381 0.45943,0.121134 l 1.620581,2.808011 c 0.111988,0.193135 0.06969,0.346282 -0.125708,0.458289 l -1.681152,1.243432 c 0.04343,0.290306 0.06512,0.587431 0.06512,0.89029 0,0.315441 -0.02381,0.625148 -0.07087,0.926861 l 1.626292,1.310863 c 0.19544,0.113159 0.236562,0.265135 0.125708,0.458288 l -1.533716,2.657155 c -0.05601,0.09713 -0.265135,0.23316 -0.45943,0.121134 l -1.934865,-0.792003 c -0.472002,0.378287 -1.002289,0.68686 -1.574864,0.910863 l -0.281145,2.069719 C 14.896299,20.886878 14.673442,21 14.561443,21 h -3.067416 c -0.222857,0 -0.33486,-0.11316 -0.33486,-0.338269 L 10.83803,18.598883 C 10.258599,18.374881 9.7225967,18.064025 9.2460227,17.682306 L 7.3123005,18.474309 C 7.1168716,18.587469 6.9077276,18.45012 6.8528702,18.353175 L 5.3191498,15.696012 C 5.2071506,15.502878 5.2494361,15.349731 5.4448649,15.237724 l 1.6262924,-1.310863 c -0.046859,-0.301721 -0.070859,-0.611428 -0.070859,-0.926857 0,-0.302855 0.022866,-0.600003 0.065144,-0.89029 L 5.3842928,10.866278 C 5.188864,10.753118 5.1477199,10.601143 5.2585777,10.407993 L 6.8791558,7.599982 c 0.056001,-0.096 0.2651425,-0.23316 0.4594303,-0.121135 L 9.2585937,8.307421 C 9.7225957,7.93714 10.242598,7.634277 10.803743,7.413703 L 11.046031,5.338269 C 11.046031,5.113122 11.268888,5 11.380891,5 h 3.242299 c 0.22286,0 0.334859,0.11316 0.334859,0.338269 z m -1.960008,9.94747 c 1.262862,0 2.285723,-1.022862 2.285723,-2.285724 0,-1.262863 -1.022861,-2.285724 -2.285723,-2.285724 -1.262862,0 -2.285724,1.022861 -2.285724,2.285724 0,1.262862 1.022862,2.285724 2.285724,2.285724 z" ); }
Hibernate Background Tabs (svg from @nomadic's mod):
.toolbar-command button[title="Hibernate Background Tabs"] svg path { d: path( "m 20.140216,5.3051255 c 0.06229,0 0.124613,0.06233 0.112141,0.137086 l -0.02495,0.04985 -0.03742,0.124614 -0.1869,0.461064 -0.940823,2.348947 -0.211846,0.529604 -0.06233,0.174465 -0.02494,0.03742 v 0.03099 h 0.09971 l 0.199373,-0.03099 1.352046,-0.224318 c 0.09347,0 0.16823,-0.02495 0.218082,-0.03742 h 0.161994 l 0.03742,0.08723 c 0.06852,0.342695 0.124614,0.697833 0.16823,1.0592075 l -0.01247,0.01247 a 0.84736582,0.84736582 0 0 1 -0.249226,0.081 l -2.16826,0.373839 -2.243027,0.367602 -0.143284,0.02495 h -0.04985 a 0.14953515,0.14953515 0 0 1 -0.08723,-0.03742 0.09969007,0.09969007 0 0 1 -0.01247,-0.04985 v -0.09971 l 0.174466,-0.442374 0.77883,-1.9564175 0.373839,-0.909671 0.118377,-0.28037 0.02494,-0.07476 v -0.03742 h -0.01247 v -0.006 h -0.07476 c -0.49222,0.07476 -0.984439,0.149521 -1.48912,0.249226 l -0.20561,0.03742 h -0.161993 l -0.04985,-0.07476 c -0.06229,-0.286606 -0.124613,-0.560755 -0.155757,-0.847365 l -0.02494,-0.124613 v -0.04985 l 0.01247,-0.03742 a 0.24922522,0.24922522 0 0 1 0.03742,-0.03742 l 0.09347,-0.03742 0.336459,-0.06852 1.937727,-0.336459 1.67604,-0.267935 0.517143,-0.08723 0.143322,-0.02495 z m -4.741514,2.529638 c 0.07476,-0.006 0.13085,0.03742 0.155757,0.124613 v 0.05605 l -0.02494,0.137086 c 0,0.124613 -0.03742,0.311551 -0.06852,0.560755 l -0.398762,2.8037855 -0.09347,0.616833 -0.02494,0.199373 v 0.06852 h 0.01247 v 0.02495 h 0.03742 l 0.04362,-0.03742 0.224318,-0.081 0.685368,-0.299079 0.716524,-0.311513 0.230517,-0.09347 0.06229,-0.02494 h 0.09971 c 0.02494,0 0.03742,0.02494 0.07476,0.06233 0.16823,0.373839 0.317749,0.722752 0.467296,1.096588 0,0 0,0.02495 -0.02495,0.03742 a 0.94705589,0.94705589 0 0 1 -0.249226,0.143322 l -4.006297,1.744575 -0.548297,0.236753 c -0.06233,0.02495 -0.124613,0.03742 -0.149521,0.06233 l -0.04985,0.01247 h -0.01247 c -0.03742,0.01247 -0.08723,0 -0.09971,-0.02495 a 0.09969007,0.09969007 0 0 1 -0.03742,-0.04985 l 0.380055,-2.953327 c 0.06232,-0.417452 0.124613,-0.79752 0.14952,-1.077897 l 0.04985,-0.323986 0.01247,-0.081 v -0.06233 l -0.01247,0.02494 v -0.02494 h -0.01247 l -0.01247,0.01247 c -0.01247,0 -0.03742,0 -0.06233,0.02494 l -0.193138,0.08723 -1.352046,0.560759 -0.211846,0.09971 -0.07476,0.02494 h -0.09971 c -0.01852,0 -0.04362,-0.02494 -0.06852,-0.06233 l -0.249227,-0.492216 -0.205609,-0.498449 -0.01247,-0.04362 v -0.06233 l 0.03742,-0.04362 0.081,-0.062331 0.348931,-0.174465 a 131.77785,131.77785 0 0 1 4.274213,-1.844266 l 0.161994,-0.04985 0.03742,-0.02495 h 0.01247 z m -0.44237,4.5608225 -0.01247,0.01247 h 0.01247 z m -3.33339,0 c 0.08723,0 0.161993,0.08723 0.161993,0.199374 l -0.01247,0.07476 -0.04985,0.155757 -1.601272,5.077966 v 0.06232 l -0.01247,0.01247 v 0.02495 h 0.04985 l 0.08723,-0.01247 0.28037,-0.07476 2.261718,-0.542065 h 0.124613 c 0.02494,0.02495 0.04985,0.04985 0.07476,0.112139 l 0.373839,1.401893 -0.01852,0.04985 -0.03742,0.03742 a 1.2025118,1.2025118 0 0 1 -0.342695,0.143323 c -0.40499,0.124612 -1.252356,0.336459 -2.9907015,0.766368 l -3.06547,0.747675 -0.211846,0.04985 h -0.04985 l -0.02495,0.01247 a 0.21184145,0.21184145 0 0 1 -0.124613,-0.04985 0.12461261,0.12461261 0 0 1 -0.03099,-0.07476 v -0.149521 l 0.193137,-0.635525 1.308433,-4.112212 0.118377,-0.411224 0.03742,-0.11214 v -0.06233 h -0.04362 l -0.07476,0.02494 -0.267935,0.06233 -0.884749,0.224319 -0.89721,0.218082 -0.299079,0.06233 -0.081,0.01247 h -0.143285 l -0.07476,-0.09971 c -0.124613,-0.392529 -0.218082,-0.772597 -0.31775,-1.16513 0,-0.07476 -0.02495,-0.124614 -0.03742,-0.174466 v -0.124613 a 0.34268468,0.34268468 0 0 1 0.06232,-0.06233 l 0.124613,-0.06229 0.461069,-0.118377 a 184.23975,184.23975 0 0 1 4.9845045,-1.25236 l 0.71029,-0.174465 0.193137,-0.03742 0.06233,-0.01247 h 0.01247 z" ); }
Clone and Tile
.toolbar-command button[title="Clone and Tile"] svg path { d: path( "m 7,19.5 h 7 c 0.275,0 0.5,-0.225 0.5,-0.5 V 17 H 16 v 2 c 0,1.103125 -0.896875,2 -2,2 H 7 C 5.8953125,21 5,20.103125 5,19 v -7 c 0,-1.103125 0.8953125,-2 2,-2 h 2 v 1.5 H 7 c -0.27625,0 -0.5,0.225 -0.5,0.5 v 7 c 0,0.275 0.22375,0.5 0.5,0.5 z M 10,7 c 0,-1.1046875 0.896875,-2 2,-2 h 7 c 1.103125,0 2,0.8953125 2,2 v 7 c 0,1.103125 -0.896875,2 -2,2 h -7 c -1.103125,0 -2,-0.896875 -2,-2 z m 2,7.5 h 7 c 0.275,0 0.5,-0.225 0.5,-0.5 V 7 C 19.5,6.72375 19.275,6.5 19,6.5 h -7 c -0.275,0 -0.5,0.22375 -0.5,0.5 v 7 c 0,0.275 0.225,0.5 0.5,0.5 z" ); }
Close All Tabs
.toolbar-command button[title="Close All Tabs"] svg path { d: path( "m 21,16.555556 c 0,0.980555 -0.797222,1.777778 -1.777778,1.777778 h -8.519444 c -0.472223,0 -0.925,-0.186112 -1.258334,-0.519445 L 5.260333,13.627778 C 5.093639,13.461111 5,13.236111 5,13 5,12.763889 5.09367,12.538889 5.260333,12.372222 L 9.444444,8.1874995 c 0.333334,-0.333611 0.786111,-0.520833 1.258334,-0.520833 h 8.519444 C 20.202778,7.6666665 21,8.4624995 21,9.4444445 Z M 12.527778,11.669445 13.836111,13 12.527778,14.305556 c -0.258334,0.261111 -0.258334,0.683333 0,0.919444 0.261111,0.283334 0.683333,0.283334 0.919444,0 l 1.330556,-1.283333 1.305555,1.283333 c 0.261111,0.283334 0.683334,0.283334 0.919445,0 0.283333,-0.236111 0.283333,-0.658333 0,-0.919444 L 15.719444,13 17.002778,11.669445 c 0.283333,-0.236111 0.283333,-0.658334 0,-0.919445 -0.236111,-0.258333 -0.658334,-0.258333 -0.919445,0 L 14.777778,12.058334 13.447222,10.75 c -0.236111,-0.258333 -0.658333,-0.258333 -0.919444,0 -0.258334,0.261111 -0.258334,0.683334 0,0.919445 z" ); }
Entire address bar
-
am trying to change forward button on toolbar - on 4.2 i run this code
.button-toolbar.forward svg path{ d: path('M 4 7.96436996 11.9430397 15.8768549 12.6501465 15.1697482 5.43634033 7.96436996 12.6501465 0.707106781 11.9430397 0'); transform: translate(21px, 16px) scale(0.9) rotate(180deg); }
how do i change it in 5.3 - is this what the command chain does - i am totally confused/lost on this and hoping a working example will help in that confusion
-
@adacom Take a look at these help articles https://help.vivaldi.com/desktop/shortcuts/command-chains/, https://help.vivaldi.com/desktop/appearance-customization/edit-toolbars/. And check out command chain examples here ☛ https://forum.vivaldi.net/topic/63828/command-chain-recipes.
You are trying to change the forward button icon with the svg for a back button?
-
@luetage thanks will have a read
after going through the help on the links have got there - simple when you know how but my brain is not as quick as it was
-
@adacom I used inkscape to create two paths for this icon to center and rotate it. Try it out.
m 8.5898645,12.884278 7.9430395,7.912485 0.707107,-0.707107 -7.213808,-7.205378 7.213808,-7.257263 -0.707107,-0.707107
m 17.240011,12.832393 -7.9430395,-7.912485 -0.707107,0.707107 7.2138075,7.205378 -7.2138075,7.257263 0.707107,0.707107