FANDOM


  • So, I ran into a dead end. How can I change the right one into the left one (images below) while keeping the layered tabs of the default tabber/gallery. I found this CSS in the comment section of Introducing Desktop Tabs and Portable Galleries in Infoboxes, but at best it only shows four/three tabs, while the rest continue on a straight line to the right, becoming invisible and unusable.

    .pi-image-collection {
        margin-top: 0.5em;
        text-align: center;
    }
    ul.pi-image-collection-tabs {
        border-bottom: 1px solid #778;
        font: bold 12px Verdana,sans-serif;
        list-style: none outside none;
        margin: 0 0 2px;
        overflow: visible;
        padding: 0 0 4px;
        text-align: center;
    }
    ul.pi-image-collection-tabs li.current {
        background: none repeat scroll 0 0 #FFF;
        border-bottom: 1px solid #FFF;
        font-weight: bold;
    }
    ul.pi-image-collection-tabs li.current:hover {
        background-color: #FFF;
        border-bottom: 1px solid white;
    }
    ul.pi-image-collection-tabs li {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        display: inline;
        line-height: normal;
        list-style: none outside none;
        background: none repeat scroll 0 0 #DDE;
        border-color: #778 #778 -moz-use-text-color;
        border-image: none;
        border-style: solid solid none;
        border-width: 1px;
        color: #448;
        margin: 0 0 0 3px;
        padding: 3px 0.5em;
        text-decoration: none;
    }
    ul.pi-image-collection-tabs li:hover {
        background: none repeat scroll 0 0 #AAE;
        border-color: #227;
        color: #000;
    }
    .pi-tab-link.pi-item-spacing {
        padding: 3px 5px 4px;
    }
    
    Normal tabs

    The default version

    Better tabs

    What I want.

      Loading editor
    • It looks like the one on the left is using Tabber rather than the multiple image capability of protable infoboxes. That is why they look different.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message