🔴🔵🟡🟢 Automatic color for Active tabs & Active tab stacks using favicon. 🟢🟡🔵🔴
-
The window titlebar has the active tab color.
Use this code:
#browser:not(.tabs-top) #header {background-color: #414141 !important;}
-
There is an image in my most recent reply, but here is another.
And the css change for the browser titlebar worked great, thanks!
-
My preference is to have the custom color surround the entire tab group, including the accordion control.
It is not possible because there is not a selector that includes the tab group AND the the accordion control.
Strangely in the image appears border in the tab group + toggle-arrow and toggle-arrow :
Do you have another CSS?
In relation to the active tab group the code works for me:
-
I do not have other mods.
I have only the one css.
The only other entries in the css are for command-chain icons.Could it be the theme? I am using the standard 'Dark' Vivaldi theme.
I inspected the html of the tab bar, and the border around the tab group is drawn with an svg.
In the debugger I can change the color by adding a style attribute to the rect:
<rect style="stroke:#FFFFFF" class="stack-frame" width="100%" height="100%"></rect>
However, there is NO EFFECT when I try and change this svg with the css:
.svg-tab-stack rect { style: "stroke:#ffffff" }I am very much a novice with respect to css, and especially Vivaldi modifications, so thanks again for your guidance.
-
Do the following:
1.- ACTIVE TAB STACK
Inspect this image:
Not the selector .tab-header but the previous in hierarchy:
Click in the selector that begins with #tab:
And post an image like mine.
Then go the right of the Dev tools:
And find a rule that contains border.
That is to understand why has borders if the rule we are using is:
[id*= "tab"].tab.tab-accordion:has(img[srcset*="vivaldi.net"]):not(.active) {border: 1.5px rgba(72, 107, 228, 1) solid !important;}Is for non active tab stack.
And copy the rule complete with the right button of mouse (context menu) and post it:
2.- INACTIVE TAB STACK WITH BORDER IN THE TAB AND THE CONTROL
Inspect this image:
In the same way as described above and post images and rules:
2.1.- THE TAB
2.2.- THE RECTANGLE THAT INCLUDES THE TAB AND THE CONTROL
-
1.- Don't use the "debugger". Always use the custom.css file.
2.- CSS is hierarchical. You always have to the look for the selector leftmost that when you hover over it with the cursor displays the image you are interested in.
3.- To restart Vivaldi faster use this:
In settings, Homepage :
Put vivaldi://restart in Specific Page.
Add this code in custom.css to transform the Home icon to Restart icon:
button.ToolbarButton-Button[title*="Go to homepage"] svg path {d: path('M9 12l-4.463 4.969-4.537-4.969h3c0-4.97 4.03-9 9-9 2.395 0 4.565.942 6.179 2.468l-2.004 2.231c-1.081-1.05-2.553-1.699-4.175-1.699-3.309 0-6 2.691-6 6h3zm10.463-4.969l-4.463 4.969h3c0 3.309-2.691 6-6 6-1.623 0-3.094-.65-4.175-1.699l-2.004 2.231c1.613 1.526 3.784 2.468 6.179 2.468 4.97 0 9-4.03 9-9h3l-4.537-4.969z'); transform: scale(0.95) !important; transform-origin: 157% 154% !important;}
Play with "0.95", "157" and "154" to have the same size and position to the others icons.
-
For someone who knows nothing about tech language. I understood nothing.
-
Follow the instructions in this post:
https://forum.vivaldi.net/topic/58450/multiline-tabs/6
(Text editor: Use Notepad. Save as .txt and then change the extension to .css)
This instructions by @DoctorG are also good:
https://forum.vivaldi.net/topic/80544/white-ring-around-tab-site-icon/3
-
I can't get this code to work at all - is it still applicable to the current Vivaldi version?
Edit: got it to work, but there are issues.
-
All stacks show in the active stack's color (e.g. if I have 3 stacks and one of them is Youtube, when Youtube is active, all 3 stacks have a red border)
-
The active stack/tab has a background color, not only a border - is it supposed to have a background or should it only have the border?
-
There's a colourful line between the main bar and the bookmarks bar. And a colourful line in the bookmarks bar between individual bookmarks and the first folder.
-
-
@BlackSwan09 Said:
is it still applicable to the current Vivaldi version?
Yes, it is.
Please give images of the 3 issues and the code you are using.
-
Ah and the + icons have a messed up background as well.
I also prefer to have Accent on Window turned on if it's possible to work with it as well.
-
@BlackSwan09 Said:
I also prefer to have Accent on Window turned on if it's possible to work with it as well.
Yes it is, only use this codes:
.tab-position.is-substack [id*= "tab"].tab.active {border: 2.5px var(--colorAccentBgDarker) solid !important;} #tabs-container .tab.active {border: 2.5px var(--colorAccentBg) solid !important;}1.- "All stacks show in the active stack's color (e.g. if I have 3 stacks and one of them is Youtube, when Youtube is active, all 3 stacks have a red border)"
Very strange since they are not active. Please Inspect the 2 tab stacks not active and post a image of the code containing a border.
2.- "The active stack/tab has a background color, not only a border - is it supposed to have a background or should it only have the border?"
The common.css use this code:
So add the background color and color of text you prefer for the active tab and active tab stack.
-
I tried this as well, but still can't get it to work. Now all background tabs have the accent (of the current tab) background (not only stacks) and only the active tab has the accent border.
However, I played around with CSS myself (I suck at it but can sometimes figure it out) and got this result which is likeable enough:
The only thing I can't figure out is how to also colour the inactive stack (Vivaldi forums - in green) in its own blue accent colour (not Youtube's red). I can't find the right selector for an inactive stack by inspecting the Vivaldi tab. Do you have any ideas?
Edit: Oh I understand now from your first post that it's probably not possible to automate inactive stack colours.
-
How is this thing installed? Sry if its mentioned somewhere but i can find, nor i can't figure it on my own.
-
Look this post for instructions:
https://forum.vivaldi.net/topic/61571/generated-color-for-tabs/4
-
@barbudo2005 As far i know i'v had Vivaldi setup correctly. (other css mods works fine). Usually post like this have fewer "code windows" and i know what vivaldi settings to change, what code to copy to css file and what can i change in the code to customize it.
This post has like 6 code windows and no description what to do with each (im clueless). I couldn't get this mod to work no matter what i tried. (but it may be caused by the fact i missed some pice of information cause of my bad English +I started using vivaldi just recently, i don't understand Javascript nor html or whatever the "css" files are written in) -
Copy to your custom.css this code:
.mainbar, .toolbar, .bookmark-bar, .toolbar-extensions, .bookmark-bar-top, .bookmark-bar, .bookmark-bar button, .toolbar-extensions, button.ToolbarButton-Button, .button-toolbar {background-color: #414141 !important; color: #d8d8d8 !important;} .address-top .mainbar > .toolbar-mainbar .toolbar-extensions:after, .address-top .mainbar > .toolbar-mainbar:after, .bookmark-bar:after, .bookmark-bar-top:after, .bookmark-bar button:after, .bookmark-bar.default:after, .observer:after, .bookmark-bar, .mainbar:before, .toolbar-mainbar:before, .toolbar-extensions:before {content: unset !important; border: 0px #414141 solid !important; background-color: #414141 !important;} .address-bottom #tabs-tabbar-container.top, .address-bottom-off #tabs-tabbar-container.top, .address-top-off #tabs-tabbar-container.top {border-bottom-width: 0px !important;} .tab-position.is-substack [id*= "tab"].tab.active {border: 2.5px var(--colorAccentBgDarker) solid !important;} #tabs-container .tab.active {border: 2.5px var(--colorAccentBg) solid !important;} -
@barbudo2005 pretty please, could you provide css for grabbing colour from the favicon and using it for the tab background limited to URLs with some specified substring? in my case, I want it for tabs, not tab stacks.
-
1.-Tab active or inactive?
2.- Do you use this setting?
3.- You can't use the URL, only title of the page.
4.- Please give examples of the URLs and the specified substring you want.
-
- Inactive
- No
- Local html page....
- ..... such as C:\Users\radek\Desktop\XXX.html
