Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 23, 2019 at 5:23 pm #1150556
    dreisatz

    Hi there,
    I’m using a tab section with three tabs.
    #1 Issue: the content of each tab is not aligned – how to get the content “top aligned”?
    #2 like to have: if the first tab is active: tab background should be blue, if the second tab is active: background should be red and if the third tab is active: background should be yellow

    screenshots:
    first-tab-blue
    second-tab-red
    third-tab-yellow

    October 24, 2019 at 4:28 am #1150729
    Rikard

    Hey dreisatz,

    Thanks for the login details and screenshot, though I can’t reproduce the problem on my end. Did you manage to get it working? If not then please check the Inhalt Höhe setting in the Tab Section element options.

    Best regards,
    Rikard

    October 24, 2019 at 7:20 am #1150754
    dreisatz

    Hey Rikard,

    thank you for your help.

    #1: yes i did – was a very bad combination of misunderstood of the settings and pressing “aktualisieren” at wrong times (uh stupido me!)

    but

    #2: this is still my wish … how to adress to each active tab (just the tab (“reiter”) – not the whole tab section content) has its own special active color?

    hopefully
    dreisatz

    October 25, 2019 at 3:37 am #1151045
    Rikard

    Hi,

    Thanks for the update, you should be able to target the individual tab title backgrounds using CSS like this:

    .page-id-7286 .av-tab-section-tab-title-container a[data-av-tab-section-title=1] {
  background-color: yellow;
}

    Simply copy the code and change the title number in the CSS, the example above should target the first one.

    Best regards,
    Rikard

    October 25, 2019 at 8:33 am #1151111
    dreisatz

    Hi Rikard,
    unfortunately this is not working :-(

    I copied the code in QuickCss – saved – et voila: nothing changed
    it´s still the red-background which i gave them in the QuickCss.

    Do you mind to log in and have try? that would be very nice. Login/Pass still working for you.

    best regards,

    dreisatz

    October 26, 2019 at 3:35 am #1151308
    Rikard

    Hi,

    I changed it to this:

    .page-id-7286 .av-tab-section-tab-title-container a:nth-child(1) {
  background-color: yellow !important;
}

    Simply copy that code and change the number 1 to 2 in order to target the second element and so on.

    Best regards,
    Rikard

    October 26, 2019 at 10:43 am #1151328
    dreisatz

    Hi Rikard,

    as always thank you for your support.

    To sum it up for all other users it may concern:

    Adress each Tab with its own color

    .page-id-xxxx .av-tab-section-tab-title-container a:nth-child(1) {
 background-color: gold !important;
}

    .page-id-xxxx .av-tab-section-tab-title-container a:nth-child(2) {
    background-color: red !important;
    }
    Adress each ACTIVE Tab with its own ACTIVE color

    .page-id-xxxx .av-tab-section-tab-title-container .av-active-tab-title:nth-child(1) {
 background-color: blue !important;
}

    .page-id-xxxx .av-tab-section-tab-title-container .av-active-tab-title:nth-child(2) {
    background-color: yellow !important;
    }

    Simply copy that code and change the number 1 to 2 in order to target the second element and so on

    nice styling options!

    dreisatz

    October 27, 2019 at 5:08 am #1151457
    Rikard

    Hi,

    Great, thanks for summing up the solution and thanks for the feedback :-)

    I’ll go ahead and close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Tab section: tab-content is not aligned + active tab color for each tab?’ is closed to new replies.