Can I change the icons?

TiKu

I don't really like monochrome icons. Everything looks like a funeral. Is it possible to customize the icons? Especially I would like to replace the folder icons in the Bookmarks panel.

luetage

@tiku So you're looking for clown fiesta icons. We can arrange that. The icons are in svg format -- you can draw your own and replace them.

https://forum.vivaldi.net/topic/20227/changing-icons-with-css-part-ii?page=1

Alternatively you can just color the fill and the outline differently.

TiKu

@luetage So I can either replace the whole svg file or I can use CSS to replace/customize the icon?
Where can I find the file that I need to replace? I've found %AppData%\Local\Vivaldi\Application\1.12.955.38\resources\vivaldi\resources\folder.png, but it is a png file and replacing it did not change anything.

And where do I have to put the CSS?

luetage

https://forum.vivaldi.net/topic/10549/modding-vivaldi?page=1

This is how you implement the css. How to replace the svg is described in the post I linked initially -- you don't need to hunt down application files. If you just want to change the color you can do something like this:

.vivaldi-tree .tree-row svg {
    fill: orange;
    stroke: blue;
}

This changes the color of all svg icons in a tree (panel and bookmarks/history site).

TiKu

I used this

.vivaldi-tree .tree-row svg {
 	fill: #E8D373;
 	stroke: #DAC262;
 }

It looks much better now, thank you.

TiKu

@luetage One more question, is it possible to adjust the folder icon in the quick launch bar as well? I cannot find its CSS class.

luetage

@tiku You can inspect Vivaldi's UI and look up the classes yourself. I'd have to do the same, and I'm not sure what a quick launch bar is.
https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools

luetage

Do you mean quick commands? That's an image with transparency. You can replace that if you want to. Not by going into the application, but by replacing it with css. Changing icons with css part I should be of help there. Linked in the OP of changing icons with css part II ^^

TiKu

@luetage Thanks, I did not know how to do this. I have been looking for the CSS class .bookmark-bar.

SilverSimon

@tiku This works nicely. Not quite so drab now. Changed mine to blue. Unfortunately it doesn't work on the bookmark bar folder icons.

luetage

@silversimon svg.folder-icon {fill: blue; stroke: blue;}

SilverSimon

@luetage Thanks, that works too, but is there any way to change the icon color in the bookmark menus?

luetage

@silversimon bookmark menu?
Provide a screenshot, I don't know what you have in mind.

SilverSimon

@luetage The icons (https://imgur.com/EMooFWP) inside the red box on the screenshot. Sorry, never posted a screenshot here...having trouble with it.

luetage

Yeah, that's a right click menu... don't know how to modify these -- good luck. But seems like it's an icon with transparency too.

SilverSimon

@luetage Thanks anyway. One more question though...Since it's possible to modify the icon colors in a tree (panel and bookmarks/history site), is it also possible to change the font size used in these areas? It seems a bit large.

luetage

@silversimon
.tree-item {font-size: 11px;}

luetage

@raed Are you sure it's a class not an id? And I can't help you with the Vivaldi button, since there is none on macOS.

LonM

@raed said in Can I change the icons?:

the bookmarks menu entry on the Vivaldi button

If you're talking about the icons in this:
0_1520600295781_0ee69908-d5c6-4eca-b9b1-d8889ed322d2-image.png

It isn't possible to change those using CSS.