Option for Colored Bookmark Folders

[FatihSultan]

In my bookmark panel color folder option allow. Please Vivaldi please!

[nmcguire722]

This is one of my major pet peeves on the bookmark. Below the bookmark bar all the icon are grey. This makes the worthless for finding folder or other items.

[SergeiMus]

Yeap, please, devs! Grey folders are boring.

[Wolfee]

Summary: I would like the option to have colored folders in the Bookmarks Bar. Just primary colors (Red, Green, etc).

Several Updates ago, I lost the ability to change the top-bar (address bar?, not sure what you call it). A couple of guys here in the forum helped me cobble it together. It was fun while it lasted. But anyway,...

I respectfully request to the Vivaldi Dev-gods to be able to change colors of the Bookmark folders on the Bookmark Bar. I think you can in CSS coding, but for those of us that are coding challenged, this is not an option.

And I also read that in the changing of System colors, it is possible for that the Bookmark folders COULD be rendered invisible, and that would be too scary for some of us; klaxons blaring, panic mode!

I realize you have bigger issues to address, so I don't expect this to make the List anytime soon. But I appreciate your time and attention today.

[rodndtube]

I will take this a step further. The ability to add an icon to a folder would be outstanding. Discriminating between nameless grey folders is difficult and we all use colors and shapes to take us to bookmarks. Can you imagine all bookmarks as colorless bookmark icon shapes? Of course not!

Please add the ability to iconize bookmarks (this was a standard capability in the long ago days of Firefox, etc.).

[leeuniverse]

I would just like at least NORMAL "Colored" Bookmark folders... I mean good heavens!!!

I mean our current bookmark folders are just TERRIBLE...!
Anyone that does Graphics or Web Design (like me) have heart attacks looking at the text/folders/and icons being NO DIFFERENT from each other, having ZERO CONTRAST.

BOTH the Folder Icons and the "default" Site Icons in the Bookmarks should be "colored", having a color contrast between the Icons and the Text to be easier to see and read.

For example, compare the below images... One good, how the Folders SHOULD look, the other is terrible.

This is the CODE I found on the forum... Only problem however is folder icons in a "dropdown" folder aren't changed. One post I read they are in the browser "Engine" and can't be changed.
I don't understand the dev's... A great browser with this big of a messup.

::-webkit-scrollbar-thumb {
    border: solid #000000d1;
    background-clip: padding-box;
    background-color: var(--colorBorderIntense);
    border-radius: var(--radiusHalf);
}
#browser.mac ::-webkit-scrollbar-track, #browser.simple-scrollbar ::-webkit-scrollbar-track {
    background-color: #0074d7b0;
}

@import url('common.css');
svg.folder-icon path {
d: path("M6.16,2.5H1.6A1.12,1.12,0,0,0,.5,3.63v8.75A1.12,1.12,0,0,0,1.6,13.5H14.4a1.12,1.12,0,0,0,1.1-1.12V5.76a1.19,1.19,0,0,0-1.1-1.23H7.76Z") !important;
}

/* CHANGING COLORS */

svg.folder-icon svg path {
fill: rgb(255 192 0) !important;
fill-opacity: 1 !important;
stroke: rgb(0, 0, 0) !important; /* OUTLINE */
stroke-width: 1.0 !important;
stroke-opacity: 1 !important;
}

The good thing at least is with the above Code I don't have to "always" look at those terrible Folder Icons in the Bookmark Bar or sidebar.

Common Vivaldi Dev's, whoever's "personal preference" is not what's best for the MASSES.
This is like the nutball who messed up Windows 11 with their "personal folder theme" and worst Start Menu ever, even worse than 8's.

Oh, and BTW, for those who don't know, either create a Custom.css per HELP instructions or just add the above code to the common.css file at the bottom of that file each update.

[barbudo2005]

@leeuniverse

For this :

Use:

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

{font-size: 18px!important;
font-weight: bold !important;
color: #6399eb !important;
font-family: Lato !important;}

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

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

For this (Folder):

Use:

  .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;}

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

For this (bookmark) :

Use:

.bookmark-bar button[data-id="38354"]

{font-size: 18px!important;
font-weight: bold !important;
color:  #ca000b !important;
font-family: Lato !important;}

[leeuniverse]

@barbudo2005 ... Thanks barbudo... However, how do I find the Data ID # that effects ALL of the folders/sections? When I "Inspect" I'm just finding the ID for "each single element"

For example, in your first example, I can change the color of the folder and the name of just ONE of the folders in my Bookmark Bar. They ALL are "not" changed into the same color and formating?

[barbudo2005]

@leeuniverse

Each folder or bookmark has its own ID, there is no ID for all the folders or bookmarks.

You have to assign the color to each one separately, which of course is better.

[barbudo2005]

This post is deleted!

[leeuniverse]

@barbudo2005 ... LOL, thanks. That's totally NOT "practical" though.
Me has a MILLION Bookmarks... hee hee

I'll just stick with the code I found above on the forum. I'll just have to suffer that the Folders in "dropdowns" won't be colored until hopefully the devs finally fix this problem.

[barbudo2005]

@leeuniverse

Sorry, if you use the code without the ID all the folders will color:

.bookmark-bar button.folder

{font-size: 18px!important;
font-weight: bold !important;
color: #6399eb !important;
font-family: Lato !important;}

[puppyeyes]

Honestly if we could even add change the folder icon to emojis that would be amazing

[sphera]

the same thought ! Second thought -- I decided to use the forum search

[leeuniverse]

Hey all...
So just checking back in to see if anyone has figured out how to "Color" the BookMark "Folders" Icon as well as the Default "Bookmark Icon" color?
Specifically, I'm speaking about the ones per the attached screenshot below.

I CAN color the Folders in the Bookmark "Bar", just not the folders in the "dropdown" below the bar as you can see above in this post: https://forum.vivaldi.net/post/576752
The Folders ARE colored in the Bookmark Manager, just not in dropdown.

Thanks

I really wish the Dev's would "restore" Colors for things for those of us who like them.
Most of us don't actually like the "ghost" icons in which there's no "contrast".
It's NOT Natural....

My folder icons would be the perfect style, and the Bookmark Icon could just use some "light" color so as to contrast the Text from the Icon. BAD Development to make everything the same color.