Use an Icon File (ICO) for a Bookmark Folder

rodndtube

This used to be a common standard feature in pre-Chromium browsers. Needs/Wants: To easily change the property of a Bookmarks Folder Icon from plain vanilla folder icon to a icon file I use in my Windows file manager folders or websites.

I saw the clever way to add a standard windows emoji, but these emojis offered are rather limited, e.g., no flags of the world, more prominent currency symbols, etc.

Please make this possible!

rodndtube

@rodndtube, guess I need some upvotes to get any traction here. On the other hand, I like others probably don't browse the Vivaldi Forums on a daily basis.

Below is an example of icons used as speed shortcuts in my File Manager program. I'd like to mimic using most of the same icons for Bookmarks Folders on the Bookmarks Toolbar, so I am ready to point and shoot and not having to click down through the Speed Dial. Ironically, the Speed Dial does allow for assigning image files for Folder bookmarks.

barbudo2005

@rodndtube

Said:

..guess I need some upvotes to get any traction here.

You don't need any traction to achieve it. Vivaldi allows it:

Use this code:

 .bookmark-bar button.folder[data-id="32048"] svg svg path:first-of-type {
  d: path('M 12.480392,3.5196078 C 11.596104,2.6942723 10.299148,2.6942723 7.9999995,2.6942723 c -2.2991486,0 -3.5961043,0 -4.4803923,0.8253355 -0.8253355,0.884288 -0.8253355,2.1812437 -0.8253355,4.4803927 0,2.2991485 0,3.5961045 0.8253355,4.4803925 0.884288,0.825335 2.1812437,0.825335 4.4803923,0.825335 2.2991485,0 3.5961045,0 4.4803925,-0.825335 0.825336,-0.884288 0.825336,-2.181244 0.825336,-4.4803925 0,-2.299149 0,-3.5961047 -0.825336,-4.4803927 z M 11.183437,6.5851395 8.7074298,10.829722 c -0.1768575,0.23581 -0.3537151,0.412668 -0.6484778,0.47162 -0.3537152,0 -0.5895253,-0.117905 -0.7663829,-0.412668 C 6.7619965,10.004386 6.2903762,9.1200987 5.7598034,8.2358107 5.4650408,7.7052379 5.1113256,7.1746651 4.8165629,6.5851395 c -0.3537152,-0.5305728 0,-1.1790507 0.6484779,-1.2380032 0.3537152,0 0.5895253,0.1179051 0.7663829,0.4126677 0.2358101,0.4126678 0.4716203,0.766383 0.7074304,1.1790507 0.1768576,0.2947629 0.353715,0.5895256 0.47162,0.8842882 0.2358102,0.4126678 0.5895254,0.6484779 1.0611456,0.6484779 0.7074304,0.058953 1.2969557,-0.4716203 1.4148608,-1.1790507 v -0.117905 c 0,-0.2358104 -0.058953,-0.412668 -0.1179051,-0.5895256 -0.2358101,-0.5305728 0,-1.0611456 0.5895246,-1.1790507 0.471621,-0.117905 0.943242,0.2358102 1.002194,0.7074304 0,0.1179051 -0.05895,0.2947627 -0.176857,0.4716203 z') !important;
  transform: scale(1.25) !important;}

"32048" is the data-id of the folder "VIVALDI".

rodndtube

Not being a programmer, per se, could you translate this into English

In copying the code and making it work for me in different bookmark folders, which data would I need to change?

Where would the code go?

Thanks in advance!

P.S. It would great if Vivaldi could just make this more seemless for everyday users.

@barbudo2005 said in Use an Icon File (ICO) for a Bookmark Folder:

@rodndtube

Said:

..guess I need some upvotes to get any traction here.

You don't need any traction to achieve it. Vivaldi allows it:

Use this code:

 .bookmark-bar button.folder[data-id="32048"] svg svg path:first-of-type {
  d: path('M 12.480392,3.5196078 C 11.596104,2.6942723 10.299148,2.6942723 7.9999995,2.6942723 c -2.2991486,0 -3.5961043,0 -4.4803923,0.8253355 -0.8253355,0.884288 -0.8253355,2.1812437 -0.8253355,4.4803927 0,2.2991485 0,3.5961045 0.8253355,4.4803925 0.884288,0.825335 2.1812437,0.825335 4.4803923,0.825335 2.2991485,0 3.5961045,0 4.4803925,-0.825335 0.825336,-0.884288 0.825336,-2.181244 0.825336,-4.4803925 0,-2.299149 0,-3.5961047 -0.825336,-4.4803927 z M 11.183437,6.5851395 8.7074298,10.829722 c -0.1768575,0.23581 -0.3537151,0.412668 -0.6484778,0.47162 -0.3537152,0 -0.5895253,-0.117905 -0.7663829,-0.412668 C 6.7619965,10.004386 6.2903762,9.1200987 5.7598034,8.2358107 5.4650408,7.7052379 5.1113256,7.1746651 4.8165629,6.5851395 c -0.3537152,-0.5305728 0,-1.1790507 0.6484779,-1.2380032 0.3537152,0 0.5895253,0.1179051 0.7663829,0.4126677 0.2358101,0.4126678 0.4716203,0.766383 0.7074304,1.1790507 0.1768576,0.2947629 0.353715,0.5895256 0.47162,0.8842882 0.2358102,0.4126678 0.5895254,0.6484779 1.0611456,0.6484779 0.7074304,0.058953 1.2969557,-0.4716203 1.4148608,-1.1790507 v -0.117905 c 0,-0.2358104 -0.058953,-0.412668 -0.1179051,-0.5895256 -0.2358101,-0.5305728 0,-1.0611456 0.5895246,-1.1790507 0.471621,-0.117905 0.943242,0.2358102 1.002194,0.7074304 0,0.1179051 -0.05895,0.2947627 -0.176857,0.4716203 z') !important;
  transform: scale(1.25) !important;}

"32048" is the data-id of the folder "VIVALDI".

barbudo2005

@rodndtube

Said:

Where would the code go?

1.- With a text editor make a file with extension css and paste the code. You could name it custom.css (no spaces).
2.- Put the file outside the Vivaldi folder.
3.- In vivaldi://experiments/
Enable Allow for using CSS modifications.

4.- Paste the path of the folder where you put the file, here in Settings:

5.- Reload Vivaldi.

Said:

In copying the code and making it work for me in different bookmark folders, which data would I need to change?

1.- The data-id of the folder you get by inspecting the UI of Vivaldi.

2.- The svg path of the ico image you get on some web sites that convert an image to svg.

Said:

It would great if Vivaldi could just make this more seemless for everyday users.

The dilemma is the following:

1.- I want to control and change ONLY some specific parts of the UI, then the browser allows you to do it easily.

2.- I want to control and change the ENTIRE UI, then it is a bit more complicated.

Team Vivaldi chose the second one.

rodndtube

@barbudo2005, I will give this a try in the next few days. Thank you for instructions/directions.