Inserting images in Tabby title

  • Resolved kayliems

    (@kayliems)


    3 years, 7 months ago

    Hi, is it possible to add images in Tabby Title? So instead of clicking text to switch each tab, the clickable images can work as the titles?

    I tried to use jQuery (append, html ect) in “<li class=”responsive-tabs__list__item responsive-tabs__list__item–active” id=”tablist1-tab1″ aria-controls=”tablist1-panel1″ role=”tab” tabindex=”0″>1” or image element in “[tabby title=””]”. But it doesn’t seem to be working correctly. Is there a possible workaround?

    Thank you,

Viewing 3 replies - 1 through 3 (of 3 total)

  • I have achieved this with pure CSS – you can see it in action on this page: https://sfciti.org/meet-the-new-san-francisco-board-of-supervisors/

    Each action per tab can be styled. Each tab has a number associated. On the above example, the “District 2” tab ID is “tablist1-tab1”

    I use TABBY on a lot of different pages so I also use body.page in addition to the styles. The CSS I use for tab1:

    body.page-id-19386 li#tablist1-tab1.responsive-tabs__list__item
    body.page-id-19386 li#tablist1-tab1.responsive-tabs__list__item:hover

    and

    body.page-id-19386 li#tablist1-tab1.responsive-tabs__list__item.responsive-tabs__list__item–active {
    background-image: url(https://149503084.v2.pressablecdn.com/wp-content/uploads/2018/12/Stefani_off.jpg) !important;
    background-position: top;
    height: 175px;
    background-repeat: no-repeat;
    color: transparent;
    border: none;
    white-space: normal;
    max-width: 175px;
    }

    You’ll also need to tweak some of the defaults:

    body.page-id-19386 .responsive-tabs__list__item { min-width:175px ; }
    body.page-id-19386 li.responsive-tabs__list__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    }
    body.page-id-19386 .responsive-tabs .responsive-tabs__list__item { padding:0 !important; margin:1px 3px 0 0!important; }

    You’ll see that the CSS hides the text but it still lives there which is handy. On mobile you’ll also need to adjust the CSS and style.

    Hope this helps!

    Thread Starter kayliems

    (@kayliems)

    Thank you for the reply with great example! It worked out really well for me.

    You’re welcome!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Inserting images in Tabby title’ is closed to new replies.