Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • September 3, 2020 at 2:36 pm #1243107
    envapk2

    Hi
    In the Enfold Documentation for the Accordian element there is some CSS to create Multicolor tabs, eg
    /* Tab 1 */
    .av-accordion-bg-multi .av_toggle_section:nth-child(1) .toggler {
    background: #b84592;
    }

    But is it possible to do the same kind of thing with the Tab element? In the Documentation there is nothing about multicolor tabs.

    many thanks

    Peter

    September 4, 2020 at 2:37 pm #1243379
    Victoria

    Hey envapk2,

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

    Best regards,
    Victoria

    September 4, 2020 at 2:54 pm #1243391
    envapk2

    Hi Victoria

    Yes, if you go to the link in the private content box you should see a mock up. Basically it’s the same thing you can do with the Accordion tabs but with the vertical tabs element.

    Peter

    September 5, 2020 at 12:41 pm #1243576
    Victoria

    Hi envapk2,

    Thank you.

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    September 5, 2020 at 1:03 pm #1243583
    envapk2

    Hi Victoria

    In the link below I have put an example – on the left is an accordion element where I have changed the tab colors using the CSS from the Enfold Documentation, while in the right colunm I have a tb element and I want to change the tab colouring in a similar way.

    many thanks

    Peter

    September 5, 2020 at 2:01 pm #1243605
    Victoria

    Hi envapk2,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top .tabcontainer .tab.tab_counter_0 {
	background: #b84592;
	color:#eeeeee;
	border:1px solid #b84592;
}
#top .tabcontainer .tab.tab_counter_1 {
	background: #3369e7;
	color:#eeeeee;
	border:1px solid #3369e7;
}
#top .tabcontainer .tab.tab_counter_2 {
	background: #00aeff;
	color:#eeeeee;
	border:1px solid #00aeff;
}
#top .tabcontainer .tab.tab_counter_3 {
	background: #003666;
	color:#eeeeee;
	border:1px solid #003666;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 5, 2020 at 4:08 pm #1243632
    envapk2

    Hi Victoria

    That works perfectly. many thanks

    Peter

    September 6, 2020 at 10:51 am #1243713
    Rikard

    Hi Peter,

    Great, I’m glad that Victoria could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    September 6, 2020 at 1:38 pm #1243733
    envapk2

    Hi

    Sorry , I just realised that the CSS isn’t applied in mobile.

    Peter

    September 8, 2020 at 6:10 am #1244165
    Rikard

    Hi Peter,

    It’s applying on my end on mobile, please check the page in an incognito or private tab in your mobile browser, or use a different browser.

    Best regards,
    Rikard

    September 8, 2020 at 10:55 am #1244240
    envapk2

    Hi Rikard

    I think you might have been looking at the Accordion element which I had on that page as well which does work on mobile. But I’ve removed that now and put two Tab elements which isn’t working for me on mobile – I’ve tried a couple of devices.

    Peter

    September 8, 2020 at 7:21 pm #1244404
    Victoria

    Hi envapk2,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    

#top .tabcontainer .tab.tab_counter_0 {
	background: #b84592;
	color:#eeeeee;
	border:1px solid #b84592;
}
#top .tabcontainer .tab.tab_counter_1, 
#top .tabcontainer .tab[data-fake-id="#tab2"] {
	background: #3369e7;
	color:#eeeeee;
	border:1px solid #3369e7;
}
#top .tabcontainer .tab.tab_counter_2,
#top .tabcontainer .tab[data-fake-id="#tab-id-5"] {
	background: #00aeff;
	color:#eeeeee;
	border:1px solid #00aeff;
}
#top .tabcontainer .tab.tab_counter_3,
#top .tabcontainer .tab[data-fake-id="#tab-id-6"] {
	background: #003666;
	color:#eeeeee;
	border:1px solid #003666;
}

    On mobile, the html is a bit different, you need to check the data-fake-id attribute of the tabs.

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 9, 2020 at 12:39 am #1244507
    envapk2

    Hi Victoria

    That’s working now.
    Thanks a lot for your help, it is much appreciated.

    Peter

    September 9, 2020 at 12:47 am #1244513
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Multicolor Tabs’ is closed to new replies.