Classic accordion header color

[bakrona]

Hi there

How can I adapt header color to #242e51 of a classic accordion element?

[ruenel]

Hello @bakrona,

Thanks for writing in! The Classic accordion is using different styling according to each respective stack. In your site, you are using Integrity. It is using this built-in stack style:

.x-nav-tabs>li>a {
    color: #bfbfbf;
    background-color: #f7f7f7; 
}

.x-nav-tabs>.active>a, .x-nav-tabs>.active>a:hover {
    color: #272727;
    background-color: #fff;
}

Feel free to make adjustments to the code above as you need and then you need to add the modified CSS code into X > Theme Options > CSS. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg

[bakrona]

Hi there

Thank you for the input

I tried it with in-line CSS but I did not see any changes. Do you know why it doesnt respond to it?

[tristup]

Hi @bakrona,

I would suggest you modify the CSS mentioned by my colleague and add it to the Theme Options > CSS and check. If that does not work for you, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– Exact Page URL where you are having this issue.
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[bakrona]

I added it but must be a mistake I made somewhere, stil no change in color

[bakrona]

URL also in secure note

[tristup]

Hi @bakrona,

I went ahead and added a custom CSS class i.e access to the Classic Accordion element, which will help to point to the specific header where you want to change the color. To add the color, please add the following custom CSS code to Theme Options > CSS.

.accclass .x-accordion-heading a
{
    color:#00ff00;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[bakrona]

great, thank you for your help

[marc_a]

Hi @bakrona,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.