How to replace a toolbar button with another

Raindrops1

Thanks a lot! This worked like a charm!

BTW is there is a grand listing of similar tweaks?
What are the different things I can customize?

I am looking for a cookbook with similar recipes...
Now that the CSS file is already created, all I have to do is to copy-paste similar statements in it to achieve various tweaks, right?

LonM

@Raindrops1 Yes, once you learn how it is quite easy to make CSS tweaks. If you learn how to use the inspector, it has an editor on the side that makes it easy to test out new CSS before you add it to your custom file.

You can learn how to open the inspector here: https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools

There is also a whole sub-forum for modifications, you could go here, and sort it by "most votes/views" to see other popular changes. https://forum.vivaldi.net/category/52/modifications

Raindrops1

True!

Teach a man to fish and he is set for life!

Dancer18

The solution for lighter color of the bookmark button requires custom.css.

In other cases there is now since the Vivaldi update to 5.7 the possibility to use own buttons in the format 28x28px bpm or svg.
Via Settings, >Themes >Editor >Buttons

I use this new option for a few panel buttons.

Raindrops1

@Dancer18

I have the latest Vivaldi, but my theme editor does not have a button selector/editor.

Where is this section/editor located?

My editor has three tabs: Colors, background and Settings.
None of them have any button-related controls.

Dancer18

@Raindrops1 Oh, you first have to activate it in
vivaldi:experiments:

It is the 2nd item - enable custom buttons

Warning: Don't activate the 4th item (browser windows portal), it might damage your profile.

Raindrops1

Oh yes! I can see the Buttons tab now.

I intend to make some svg images using InkScape and try this feature.

I will also try making a 28x28 px icon with Greenfish.

Thanks for the tip!

BTW the choice of icon size is a bit odd: It is usually 24x24 px and 48x48 px.

[EDIT] There are many batch icon extractors that find icons used by other applications. We can reuse these icons, either directly or after modifying them using an icon editor (e.g. Greenfish).

Dancer18

@Raindrops1 Yes. I had trials behind me before via custom-css, also with svg format, where the displayed size was even too big.
Even now, but with bmp format, I had to make the actual icon much smaller (about 18x18px) and embed it in a bigger background image (28x28px) like this one:

I left a few buttons, changed 4:

Raindrops1

Well, the actual buttons in Vivaldi look too tiny to be even 24x24 px!

But then if your background is 28x28 px, then effectively the icon size is also 28x28 px, even if your image is smaller!

Why did you make a background for the button? When you made the image edge-to-edge, was it getting cropped when you put in Vivaldi?

BTW your icons look nice!

Does the forum have a repository to share such user-generated resources?

Dancer18

@Raindrops1 said in How to replace a toolbar button with another:

Why did you make a background for the button?

Because I used .bmp files. Usually I work with .png or jpg format, but I followed the advice in description to use .bmp or .svg.
The .bmp file had transparent background when saved. But somehow it got black automatically.
So I gave it the bg color of my theme.

(I just found out that .png files with transparent bg are accepted but aren't sizeble.)

To avoid the special bg color setting you better use .svg.
However, also there you might have to experiment with the size, as I wrote above already.

Raindrops1

@Raindrops1 said in How to replace a toolbar button with another:

As I understand, I can-

Create a text file with .css extension,
Insert the line you shared earlier in this file
Save it in a folder
Select that folder in the Tools > Settings > Appearance > Custom UI modifications?

Secondly, I would like to keep this new folder with the Vivaldi installation, which is located here:
C:\Program Files\Util\Vivaldi\

I went ahead with that same path, and initially I thought that it worked. But after a day, I realized that this crashes the bookmarking system: I cannot create a bookmark or clear a bookmark easily.

So I tried to move the folder to a writable location. But it still breaks the bookmarking.

How do I make this work?

Thanks in advance!