Changing Tabs individual colors (4 tabs=4 colors)

Hi,

Looking to change the background color of tabs (4 tabs=4 different colors).

I did read [here(https://theme.co/apex/forum/t/elements-tabs/32859) that it is possible using ‘panels’ (I have the advanced view enabled), however when I go into panels (while i have the tab selected on the right) and change the background color, it changes the background color of the 4 tabs and not only the one selected.

This is the page I want to change https://www.betterthancoffee.com/products/, basically matching the flavor colors (already saved in the colors’ setting panel).

Thank you

Val

Hello Val,

Thanks for writing in!

Do you want something like this?

Using the tab settings will not allow you to have individual background colors for each tab items. You can only do that with custom css. please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

#tab-16 {
    background-color: rgb(7,197,243);
}

#tab-17 {
    background-color: #ff5000;
}

#tab-18 {
    background-color: #e11383;
}

#tab-19 {
    background-color: #00c18b;
}

We would loved to know if this has work for you. Thank you.

Hi,

thank you for your fast answer.

I went ahead and pasted what you provided into custom CSS (thank you! I would have never found out those are tabs 16, 17 and 18!!!)
Ideally, I wanted to have the full tab including the content part background with the flavor color
same as these guys:

From this, I gather we need to change the CSS separately for the tab/content part as the tab itself and the tab content are 2 different elements right?
Can you please help me with the CSS here as well?

Ultimately I need to do more things on the same page/tabs but i will open a couple of other cases to make it easier for other to find answers if needed.

thank you. your support is always awesome
val

Hello Val,

If you want something like this;

You will be needing this css:

div#panel-16 {}

#tab-16,
#panel-16 {
    background-color: rgb(7,197,243);
}

#tab-17,
#panel-17 {
    background-color: #ff5000;
}

#tab-18,
#panel-18 {
    background-color: #e11383;
}

#tab-19,
#panel-19 {
    background-color: #00c18b;
}

And lastly, please do not forget to change the colors of your heading titles and texts inside the tabbed content panel.

Please let us know how it goes.

Hey!

I think you and me may have been in the back end at the same time…Never thought you would be that quick to answer :open_mouth: and I was updating images :roll_eyes:
The tabs are still showing on the website but editing with Cornerstone I see an empty white ‘Nutrition tabs’ (the way I called the section)

how do I get that back to apply the modifications?
Thank you

Hi There,

Where did you add the last CSS code provided by Ruenel? I don’t see it on the page source. Please add it on the page Settings > CSS

Please remove this phrase on your page Settings > CSS, that will cause an syntax error, resulting in the custom CSS not to work.

TAB COLORS - ONLY THE TAB ITSELF

Thanks,

Hi,
I removed the text as suggested.

I have taken out the last CSS code provided by Ruenel for now - simply because my images do not have a transparent but a white background = it wont look good before i get that done.

my issue previously mentioned is about my content that I cannot access to because of a bug in the backend. can you please give me some guidance?

Thank you so much

Hi There,

Thanks again for asking!

Regarding the content issue, we need your login details in a secure note so that we can have a look.

Meanwhile you can check this following things for a possible solution.

  1. Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.
  2. Clear all caches including browser cache then deactivate your caching plugins and other optimization plugins.
  3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.
  4. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  5. Remove custom CSS, Javascript and templates.

Hope this helps!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.