Changing icons with CSS / part II
-
@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?
-
@burbuja Great, I dont. It works. Thank you!
-
I find this order more logic:
button.button-toolbar.back { order: 1; } button.button-toolbar.rewind { order: 2; } button.button-toolbar.reload { order: 3; } button.button-toolbar.next { order: 4; } button.button-toolbar.forward { order: 5; } button.button-toolbar.home { order: 6; }
-
@raed Indeed, it looks better. The original arrow is too big.
-
My own reload button, inspired by you:
button.button-toolbar.reload svg path { d: path("M 4.8051075,12.752007 C 4.9616095,9.6188998 6.8053723,6.5162891 9.9437768,5.2746979 14.168552,3.6033253 19.053931,5.7190012 20.725304,9.9437763 22.396676,14.168551 20.281,19.053931 16.056225,20.725303 13.883484,21.584866 11.738591,21.456214 9.7170543,20.580762 L 11.185489,18.75127 3.4561349,18.869667 7.7599627,25.425641 8.6227394,23.107682 C 11.149659,24.201998 14.282768,24.358499 17.059048,23.260168 22.732318,21.015754 25.504583,14.614222 23.260169,8.9409529 21.015754,3.2676842 14.614222,0.49541735 8.9409529,2.739832 4.3540548,4.5544648 1.7329938,9.2209816 2.0288268,13.850338 Z"); }
-
@raed I remove these in inkscape svg editor
-
Would somebody know, how to change the color of focus in spatial navigation?
Sorry I dont know where can I create a new Topic in English
-
@raed burbuja is talking about spatial navigation, has nothing to do with buttons. I don't know the answer to that, since spatial navigation is happening on the webpage, not the Vivaldi UI
-
@luetage I'm pretty sure there used to be a class associated with the spat nav - that would be easy to change with CSS. But looking at it now, there's no indication on a page as to how a link is highlighted, and it definitely doesn't happen in the browser.
-
Anyway, I don't know why we get a myriad of off-topic posts here. Please only post your paths for css icons here, or questions about changing icons.
@burbuja You can post modding related questions on the modding forum board, this is the same forum board we are on right now. Just click "Modifications" on the top of this site and you will be taken to the subforum, where you can open a new topic.
-
@raed Thank you, but I meant Shift + arrows -- Spatial navigation in the page, instead of with the mouse.
-
My notes-icons:
button.notes svg path { d: path("M 1.2120945,23.694384 C 1.3947694,23.328881 18.08458,1.6554648 18.08458,1.6554648 L 24.717642,6.0722453 19.666588,12.361451 C 15.094131,9.8168399 5.783758,21.6647 1.2120945,23.694384 Z"); fill: none; stroke: var(--colorAccentBg); stroke-width: 2px; }
-
New sync icon:
at tab-bar:button.button-tabbar.synced-tabs-button svg.sync-in-progress path { d: path("M 15.875,7.3541667 10.509434,4.7083337 V 6.4722224 H 3.8024807 V 8.2361111 H 10.509434 V 10 Z M 0,2.8562499 5.3655634,0.21041686 V 1.9743055 H 12.072516 V 3.7381942 H 5.3655634 V 5.5020834 Z"); }
at status-bar:
svg.sync-in-progress path.cloud { d: path("M 15.875,7.3541667 10.509434,4.7083337 V 6.4722224 H 3.8024807 V 8.2361111 H 10.509434 V 10 Z M 0,2.8562499 5.3655634,0.21041686 V 1.9743055 H 12.072516 V 3.7381942 H 5.3655634 V 5.5020834 Z"); }
There is someting wrong with the tabbar-sync-icon. Anybody could help me?
-
History button:
button.history svg path { d: path("M 13,0.9106789 13.055917,12.90177 20.439282,20.07608 M 25.089321,12.999998 C 25.089323,19.676746 19.676749,25.08932 13,25.089321 6.323251,25.08932 0.91067728,19.676746 0.91067894,12.999998 0.91067944,6.3232516 6.3232525,0.91067942 13,0.9106789 19.676747,0.91067945 25.089321,6.3232517 25.089321,12.999998 Z"); fill: none; stroke: var(--colorAccentBg); stroke-width: 2px; }
-
Download button:
button.downloads svg path { d: path("M 10.513672 3.1113281 L 10.513672 11.21875 L 5.5410156 11.21875 L 13 20.949219 L 20.458984 11.21875 L 15.486328 11.21875 L 15.486328 3.1113281 L 10.513672 3.1113281 z M 3.7832031 23.367188 L 3.7832031 26 L 22.216797 26 L 22.216797 23.367188 L 3.7832031 23.367188 z"); fill: none; stroke: var(--colorAccentBg); stroke-width: 2px; }
-
Bookmarks button:
button.bookmarks svg path { d: path("M 7.2551811,4.4428808 C 3.4767989,4.442669 0.41376195,7.5057056 0.41397353,11.284088 1.6670974,18.420737 9.3704073,18.256107 12.996794,21.55712 17.316663,18.230969 25.420006,16.756003 25.586026,11.284088 25.586238,7.5057056 22.523201,4.442669 18.744819,4.4428808 16.42319,4.4454766 14.261329,5.6253869 13.003206,7.5765638 11.743849,5.6234755 9.5790862,4.4433001 7.2551811,4.4428808 Z"); fill: none; stroke: var(--colorAccentBg); stroke-width: 2px; }