Custom indicator for pinned tabs (right/left)

  • //EDIT: Dropped custom icon approach.
    Too hard, awkard and potentially not theme safe.
    It's not really useful for tabs on top/bottom as they get a smaller size, so they are easy to recognize, but it works even for them if you like triangles xD
    Scroll down if interested.

    Basically the idea behind the feature request
    bad example (need .title .tab[something] .theme ecc)

    I would try to put a dot when tab is marked as pinned but:
    A simple dot is best with the css path way (which is theme safe)
    I need #tabs-container ? :)
    Can I easily position it then on center right/left? :P
    Changing font/border is easier but I don't like the idea too much :P
    Avoiding to hook additional images is also nice XD

  • I don't quite understand it. Pinned tabs show the website's favicon, what's your idea behind this?

  • @luetage said in Custom icon for pinned tabs with css?:

    I don't quite understand it. Pinned tabs show the website's favicon, what's your idea behind this?

    Placing a dot/pin icon on the right/left side of pinned tabs.
    Where the favicon isn't. (left)
    And not on audio icon (right)
    And in foreground (but I used a background image XD)
    But it's quite annoying to do, as it goes behind .title and was did in a horrible way (even for me xD)
    So... I guess I'll go for the easy way.
    Just tweaking borders/colors/fonts when tab is pinned (active or not) , but I've still to check better few things or the custom.css will go in bad trip :P
    Probably - as I have an "heavily" modded tabbar - the best way is just tweaking fonts when pinned is on. Any other approach was ugly, considering that "my" UI is really condensed :P

  • @hadden89 damn lol, take my upvote, but please tell me upon my soul – what's the purpose? :D

  • @luetage I keep one/two/three pinned and I forget how many are. And when I want to change an unpinned tab I use often the pinned one which shouldn't change and "lose" time XD
    If they are different it won't happen - so I'll guess I do "two rows .title for unpinned" (all tabs do that in css) / "one row .title for pinned" (which is almost the "default state").
    Sounds too much crazy, it isn't? =)
    I've seen a never ending sea of css overlays so.... I quite changed my mind about doing that ahaha

  • Hm.. I don't really get it, still. Pinned tabs are only as wide as the pinned site icon; normal tabs are much wider.

    Even so, this happens to me some time. Maybe a proper feature (request) might be to fix the url of the pinned tab... or let it reset on reload / after fixed time?

  • Best ways(?) to do that xD

    Legacy solution. Border. Which is quite '90. XD

    /*border around pinned*/
    .tab-position .tab.pinned {border: 1px dotted !important;}
    /*minor fixes (not only for border)*/
    .tab-position .tab.pinned .favicon {margin-top: -2px; margin-left: -3px;}
    .tab-position .favicon {margin-top: -1px; margin-left: -2px;}
    .tab-position .tab .favicon {margin-top: 2px; margin-left: -2px;}

    New solution. Actually, I recycled and flipped the .tab.unread symbol. Let me know if I forgot something xD

    .tab-position .tab.pinned {
        background-image: linear-gradient(315deg, var(--colorFgFadedMore) 5px, transparent 5px);
        background-position: bottom right;

    It works even for tabs on top/bottom but it useless in that case :P

    Quite nice and simple after all :P
    Locking url of pinned tabs also would be cool, but I leave that to the team (or js experts xD)
    edit: updated title too

Log in to reply

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