-
Posts
-
I’ve been experimenting with all the different options of the Accordion element, and have also read through the documentation and searched the forum. I still have questions about how to change the background color on the tab/toggle content area.
All the variations in the settings for Colors in the Accordion element affect only the title bar of the tab/toggle. On this page – https://www.missouriartscouncil.org/missouri-artsafe – I have the Accordion element (it’s within the Create and Present section) set up with Minimal style and Define Custom Colors > Custom Background Color. That has changed the tab/toggle title bar to the Custom Background Color. The content area is also coming up in the Custom Background Color. And I want it to be different.
In this documentation https://kriesi.at/documentation/enfold/accordion under Tab Content Style > Content Background, I found this CSS:
/* Tab content background */
.my-custom-tabs .toggle_content {
background: #f2f6fa;
}Changing the background color to #ffffff, I entered it into my site’s Quick CSS. But it didn’t do anything.
Is there something else I should have done? I’m confused by the directions earlier in the documentation under CUSTOMIZATION > NOTE. “Before we start customization, enable custom CSS class name support from Enfold theme options > LayoutBuilder so we can easily target specific elements. For the below examples to work please assign a class name ‘my-custom-tabs’ to your accordion element or simply use the below accordion element shortcode to which we have already applied a custom class.” Where in the back end is this supposed to be done? And how? Please give a step-by-step.
A P.S. question about a different aspect of Accordion – How is the size of the font on the tab/toggle title bars determined? Is it via some preset relationship with the site’s default text size? My default size is 14px. I like the way the font size on the title bars looks; I would simply like to understand how it happened.
For future thought –
It would be great if in a future Enfold update you added standard options for the tab/toggle content area just like you have for the title bars, so it wouldn’t be necessary to delve into CSS. Thanks!Hey missouriartscouncil,
This code should work:
.my-custom-tabs .toggle_content { background: #f2f6fa; }But you need need to add the my-custom-tabs class to the element, which I see that you haven’t done. Please add the class, or try the CSS without that class:
.toggle_content { background: #f2f6fa; }Best regards,
RikardHi Rikard,
Would you please expand on what you mean by this? “But you need need to add the my-custom-tabs class to the element, which I see that you haven’t done. Please add the class…”
Where? How? Please assume I know nothing. Thanks! :DHi,
If you open the element options, then go to the Advanced->Developer Settings tab. There you will see a field called Custom CSS Class, add my-custom-tabs to that field, otherwise the CSS you referred to won’t work.
Best regards,
RikardHi Rikard,
Thank you for those clear directions, but still no success, I’m afraid! Here’s what I did.
I want the custom color for the toggle content only on this one page: https://www.missouriartscouncil.org/missouri-artsafe I want the background color ot the toggle content to be a lighter tint of the background color of the toggle title bar.
So in the Accordion element on that page, I went as you directed to Advanced > Developer Settings. In the Custom CSS Class bar, I entered moartsafe-custom-accordion.
Then in Quick CSS, I added this:
.moartsafe-custom-accordion .toggle_content {
background: #fdf7e0;
}But there was no change in the toggle content background color.
Just to be sure, I changed moartsafe-custom-accordion in both the Accordion element on the page and Quick CSS to my-custom-tabs, but the color change still didn’t happen.
Hi,
Thanks for the update. Please try this instead:
.moartsafe-custom-accordion .toggle_content { background: #fdf7e0 !important; }Best regards,
Rikard
- The topic ‘Customize accordion colors for tab/toggle content area?’ is closed to new replies.