Bookmark folder Icon color

Steami

I realized only now that after the last updates of Vivaldi (I don't know which one) the color of the bookmarks folders is back to gray. Some time ago I made a modification with a custom color: is this feature no longer supported?

adacom

@Steami https://forum.vivaldi.net/topic/49802/folder-icon-colour/4?_=1602088124655

Steami

Thank you adacom.
Based on what I read on that thread I modified CSS as follows:

.bookmark-bar button.folder svg {
   fill: #f9c94b !important;
   fill-opacity: 1 !important;   
}
.vivaldi-tree .tree-row svg path {
    fill: #f9c94b !important;
    fill-opacity: 1 !important;
}

However instead of getting icons with a color similar to the one in your screenshots (basically orange) I get "pale" ones, like the one I post:

What's wrong with the code?

adacom

/* folder icon colour and space to text */
.vivaldi-tree .tree-row svg,
.vivaldi-tree .tree-row[data-selected] svg,
.vivaldi-tree .tree-row[data-selected]:hover svg {  
	fill: #FACA4C !important; 
        stroke: #FACA4C !important; 
	margin-right: 5px !important;
}
.vivaldi-tree .tree-row svg path {
        fill-opacity: 1;
}

this is mine - maybe more than you want as it sets a margin/space but should give you ideas

Steami

@adacom

Thanks, I found the issue: in the first line of my code "path" was missing : now evrything is ok

barbudo2005

@adacom Could be possible to have this modification for a specific folder?

nomadic

@barbudo2005 Yes it is!

individual folder colors.png

Here is the modified CSS:
*** Note the addition of [data-id="..."]***

/* folder icon colour and space to text */
.vivaldi-tree [data-id="2583"] .tree-row svg,
.vivaldi-tree [data-id="2583"] .tree-row[data-selected] svg,
.vivaldi-tree [data-id="2583"] .tree-row[data-selected]:hover svg {
  fill: #faca4c !important;
  stroke: #faca4c !important;
  margin-right: 5px !important;
}
.vivaldi-tree [data-id="2583"] .tree-row svg path {
  fill-opacity: 1;
}

You just need to figure out what the data-id for the folder you want to change and then replace the numbers in the CSS above.

A Former User

@nomadic …and if modifying several folders this way, you can make use of variables (though there could be some problems with the unmodified svgs).

barbudo2005

@nomadic Thank you.

I want a different color for a folder in the bookmark bar, but this code not works:

.bookmark-bar button.folder svg
  
{fill: #828282 !important;}
 
.bookmark-bar [data-id="17195"] button.folder svg
  
{fill: red !important;}

luetage

@nomadic Damn, help with gifs. The only thing more advanced you could try is inviting the person to a live stream of the modding session and then uploading it to youtube later

A Former User

@barbudo2005 The [data-id] is set on the button.folder so you don't add it before it (nor after), but directly to it → button.folder[data-id="17195"]

Untested though. Just looking at your screenshot.

barbudo2005

@potmeklecbohdan Thank you.

But this code not works:

.bookmark-bar button.folder [data-id="17195"] svg
  
{fill:  #3f81ea !important;}

nomadic

@barbudo2005
@potmeklecbohdan said in Bookmark folder Icon color:

directly to it → button.folder[data-id="17195"]

Since the data-id is on that same element that button.folder is referencing, you need to attach it directly to it (no space).

Try this:

.bookmark-bar button.folder[data-id="17195"] svg {
   fill:  #3f81ea !important;
}

nomadic

@luetage Haha, from my perspective, adding the gif was just me being lazy because I didn't want to describe how to find the data-id. With the program ScreenToGif, it is pretty easy to make a gif.

Live streaming me making a mod, would just be me looking on StackOverflow for the billionth time how to do something simple in JavaScript

barbudo2005

@nomadic Thank you.

The CSS codes are more fussy than women. :face_with_stuck-out_tongue_winking_eye: :face_with_stuck-out_tongue_winking_eye: :face_with_stuck-out_tongue_winking_eye:. No offense.

luetage

@nomadic Sorry for my late reply, was on stackoverflow.