Chromium Style "Other bookmarks" Bookmark Bar Folder

[nomadic]

What?

Recently found the neglected SubReddit /r/VivaldiCSS and saw this post asking for help on adding the "Other bookmarks" folder option from Chromium to Vivaldi's bookmark bar. I wrote up a quick mod for it there, but decided it was worth posting here as well for better visibility.

Have the feeling that I might have written something like this before, but couldn't find it

---

Demo

---

Installation

• Look at the Pinned Posts in the Modding Forum here to see how to install a CSS mod
• For this mod to work, you also need to create a bookmark folder in the first/leftmost position of the bookmark bar

---

Configuration Options

**As stated above, you need to have the first item in the bookmark bar be a folder. You can name it whatever you want, but you will need to adjust the width with a CSS variable.

• --overallFolderWidth
  • This is the width of the Other Bookmarks folder. By default it is set to 125px to fit the text "Other Bookmarks"

---

CSS

/* == Chromium Style "Other bookmarks" Bookmark Bar Folder Mod - made by nomadic on the Vivaldi Forums == */
/* Moves the first bookmark bar folder to the far right side. Requires the first bookmark bar item to be a folder */
#browser {
  /* You may need to adjust to fit the entire text "Other bookmarks" */
  --overallFolderWidth: 125px;
}

/* Push the first folder to the far right and increase its width */
.bookmark-bar button.folder:first-of-type {
  max-width: var(--overallFolderWidth);
  position: absolute;
  right: 0;
  height: 100%;
  z-index: 1;
}

/* Border in front of folder icon */
.bookmark-bar button.folder:first-of-type::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 20%;
  width: 1px;
  height: 60%;
  background-color: var(--colorFgFadedMost);
}

/* Leave space on the right for the folder */
.bookmark-bar .observer {
  padding-right: var(--overallFolderWidth);
}

---

Edits:

• (June 26th, 2023)-1 - Mod created.
• (June 26th, 2023)-2 - Simplified to one option that better matches the Chromium implementation.

[Pathduck]

@nomadic Well done

I remember some topic - "Wher iz Oter Bookmarks Vivaldis pls TIA"?
I had to ask - "Sorry, but what's Other Bookmarks?"

I don't see the point of this need some users have to make a browser exactly like every other browser, like having "Other Bookmarks" is some kind of browser "Standard"...

[nomadic]

@Pathduck Yeah, I was convinced it was equivalent to the "More bookmarks" chevron button and wrote 2 different options before I figured it would be a good idea to actually open Chrome to check. Even went through the trouble of redrawing the bookmark folder icon as a single path (original is 2 paths) with both stroke and fill so I could override the single path chevron icon.

Imagine my surprise (after finally figuring out how to even show the button) when I saw that the chevron actually appeared concurrently with the "Other bookmarks" folder

Don't really see the benefit of having both at once, but if 2 people in some obscure SubReddit both asked for it, then maybe there are countless Chrome refugees that couldn't use Vivaldi because it lacked their favorite feature

[Pathduck]

@nomadic I couldn't even figure out what the "Other Bookmarks" bar was for, and I've never seen it in any browser I've used. Of course, I've never used Chrome and in Firefox I never saw it (but it's there).

Then again, I don't even use the bookmarks bar.

It's Chrome's dumbed down bookmarks management, either you place bookmarks in the bar, or if you can't think of any other place and don't care about organising bookmarks, it goes in "Other"... My guess is Firefox copied this from Chrome or maybe the other way around.

Apparently it only shows if there's actually bookmarks in this special folder.
You just know some users going to go "in Chrom it no show if empty pls fix"
So - the question is: Can you code that?

[nomadic]

@Pathduck said in Chromium Style "Other bookmarks" Bookmark Bar Folder:

Apparently it only shows if there's actually bookmarks in this special folder.
You just know some users going to go "in Chrom it no show if empty pls fix"
So - the question is: Can you code that?

Technically possible, but would have to break out good old JS to do it. If you ask me, I say that is overkill, so don't give anyone any ideas

[Denebian]

I came here hoping to find "Other bookmarks" a feature I use regularly on Chrome, Brave, Edge and that I find very helpful in that it's always available from the bookmarks bar.

Instead what I see is mockery from the moderator who says

• I've never used Chrome
• I have no idea what this feature is
• It's probably dumb Chrome users not having the ability to use our infinite dimensional bookmarking system
• But I've never used Chrome and feel no reason not to dismiss out of hand these people's needs or wants or even try to understand the benefits and value of this
• lol lol lol can you code that for them laughing with tears emoji laughing with tears emoji

Hey, is this what I can expect from Vivaldi? Or just the forum?

Anyway, I'll go back to googling every single damn aspect of Vivaldi that it felt forced to change.

In the meantime I am confused just why Vivaldi decided to base itself on Chromium given the disgust the developers and community clearly feel for all other browsers, especially Chrome.

[lachlanert]

@nomadic Hi, I'm having a problem where this css hides the "accordion" arrow normally on the bookmarks bar, so if I don't have Vivaldi fullscreen (if I'm using splitscreen, for example) I can't see the rest of my bookmarks bar without manually going to vivaldi://bookmarks
In your demo the arrow is there, and I haven't modified the css you wrote. Is there anything I could do to try and fix the issue on my end?

[nomadic]

@lachlanert Hmm, I just checked on 6.4.3160.44 and I couldn't get the overflow bookmarks bar arrow to disappear.

What OS and version of Vivaldi are you using?

And did you change the --overallFolderWidth variable for the different folder name? In the GIF above, I didn't adjust it, but the arrow still showed up and worked. I tried putting some bad values in, but still couldn't get the arrow to not show up.

[lachlanert]

@nomadic I am also on version 6.4.3160.44, OS is Windows 10 build 19045.3693
The issues persists when named "other bookmarks" as well as with changing the folder width.

[nomadic]

@lachlanert Edit: I think I just figured out the problem. It looks like you only copied the first part of the CSS necessary for this mod. You only copied the visible portion, but there is more hidden by the scrolling container. There is a button on the top right of the code block that will copy the entire contents of the code block to your clipboard.

---

Original post:
Was hoping it was an OS difference, but I am on the same build of Windows 10.

Are you running any other CSS mods? If so, try running just this mod on its own to see if one of the others is interfering.

---

You can also check to see if the arrow is actually there and potentially see where it is by inspecting the UI. Instructions here (but note browser.html changed to window.html).

One you have the devTools window open for the UI, you can go to the Elements tab and press Ctrl + F to search for the text "chevron". There should be a result among the bookmark buttons. If you hover the cursor over the element with the chevron class, it should highlight where it is in the UI.

[lachlanert]

@nomadic Jfc I don't know how I missed that. Yeah, having the entire code actually in the damn file fixed it , thank you
Sorry for any headache I may have caused!

[nomadic]

@lachlanert No worries. Always fun trying to figure out these sorts of problems

I honestly should have noticed it sooner, since you were missing the vertical divider in your screenshots, and you said you hadn't modified the CSS.