Solved Custom Icons for Command Chains
-
The title says it, It would be amazing if we could have custom icons for command chains. It would make it easier for me and a lot of other people to see what each icon do.
And if I posted this the wrong place, then I'm sorry, move it to the right place. -
We have released Vivaldi 6.0 for Desktops which now allows setting custom icons for Command Chains (and other buttons of the interface)! Try it out!
-
@JonasAB Already possible, look at the end of this topic ☛ https://forum.vivaldi.net/post/155310. We are changing command chain button svgs there and you can copy/paste available ones, or create your own. In fact you can replace any icon in the UI.
You aren’t the first to request custom icons for chains. The issue is adding your own image would firstly force the user to provide an image with the correct dimensions for the part of the UI where the icon is currently placed (which can change of course), and images can become invisible when changing to a different theme… There’s a reason why Vivaldi uses svgs, they can be scaled and the color can be changed programmatically. So the only chance I see to casually switch out some icons is to provide a few generic designs which can fit any number of chains (circle/square/triangle/star/etc.)
-
@luetage Where is the one for command chains? May I get a direct link to it?
-
@JonasAB At the end of the topic, e.g. https://forum.vivaldi.net/post/588758
-
@luetage Are these for premade command chains? Can I have some that work for those I have?
-
@luetage I have one to close all tabs, which should work I think. And one that opens youtube, and closes other tabs.
-
And how do I change the image, if I can?
-
@JonasAB said in Custom Icons for Command Chains:
Are these for premade command chains? Can I have some that work for those I have?
If you look at the CSS provided in the linked post, you can see a part of the selector called
title
. This is how you target the specific command chain buttons.So if you had a command chain called "
Open YouTube
" you would use a selector that looked like this:.toolbar-command button[title="Open YouTube"] svg path
And how do I change the image, if I can?
It requires a bit of work, but you can find many SVGs freely available online and adapt them to work as the icon. You just need to make sure they are only a single path ( or combine a multi-path SVG down into a single path ) and then replace the path aspect of the linked CSS with the new path data.
Here is a guide of the steps I follow to adapt an SVG: https://forum.vivaldi.net/post/389223
-
@nomadic Okay, Then I will need to struggle to fix the SVGs, but okay
-
Is it possible to use any image though?
Edit: Do I like inspect the SVG image or? I don't understand that part.
I guess I need to download Inkscape too. -
@JonasAB An SVG icon is a path. There is software to draw these paths, but simple shapes you can just code in your text editor. Before using inkscape I drew on graph paper and then used the coordinates. So no, you can’t just use any image, search for SVGs and be aware they should only have one color and one path. It’s possible to exchange the icons with Javascript and get a bit more freedom, but the CSS variant is more simple. For inspecting the UI and loading your CSS file check out the pinned topics on the modding forum board.
-
@luetage Can you please send me a link to the modding forum board? I am new.
-
@JonasAB Welcome to the Community. Here are a few links for your bookmarks that you may find useful:
-
@Pesala Thanks. Also, I think I got it working!
-
@luetage I don't understand anything about how I add it. Is there a video?
-
@luetage How do I like change the icons of the command chain things here? https://joni8829.is-cool.tech/screenshots/lUq1GUaQ
-
@JonasAB This is not a support topic, you are in the feature request section. Use the topic about changing icons I first linked, if you need help.
-
@luetage Ok
-
-
I would be happy with PNG images for icons. SVG are rather harder to create. I am not bothered with matching themes as I only use one theme all day, and one more during the early hours of the morning.
My DTP software has a button editor, which can load and edit PNG images. That would be overkill for Vivaldi. I would be happy with being able to select images from a folder. I would just store them with my custom Speed Dial buttons.
-
-
Just set to IN PROGRESS, which is good news.