Changing icons with CSS / part II
-
@raed With fixed code block works
-
@raed well done.
I can't move the capture icon up. Check the shot, the Page Action size chanced.
Do you have Show search field at Address bar On? I do
-
@raed said in Changing icons with CSS / part II:
transform: scale(0.036,0.036) !important;
Thx.
Drag & drop, yes
-
I can't move it at the right side.
Anyway, congrats -
@raed I'll try it.
Thx -
For a seamless moving of changed icons they have to be addressed separately. For the address bar append this:
.toolbar-large.toolbar-noflex .button-toolbar
For status bar:
.toolbar-statusbar.toolbar-medium .button-toolbar
With this modification they will display correctly wherever you move them manually. The only obvious difference is, that on the actual move the icon that will be displayed is still the standard one. -
For some reason they have added a negative
transform
value in the latest stable(2.6) that reverses the panel toggle button (rather than redraw it).So if like me, you have a custom one that is affected by it, you will need to add this,
.button-toolbar.panel-toggle { transform: none !important; }
As well as another (seemingly) arbitrary name change to the security badge icons (which I believe has already been mentioned somewhere).
.addressfield .addressfield-siteinfo.certified .siteinfo-symbol, .addressfield .addressfield-siteinfo.secure, .addressfield .addressfield-siteinfo.certified .addressfield .addressfield-siteinfo.insecure
has become
.SiteInfoButton.secure, .SiteInfoButton.certified .SiteInfoButton.insecure
-
@retoree said in Changing icons with CSS / part II:
@luetage said in Address Bar at very top:
@retoree You have some nice modifications going on there. I see you're using my trash button and @sjudenim's menu button. Care to share your own creations back to the changing icons thread thread? I like what you've done with the bookmark and home buttons.
Home button:
.button-toolbar.home svg path { d: path('M25 7.813l-12.5-6.25-12.5 6.25 12.5 6.25 12.5-6.25zM12.5 3.637l8.351 4.176-8.351 4.176-8.351-4.176 8.351-4.176zM22.496 11.248l2.504 1.252-12.5 6.25-12.5-6.25 2.504-1.252 9.996 4.998zM22.496 15.936l2.504 1.252-12.5 6.25-12.5-6.25 2.504-1.252 9.996 4.998z'); }
Bookmark button:
.button-addressfield.bookmark svg path { d: path('M10.325 0.875c-1.472 0-2.738 1.197-3.325 2.447-0.587-1.25-1.854-2.447-3.325-2.447-2.029 0-3.675 1.647-3.675 3.675 0 4.127 4.163 5.209 7 9.289 2.682-4.055 7-5.294 7-9.289 0-2.029-1.647-3.675-3.675-3.675z'); } .button-addressfield.bookmark.bookmarked svg .bookmark-outline { fill: rgb(218, 93, 93); } .button-addressfield.bookmark.bookmarked:hover svg .bookmark-outline { fill: rgb(234, 64, 64); }
Also check Narsis post below for Bookmarks side panel icon.
Can't figure out how to make this two (home toolbar button and bookmark info button) work - when looking for the classes it only shows "path[Attributes Style]". I'm on the latest Snapshot - did they change something lately?
-
@raed Do you know what is the proper [title="??????????"] for Back, Rewind, Forward and Next buttons?
I can't figure it out. I had no problems with the Home and Reload buttons.
Thank you -
@brook If they are disabled, the title is on the
div.button-toolbar
s so you need a โdoubleโ selector:.button-toolbar > button[title="Go to homepage"] svg path, .button-toolbar[title="Go to homepage"] > button svg path
You may also use
[title^=""]
(starts with), that is useful e.g. for[title^="Go to previous page"]
. -
@potmeklecbohdan The "double selector" and [title^=""] did the trick!
Now I can play with this buttons.Thank you very much @potmeklecbohdan
-
how do you choose your own icons? i really love the Firefox ones, and would love to replace the Vivaldi ones with theirs.
-
@raed the same thing happened to me. try:
[title^="Go to previous page"] { margin-top: 2px !important }
-
@raed how do i scale them to fit properly? I tried
transform: scale(0.35);
but it doesnt look too good. also, some of my svgs just don't show up, especially ones in the panel
-
@raed cant you just use margin or padding to move it around?
-
@raed oh thanks man! Ive been trying to learn css and html, so this is really helpful!
-
@luetage Could you recreate the home button as a reload Vivaldi button? Because in this post the Home Button was changed to a Reload Button:
https://forum.vivaldi.net/topic/41117/reload-vivaldi-button/6
And where exactly do you insert this .css?
-
how do I change the SVG of something that has two paths? If I just replace it like normal, it only shows one of the two SVGs. I'm trying to replace the downloads button, but when I do, only the arrow shows up, not the bar.
-
@nparekh You can use
nth-of-type
or (what also I did use somewhere, becausenth-of-type
didn't work for me at that time)[d=""]
(with the path between quotes). -
@potmeklecbohdan can you give me an example? I dont know how to use nth of type.
Also, for [d=""] would i just have 1 path like [d="path"] and then put both svg paths in the quotes?