Cant change bookmarks icons.

[Buglocker]

I made this post at the ..... wrong place and so it is unanswered.
I reproduce it here in case anyone knows anything about the subject. Thanks.

[barbudo2005]

@Buglocker Use this code:

.bookmark-bar button.folder[data-id="32036"]

{font-size: 18px!important;
font-weight: bold !important;
color: #6399eb !important;
font-family: Lato !important;
fill-opacity: 1 !important;
stroke: #faca4c !important;
fill:  #6399eb !important;
stroke-width: 1.3 !important;}

 
.bookmark-bar button.folder[data-id="32036"] svg path

{fill:  #6399eb !important;
stroke: #FACA4C !important; 
width:16px !important;
height: 16px !important;} 
   

[Buglocker]

@barbudo2005
I cant see any change with this code.
Maybe I didn't make myself clear. I try to change icon to a folder (or website) in bookmarks from vivaldi://bookmarks/ and while it shows that it changes, bookmark icon stay the same, see and the screenshot.
Thanks.

[barbudo2005]

@Buglocker Maybe what you need this extension: Bookmark Favicon Changer

https://chrome.google.com/webstore/detail/bookmark-favicon-changer/acmfnomgphggonodopogfbmkneepfgnh

[Buglocker]

@barbudo2005 Unfortunately, the extension only works for pages, not folders. I am interested in folders as the pages already have their own icons.

[nomadic]

@Buglocker The CSS that @barbudo2005 provided is near the actual solution.

It is possible to do, but it is a bit convoluted...
( **Note the PC Folder Icon )

---

Getting the data-id for the folder icon you want to replace:

Check out this post I made awhile ago.

---

Create the icon you want to use

The icon is an SVG, so the easiest solution is to replace it with an SVG. The default SVG has 2 paths so you could do a 2 color design easily.

You can see how to replace an SVG here.

Note that the SVG you want to change is actually inside another SVG.

---

The actual CSS

This will replace the first path of the SVG and hide the second:

.bookmark-bar button.folder[data-id="1645"] svg svg path:first-of-type {
  d: path(
    "M4.54 2.8a.7.7 0 00-.7.7v.68h-.68a.7.7 0 00-.7.71v7.6c0 .4.31.7.7.7h2.08a.7.7 0 00.7-.7v-1.71h6.9c.39 0 .7-.32.7-.7V3.5a.7.7 0 00-.7-.7zm.7.72h6.9c.38 0 .68.3.68.68v4.84c0 .37-.3.67-.67.67h-6.2V4.9a.7.7 0 00-.71-.7h-.66c.01-.37.3-.67.66-.67zm-.63.4c-.03.06-.04.13-.05.2.01-.07.02-.14.05-.2zm-1.43.99h2.04v.66H3.18zm0 1.38h2.04v.66H3.18zm.33 4.14a.33.33 0 110 .66.33.33 0 010-.66zM8 11.1c-.2 0-.36.17-.36.37v.34c0 .19-.13.43-.27.54l-.83.62a.33.33 0 00-.08.09c-.02.03-.03.05-.02.08 0 .02.03.04.06.05l.12.02h4.14c.05 0 .1 0 .12-.02.03-.01.05-.03.06-.05a.1.1 0 00-.01-.08.34.34 0 00-.09-.09l-.83-.62a.77.77 0 01-.27-.54v-.34c0-.2-.16-.37-.36-.37zm2.87 1.95l.03.03v.02c0-.02-.01-.03-.03-.05zm-4.36 0c-.01.02-.03.03-.03.05v-.02l.03-.03zm4.38.1l-.02.01h-.04l.06-.01zm-4.4 0l.06.02H6.5l-.02-.02z"
  ) !important;
}

.bookmark-bar button.folder[data-id="1645"] svg svg path:last-of-type {
  display: none;
}

---

Hopefully that makes sense. Didn't feel like compiling the past guides I made.

It would be possible to replace it with an image like a PNG instead, so let me know if that is something you would be interested in.

[Buglocker]

@nomadic This is a little tiring and complicated. Think of the user deleting and adding folders. So the main problem is that Vivaldi has built-in (theoretically) the ability to change icons, but it doesn't work. I prefer to wait for this bug to be fixed.

[barbudo2005]

@nomadic Do you have a better Vivaldi SVG path?

[nomadic]

@barbudo2005 I could make one that is centered in the viewBox if that is what you mean (So it is better aligned).

Do you want just the V? The V with the Rounded Cube Square? Or the V with the Circle and Rounded Cube Square?

[barbudo2005]

@nomadic Yes centered. The V with the rounded cube.

Thank you very much in advance.

[nomadic]

@barbudo2005

Here is a monocolor version:

.bookmark-bar button.folder[data-id="1645"] 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;
}

.bookmark-bar button.folder[data-id="1645"] svg svg path:last-of-type {
 display: none;
}

And a dual color (red and white) version:

.bookmark-bar button.folder[data-id="1645"] svg svg path:first-of-type {
  d: path(
    "M12.48 3.52c-.88-.83-2.18-.83-4.48-.83-2.3 0-3.6 0-4.48.83-.83.88-.83 2.18-.83 4.48 0 2.3 0 3.6.83 4.48.88.83 2.18.83 4.48.83 2.3 0 3.6 0 4.48-.83.83-.88.83-2.18.83-4.48 0-2.3 0-3.6-.83-4.48z"
  ) !important;
  fill: #ef3939 !important;
}

.bookmark-bar button.folder[data-id="1645"] svg svg path:last-of-type {
  d: path(
    "M11.18 6.59l-2.47 4.24c-.18.24-.36.41-.65.47-.35 0-.6-.12-.77-.41-.53-.89-1-1.77-1.53-2.65-.3-.53-.65-1.07-.94-1.65-.36-.54 0-1.18.65-1.24.35 0 .58.12.76.41.24.41.47.77.7 1.18.19.3.36.59.48.88.24.42.59.65 1.06.65.7.06 1.3-.47 1.42-1.18v-.12c0-.23-.06-.4-.12-.58-.24-.54 0-1.07.59-1.18a.83.83 0 011 .7c0 .12-.06.3-.18.48z"
  ) !important;
  fill: white !important;
  fill-opacity: 1 !important;
}

[barbudo2005]

@nomadic Thank you. You are so kind.

[RadekPilich]

I'm looking for something similar. I don't need custom icons, as I am quite comfortable with what emoticons offer. I only need to get rid of the folder icon completely. Is that possible via CSS on general level for all folders? Or at least for a selection of folders. I want to get rid of the folder favicon and only use the text portion of the folder, where I can use a combination of characters and emoticons as I please.

[Pathduck]

@RadekPilich Hi - to get rid of the folders on the Bookmarks Bar, use the following CSS:

.bookmarkbarItem.folder svg {
	display: none;
}

Unfortunately you cannot (yet) mod the actual bookmarks dropdown menus as they are still controlled by Chromium code, not Vivaldi UI. At least I have never found any selectors to control those.

[ladeira42]

@Pathduck where do I use this CSS code? In the resources/vivaldi folder? And which other file do I use to call it? browser.html?

[Pathduck]

@ladeira42 Hi, please read:
https://forum.vivaldi.net/topic/10549/modding-vivaldi

Do NOT change anything under Vivaldi's installation.