Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 3, 2025 at 7:55 am #1478440
    WorldinColor

    I set up a Pill tab section and have 3 issues that I could not resolved from reading through the forums:
    1) Bigger arrows. I was able to make them slightly bigger with the following CSS but would like to have better control of size:
    .ACME-av-pill-tabs .av-tab-arrow-container
    {
    top: 1px; /*reducing px increased arrow size slightly 8?
    width: 500px;
    }
    2) active tab a different color
    I tried the css below from this thread but it’s not working. When I inspect my tab section on the web page, the html does not reference: a tab.active_tab class or tabcontainer.

    – https://kriesi.at/support/topic/font-color-tabs-active-and-hover/
    #top ..ACME-av-pill-tabs .tabcontainer .tab.active_tab {
    background-color: #D65799;
    }

    3) Remove extra space to the right of tab titles
    There’s padding or margin space to the right of the tab titles This is making the tabs wider than necessary. I want the space to the right of the titles to be similar to the space to the left of the titles.

    Thx!

    March 4, 2025 at 4:35 am #1478517
    WorldinColor

    Hi, just checking in to see if anyone has had a chance to look at this. Thank you.

    March 5, 2025 at 10:59 pm #1478705
    WorldinColor

    Hi it’s 3/5 and I’m checking in again on a response to this.

    March 8, 2025 at 11:14 am #1478885
    Rikard

    Hi,

    Sorry for the late reply. I’m not sure that I fully understand your intentions, could you share a screenshot highlighting them please? Also, the site you linked to is in maintenance mode, please share login details in private.

    Best regards,
    Rikard

    March 10, 2025 at 5:46 am #1478984
    WorldinColor

    Hi,

    I’ve linked to a screenshot in the private section and provided additional info you requested. Please look at screenshot first. Comments below give context to the mark up in screenshot.
    #1 – at the bottom of the left pill tab is a green arrow (circled in red and numbered 1) – I want the arrow to be bigger – 2x or more of the current arrow size.
    #2 – left pill tab section is the active tab in screenshot . When a tab is active I want its color to change (compared to an inactive). I have already tried to accomplish this with the css code in #2 of my initial post – it’s not working for me. Please advise.
    #3 I want to reduce the large extra space to the right of tab titles. For both tabs – there seems to be huge extra padding (margins?) to the right side of the titles. Compare to the margin/padding to the left of the title. This is making the tab wider than necessary. I want to reduce the margin/padding on the right side of tab to be the same or similar to what’s on the left side.

    March 10, 2025 at 6:12 pm #1479040
    Rikard

    Hi,

    1. Try this CSS and change the values to your liking:

    .avia_transform .av-active-tab-title .av-tab-arrow-container span {
  top: -5px;
}

.av-tab-arrow-container {
  height: 21px;
}

    2. Try this CSS:

    .CF-av-pill-tabs .av-active-tab-title {
  background: red;
}

    3. Try setting the width to 100%:

    .CF-av-pill-tabs .av-inner-tab-title {
  color: #FFFFFF;
  font-family: 'roboto';
  font-weight: 500;
  font-size: 36px !important;
  width: 80%;
  text-align: left;
  margin-left: 5% !important;
  margin-bottom: 0px !important;
  padding: 10px 0px 0px 0px !important;
}

    Best regards,
    Rikard

    March 11, 2025 at 4:54 pm #1479098
    WorldinColor

    Hi,

    Thank you. I’ll incorporate and test it out.

    March 12, 2025 at 9:15 am #1479142
    Rikard

    Hi,

    Thanks for the update, we’ll keep this thread open for you.

    Best regards,
    Rikard

    March 25, 2025 at 5:34 am #1480092
    WorldinColor

    RE: Fix for #1 – Bigger arrows – this worked. But the fix for #2 below worked so well in delineating active vs. inactive tab that a bigger arrow was not needed.
    Fix for #2 – active tab a different color – this worked.
    Fix for #3 – Remove extra space to the right of tab titles- this worked.

    Thank you for all the help on this! You can close the thread.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Pill Tab Section not working as expected’ is closed to new replies.