How to change Bookmarks Bar colour? Also, 1px border below Address Bar?

Darthagnon

Greetings, fellow Vivaldi fans.

I'm trying to merge Vivaldi's bookmarks bar with the address bar (i.e. with no dividing lines), so that it looks like most other browser's bookmarks bars.

I was wondering if any of you CSS wizards knew what CSS controls the following elements? Here's Imgur Post showing what I mean.

the colour of the Bookmarks Bar? I can customise the background of it via:
.bookmark-bar {
background-color: var(--colorAccent);
}
but anywhere with a "button", e.g. bookmark, folder, etc.) stays the same.
the 1px border below the Address Bar? See Imgur post above - the Address Bar has a 1px border-bottom that won't go away.

luetage

You need to change the button color too, eg: .color-behind-tabs-off .bookmark-bar button {background-color: red;} – and maybe you need to change the text color too then – best to do this with vivaldi color variables depending on UI settings (browser classes).

The line is an :after element: .color-behind-tabs-off.address-top .toolbar-mainbar:after {background-color: red;}

tam710562

@Darthagnon You can try

.address-top .toolbar-mainbar:after {
    height: unset;
}
.address-bottom .toolbar-mainbar {
    box-shadow: unset;
}

.bookmark-bar {
    background-color: var(--colorAccentBg);
}
.color-behind-tabs-off .bookmark-bar button {
    background-color: var(--colorAccentBg);
}

.color-behind-tabs-on .bookmark-bar {
    background-color: var(--colorBg)
}
.color-behind-tabs-on .bookmark-bar button {
    background-color: var(--colorBg);
}

Darthagnon

@tam710562 Thank you soooo much for that! It works perfectly! I was struggling for ages trying to figure that out. Heheheh... My Vivaldi now looks exactly like Opera 52. Gonna share all my CSS edits on GitHub eventually (is that okay? I will credit you). Got a bunch of others, plus comments, etc. that make Vivaldi look like a clone of Chrome (pre-70), Opera 52 and Safari.

Would be nice if some CSS edits were implemented in official Vivaldi, then we could grab all the users of those browsers

Darthagnon

@tam710562 What does this do? Tested, and whether commented or uncommented, doesn't seem to make a difference...

.address-bottom .toolbar-mainbar {
    box-shadow: unset;
}

Darthagnon

Still having a bit of trouble with the bookmarks bar and the tabs when set to "Bottom" - still displaying a 1px line between the tabs and bookmarks bar. (am using the following custom CSS, to make it Safari-style):

/* Safari-style bottom tabs and bookmark bar
Source: https://www.reddit.com/r/vivaldibrowser/comments/6p4xfy/tabs_beneath_url_bar/

Instructions: set Tabs and Bookmark Bar to appear at "Bottom" and set menu position to "Horizonal Menu" (Optional) and Vivaldi will look like Safari.

*/

/* Hide header if Menu Position is "Vivaldi Button" (still accessible via Alt key). It will still show up if set to "Horizontal Menu". 
Source: https://github.com/rafaeljvieira/vivalditricks/blob/master/Skin/Slim%20Top%20Max.md
*/
#header {
	min-height: 0 !important;
	z-index: auto !important;
}


/* Change order of Tabs, Bookmarks Bar and Address Bar, when Tabs and Bookmark Bar are set to "Bottom": */
#tabs-container.bottom {
    order: -1;
	
	/* keep the following at 0px to avoid Vivaldi spacing bug (sometimes "Remove Tab Spacing on Maximised Windows" doesn't work). This fix does not work, but code was in original snippet.
	/* space above tabs */
	padding-top: 0px;
	/* space below tabs */
    padding-bottom: 0px;
}

.bookmark-bar-top .bookmark-bar {
  order: -2;
}

.toolbar.toolbar-addressbar {
    order: -3;
}

/* Keep Tab Stacks indicator at top of tabs: Comment to switch OFF (Recommended: OFF) */
/* Switch */
.stacks-on.tabs-bottom .tab-strip .tab-group-indicator {
    bottom: 28px;
}
 /* Switch */

A Former User

@Darthagnon That's the part you didn't know what it does.

luetage

@Darthagnon Safari style address bar (not updated for 2.4): https://forum.vivaldi.net/topic/23138/modding-the-address-bar-top-window-to-get-it-to-look-like-safari-browser

Original tabs on bottom thread, updated till 2.0, css only, could still work: https://forum.vivaldi.net/topic/15834/tabs-on-bottom-for-1-8/41?page=3

Darthagnon

@potmeklecbohdan said in How to change Bookmarks Bar colour? Also, 1px border below Address Bar?:

@Darthagnon That's the part you didn't know what it does.

Thanks for the advice, but I don't think so. Tested, it did nothing. Managed to fix it by addding the following:

.bookmark-bar {
   border-bottom-width: 0 !important;
}

Darthagnon

@luetage Thank you for linking those threads, managed to fix my problem using advice from https://forum.vivaldi.net/topic/15834/tabs-on-bottom-for-1-8/44?page=3

Darthagnon

Will post a link here once I've got the final stuff on GitHub.

A Former User

@Darthagnon I'm sorry then, but for me it was necessary the part I wrote.

Darthagnon

EDIT: Solved! See here: https://forum.vivaldi.net/topic/36887/chrome-style-tabs/3

Sorry. Am back again... Do any of you nice people know how I could fix a 1px transparent gap that appears when "Remove Tab Spacing in Maximised Windows" is enabled?
All the modifications you've helped me with so far work perfectly with Vivaldi's default square tabs. When trying to implement custom CSS for Chrome-shaped tabs, I get more 1px lines.

When I combine it with Safari-style undertabs, it isn't present, but toptabs have the problem shown in the screenshots.

/* Chrome-style trapezoid tabs
------------------------------------------------------------------------------------------------------------
by Darren J. de Lima. 
28/04/2019

Reshapes Vivaldi's square tabs to trapezoids, like Chrome pre-v70.
Known bugs: it ain't perfect, clipping off the ends of tabs. Also only looks good when tabs are set to top. Also tabs don't ever overlap, like Chrome did.
*/

/* Clip rectangular tabs to Chrome trapezoids */
#tabs-container.top .tab {
	clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
}

/* Invert trapezoids when tabs set to bottom (I recommend my safari-style-bottom.css) */
#tabs-container.bottom .tab {
	clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%);
}

remove tab spacing disabled
remove tab spacing enabled