Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • October 23, 2019 at 2:47 pm #1150522
    IQ2marketing

    Hi,
    I created the tab section with 3 tabs. I need to change the background color for each tab and the content border color must be the same as the tab background color. I t is possible to do this?

    October 23, 2019 at 8:45 pm #1150630
    Victoria

    Hey IQ2marketing,

    You can set the background color for each tab
    Image 2019-10-23 at 21.44.46.png

    Could you please attach a mockup of what you’re trying to achieve?

    If you need further assistance please let us know.
    Best regards,
    Victoria

    October 24, 2019 at 9:13 am #1150768
    IQ2marketing

    I need to create this:
    1. When someone clicks on 1 tab
    https://lex4you.pl/1.png

    2. When someone clicks on 2 tab
    https://lex4you.pl/2.jpg

    3. When someone clicks on 3 tab
    https://lex4you.pl/3.jpg

    Tab content border-color i the same as tab background-color

    October 24, 2019 at 10:19 am #1150803
    Victoria

    Hi IQ2marketing,

    Can you show us what you’ve got so far?

    Best regards,
    Victoria

    October 28, 2019 at 11:44 am #1151704
    IQ2marketing

    sorry I can’t because this site is on the private localhost.

    October 28, 2019 at 10:42 pm #1151929
    Jordan Shannon

    Hi,

    We would need to see the exact page to provide accurate ids and classes.

    Best regards,
    Jordan Shannon

    October 29, 2019 at 9:40 am #1151998
    IQ2marketing

    ok, I created a test site

    test

    October 30, 2019 at 2:29 pm #1152346
    Nikko

    Hi IQ2marketing,

    Thanks for giving us a link to check upon.
    Try adding this css code in Quick CSS, located in Enfold > General Styling:

    .tabcontainer [data-fake-id="#tab-id-1"] {
    border-color: #ffb803;
}

.tabcontainer [data-fake-id="#tab-id-2"] {
    border-color: #32a6a6;
}

.tabcontainer [data-fake-id="#tab-id-3"] {
    border-color: #fc6c3a;
}

    Best regards,
    Nikko

    October 31, 2019 at 9:31 am #1152632
    IQ2marketing

    ok thanks, but this work only for tab title border, not for active content border

    November 1, 2019 at 6:51 am #1152937
    Rikard

    Hi,

    You should be able to target the active state using basically the same CSS:

    .tabcontainer [data-fake-id="#tab-id-1"]:active {
    border-color: #ffb803;
}

    Best regards,
    Rikard

    November 4, 2019 at 9:30 am #1153646
    IQ2marketing

    hi, I add this code but still don’t work

    November 5, 2019 at 12:25 am #1153798
    Jordan Shannon

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, clear the cache a few times over.

    Best regards,
    Jordan Shannon

    November 5, 2019 at 9:27 am #1153903
    IQ2marketing

    yes, I add this code to the top of quick css. Title border is working, but the content has still gray border

    November 5, 2019 at 1:26 pm #1153985
    Rikard

    Hi,

    Thanks for the update. Do you mean the blue outline? If so then please try this CSS:

    .tab:focus {
    outline: -webkit-focus-ring-color auto 0 !important;
}

    Best regards,
    Rikard

    November 5, 2019 at 4:09 pm #1154017
    IQ2marketing

    I need to change the content border, color must be the same as the tab title background-color.
    https://mppk.pckp.pl/2.jpg

    November 6, 2019 at 1:05 am #1154129
    Jordan Shannon

    Hi,

    Add this to quick css:

    #tab-id-1-container.tab_content.active_tab_content{
border-color:#ffb803!important;
}

#tab-id-2-container.tab_content.active_tab_content{
border-color:#32a6a6!important;
}

#tab-id-3-container.tab_content.active_tab_content{
border-color:#fc6c3a!important;
}

    Best regards,
    Jordan Shannon

    November 6, 2019 at 8:24 am #1154193
    IQ2marketing

    now is ok, thank you :)

    November 6, 2019 at 9:23 pm #1154424
    Jordan Shannon

    Hi,

    No problem at all. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘tab section content border color’ is closed to new replies.