[Boomarks, History + Side Panels] Alternating row colours (Updated 20.09.17)

  • Finding the wall of text in the new history panel difficult to read? Try alternating row colours

    Results may vary depending on what colour your theme is using for the containers so play around with the background-color to find something you like. You can also change from (odd) to (even) in the following code or add both

    For all list panels (notes, downloads, etc.) use this

    .vivaldi-tree div>div:nth-child(even) {
        background-color: var(--colorBgIntense);

    If you want only the bookmarks and history managers to have them then use this

    .manager .manager-treeview div > div:nth-child(even),
    .startpage .history .manager-content .history-tree div > div:nth-child(even) { 
        background-color: var(--colorBgDark);

    If you want to have the side panel different from the managers use both and simply change the background colour.

    You can add more colour by now changing the the odd rows as well like this

    .vivaldi-tree div > div:nth-child(odd) { 
        background-color: var(--colorBg);

    This will clean up the downloads page

    .panel#downloads .download-item .file,
    .panel#downloads .download-item .file .size {
        background-color: transparent;

    One last thing. Now that our managers have a little more flavor lets do something for that wallpaper we like too much to cover up by adding a little transparency

    .manager .manager-content,
    .manager .manager-content .toolbar-wrapper,
    .startpage .history .manager-content,
    .startpage .history .Cal__Container__root .ReactVirtualized__List,
    .manager .navigation {
        background-color: var(--colorBgDarker) !important;
        opacity: .9 !important;

    Give it try

  • Nice, only I notice a "bug" on download panel with first script...
    the label is always --ColorBg (even when should be brighter or transparent). Other than, works as it should 😉


  • @Hadden89

    Thank you for pointing that out. The filename and size seem to need a separate background declared. Just add this

    *This has been added to the original post

  • Thanks, now is perfect 😉

  • Same code above, but using a gradient in panel 😛

    /* Alternate colors in panels */
    .vivaldi-tree div + div:nth-child(even) { 
    .panel#downloads .download-item .file,
    .panel#downloads .download-item .file .size {background-image:linear->>gradient(hsla(0,0%,100%,.01),hsla(0,0%,100%,.01));} 

    Before this, I had background-color: var(--colorFgAlpha); as color in div.
    I hope this code is correct, but it should 😃

  • I've never read this topic. It makes sense and I have stolen the code ^^
    The only thing I noticed is that selected items, which go out of focus have the same color as the alternating rows var(--colorBgDark). I decided to fill it with the lighter highlight color instead:
    .vivaldi-tree .tree-row[data-selected][data-nofocus] {background-color: var(--colorHighlightBgAlpha);}

  • @Hadden89 upvote for being extra persistent with these gradients 😃

  • @luetage said in [Boomarks & History] Alternating row colours:

    @Hadden89 upvote for being extra persistent with these gradients 😃

    Yeah, I really like translucid/gradient things ^^,
    My major disappointment when win8 was released was... the aero lack XD
    Well, also the ugly desktop UI. But aero first.
    This code is very nice; I gladly pushed up 😛

  • @luetage

    That's strange, because what you have changed to is actually already present in the common.css (line 2068). You might have some clashing codes going on in your custom file(s)

  • @sjudenim That's funny, because I checked common.css when I looked for this code, and I found the line and it has the background-color as var(--colorBgDark) set. Are you sure your common.css has var(--colorHighlightBgAlpha)? I know that it's always been the former for me, on every snapshot, independent from wether I run modifications or not.

    edit: maybe this is platform dependent oO
    0_1498605212401_Screenshot 2017-06-28 01.13.07.png

  • @luetage

    It was using the highlight colour when I first wrote the code and the version I am on still has it, which is v1.9 stable. But since you've mentioned this I took a peek at the common.css for v1.10 as well as the snapshot and you are right, they have changed it. That seems like an odd choice. Guess I'll add that to my code for when I finally update

    Another odd thing is that there is a border on it in the version I'm using which doesn't appear in the code

  • Hmm, I missed that change, but it's been quite a while since 1.9. for me. Discoloring items which are out of focus is a design choice, it's understandable but I don't agree with it either. Well, gladly this is not an issue for users who mod. ^^

  • There's been a change in the latest snapshot 1.11.890.4. The specific code for alternating row colors doesn't work anymore on the bookmarks page. Instead you have to use this selector:
    .manager .manager-treeview div > div:nth-child(even)

  • Another thing I noticed is that when scrolling the rows change color, whenever a line goes out/in of view. It's not really an issue, just wondering if there is a way to work around that.

  • @luetage

    This also works in the 1.10 stable so I will edit the original post

  • Changes to the selector names have broken some of this, so it's been updated and is working with v 1.12

  • @sjudenim I placed a really small transparent png as background (I know, I shouldn't)

    .vivaldi-tree div>div:nth-child(even) {
       background-color: blue;
    .vivaldi-tree div>div:nth-child(odd) {
       background-color: red;
    .vivaldi-tree { /*bground test*/
     background-image: url(hcomb3.png);

    It works, but seems not possible to use both even and odd with background.
    Red replace blue in any row, same if I use --var(colorWhatever)
    If I only use even, the odd become transparent (which is really odd wth >>backgrounds xD)
    @luetage I dropped gradients in my css 😛

  • @hadden89 said in [Boomarks, History + Side Panels] Alternating row colours (Updated 20.09.17):

    I dropped gradients in my css 😛

    damn, take my upvote

  • Amazing. Only discovered this thread now, but this + a few others tweaks I found, makes Vivaldi just that more awesome and personalized.



Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.