How to replace a toolbar button with another

Raindrops1

I am using the dark theme with customization.
Everything is fine except for the bookmark button: When I bookmark a page, a dark gray bookmark ribbon appears in the Address Bar, as shown below:

I would like to change this to pure white-colored ribbon.

I searched this forum and internet, but there is no mention about how to change buttons, or edit artwork for the button.

Note that when the page is not bookmarked, the same button shows an ribbon outline.

I like it.

It's only the artwork for the "selected" state that I want to change/edit.

Is there any built-in capability to select any button and change/edit its artwork? Or any extension that can do it?

Thanks in advance!

LonM

@Raindrops1 If you are comfortable using a modification, you can add this code:

.BookmarkButton .button-on svg path { fill: white !important; }

(Change white for whatever colour you prefer.)

You can learn more about style modifications here: https://forum.vivaldi.net/topic/10549/modding-vivaldi?page=1

Raindrops1

Thanks! This looks promising!

However, I am not a programmer.
I need more details.

I followed the instructions given on the modding help page, backed up the browser.html file and then started editing it.

I expected it to contain the code for the default configuration (like how an INI file has). But this is just an dummy html file with a structure but no content.

Where should I insert the code in the file?
My best guess is between the <body> ...</body> tags...

LonM

@Raindrops1 Hi, this should only need a simple CSS mod, so need to follow the full HTML instructions. Just this section:

Vivaldi 2.6 and above
Open vivaldi://experiments
Enable "Allow for using CSS modifications"
Open Appearance section in settings
Choose the folder you want to use
Place your CSS files inside it <- Here is where you make a css file with that line I gave earlier
Restart Vivaldi to see them in effect

Pathduck

@LonM You think someone should just remove the "Vivaldi 2.5 and earlier" section by now? As users clearly get confused... and I don't think the OP is very active.

LonM

@Pathduck Yes, I think that would be best. Maybe a new topic would be better, and archive the older one.

Raindrops1

@LonM

Since I am not a programmer, please pardon me for asking some basic directions!

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\

Can I create a new folder in this path to place the new CSS file?

Pathduck

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

As I understand, I can-

Your steps are correct. Just remember to restart the browser after doing that to see the changes. You'll have to restart after making any changes to the CSS file.

Can I create a new folder in this path to place the new CSS file?

Yes, probably, if the only folder under there is the "Application" folder.
I would recommend choosing somewhere else, like in Documents though, for some reasons:

Should you ever need to uninstall Vivaldi (for troubleshooting etc), the Program Files\Util\Vivaldi folder will be removed, likely also with your CSS folder.
Users generally shouldn't have write access to Program Files, so any changes to files will have to be done as Administrator.

LonM

@Raindrops1 I would recommend keeping the css files outside of the "Program Files" directory, but you can put them there if you wish.

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!