custom icons for bookmark folders

JedynyTakiPsiak

Haj, I know there have been a few topics like this before, but I'm probably too new to the css environment to understand anything.
I wanted to ask how to make your own icons step by step like the example below with the name and default appearance of the folder to some emojis or own uploaded images 32x32 or larger

from:
to:

I know that to get the id of a folder or bookmark you have to go in C:\Users\xyz\AppData\Local\Vivaldi\User Data\Default\bookmarks.dat
and find "id": "1319"

Finally, in order to execute your css code, you need to upload your css file in the vivaldi/appearance settings and then reset the browser. But this is my all knowledge about this. I couldn't find any code that I could understand anyway or could work.
It's possible that I can't create css files properly either, because no files appear at all for me in this importing css files.

Could you please help me how to do it or share a link to a guide for amateurs like me? xd

luetage

@JedynyTakiPsiak I haven’t seen those topics. You can change the folder icons for all folders, but for each specific folder is harder. The icon selector to change the svg depends on the span of the ancestor’s next sibling. I’m sure a solution could be found, but it would probably need Javascript. Not worth the effort in my opinion. Alternatively add different emoji in front of the folder names.

nomadic

@JedynyTakiPsiak Is this one of the posts you are talking about? https://forum.vivaldi.net/post/467725

I can't check if it still works right now, but I can help out later.

luetage

@nomadic Ah, yeah. They indeed have a unique data-id, this makes it possible. And they still do, so your link and the explanation should be valid. Therefore it can be done with CSS alone.

JedynyTakiPsiak

@luetage i have this, but this folder is annoys me a bit, the more that it stretches my bookmarks bar, which I have very dynamic, because I often delete/add something, but for a few minutes/hours. That's why I wanted to shorten it all to a minimum, the shortening itself would give me the ability to move subfolders to the main tab bar. Not to mention that it will be neater and more practical.

JedynyTakiPsiak

@nomadic just from this and a few others on vivaldi.forum I tried to understand, but nothing xd

JedynyTakiPsiak

@nomadic maybe your mods can do this?
https://github.com/luetage/vivaldi_modding

Pathduck

@JedynyTakiPsiak Hi, I'd keep it simple if I were you, since you're just starting out with CSS. Messing around with replacing SVG paths is advanced stuff, not to mention actually creating working SVGs...

First, do some learning:
https://forum.vivaldi.net/topic/10549/modding-vivaldi
https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools

Then, you could for instance just hide the folder icons:

.bookmark-bar svg.folder-icon {
    display: none;
}

.panel-bookmarks svg.folder-icon,
.bookmark.manager svg.folder-icon {
    width: 0;
    height: 0;
}

Note: We have to set the width/height of the panel and manager icons, because not displaying them there will mess up the hard-coded margins for new folders.

Then you can edit the folder titles and add some favicons:

Drawback: Bookmarks bar dropdown folder icons cannot be changed with CSS, as they are not part of the Vivaldi UI. So you'll be stuck with both the folder icon and the emojis there. But this is hardcoded anyway, so nothing to be done there, even with custom SVGs.

Drawback: Emojis affect the sorting, so if sorted by title they will do so by emoji code (unicode number?) and not the first letter...

EDIT: You might want to set to the flex-gap of the label to make the title emoji align better with the other icons:

.panel-bookmarks .tree-row label,
.bookmark.manager .tree-row label {
    gap: 2px;
}

JedynyTakiPsiak

@Pathduck pls look did i do good xd

i add folder path: C:\Users\Jedyn\AppData\Local\Vivaldi\css scripts
put YOURS codes in css file
IT WORKS! very thx man

barbudo2005

@JedynyTakiPsiak

When you learn how to inspect the UI, you can use this code for a specific folder:

/*SERIES LATER FOLDER */

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

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