[Casper BParticipant]

Hello,

I’m trying to change the hover colour of my accordion titles to white but it’s not taking (changes to dark blue on hover).

I think some of my accordion CSS is causing the problem.

Site: http://staging5.yasemingreenscapes.ca/services/ (bottom of page).

Current CSS:

/*Background colour accordion in collapsed state*/

.x-accordion-heading .x-accordion-toggle.collapsed
{ background-color: #00a8c6; }

/*Background colour accordion in open state*/

.x-accordion-heading .x-accordion-toggle {color: #fff; background-color: #00a8c6; }

/*Background colour of accordion in open state & font*/

.x-accordion-inner {
color: #fff;
background-color: #00a8c6;
}

/*Hover colour for accordion*/

.x-accordion-heading .x-accordion-toggle:hover { colour:#ffffff;
}

/*Title colour for accordion*/
.x-accordion-heading .x-accordion-toggle {
color: #aee239;
}

Thanks,
Casper

[ZeshanMember]

Hi Casper,

Thank you for writing in!

The problem is in your custom CSS, the spelling of “color” property is incorrect. Please replace the following CSS code:

.x-accordion-heading .x-accordion-toggle:hover { colour:#ffffff;
}

With:

.x-accordion-heading .x-accordion-toggle:hover { color:#ffffff;
}

Hope this helps. If you face any issue, please let us know. We’ll be happy to assist.

Thank you.

[Casper BParticipant]

Thanks that did the trick.
Canadian spelling habit 🙂

Cheers,
Casper

[ZeshanMember]

Great to hear that it solved the problem!

Please let us know if we can help you with anything else 🙂

Thank you.
Have a nice day!

[FKFotoParticipant]

Integrity light with child theme on local server. (X ver 2.6, Shortcodes ver 2.4.0. Have validated, but cannot deactivate 2.4.0 or upgrade to 2.5.0)

I want to change the background colour of a single accordion in its unexpanded state. The code I am using is:

.x-accordion-heading .x-accordion-toggle.collapsed {
background-color: darkgray !important;
}

It doesn’t work from the child theme (cache has been refreshed).
It doesn’t work from the Accordion CSS entry field in VC mode. (Entered as “background-color: darkgray !important;”)

Inspecting the element, it seems that the colour is still being determined by the parent theme.

Where does this code need to be placed to make it work please? (Advice on updating shortcodes would also be appreciated.)

Thank you.

[ChristopherModerator]

Hi there,

Automatic updates added to X from version 2.5.0 or higher,Please update your theme and plugin manually referring to http://theme.co/x/member/kb/updating-your-theme-and-plugins/.So you’ll be able to use automatic updates for the next release.

Actually you target the wrong element that’s why you can’t see the result
Try this CSS to makes it work:

a.x-accordion-toggle.collapsed {
background-color: darkgray !important;
}

Hope it helps.

[FKFotoParticipant]

Thank you for your response.

The only way the code worked was entering it in the Customizer Custom CSS. Is there a reason it doesn’t work from the child style.css? I would like to keep all these changes in one place, if possible.

Upgrade to shortcodes was fine.

Thanks again.

[DarshanaModerator]

Hi there,

Did you activate the child theme ? It should work on the child theme’s style-sheet as well. Can you provide us with a URL to your site, so that we can investigate for a possible issue.

Thanks!

[FKFotoParticipant]

Child theme is active – contains “style.css” and “functions.php”. Sorry, I can’t give you a URL as this is still on a local server.

Is the code entry for the child “style.css” exactly the same as provided above?

If so, perhaps I will have sort this out when it goes live.

[ChristopherModerator]

Hi there,

Yes the code is the same.
Please let us know when you site is available so we can check it.

[FKFotoParticipant]

Thank you very much for your help. At the rate I’m going trying to get my site working, you might not see it online in your lifetime.

[ChristianModerator]

You’re welcome.

[Author]

Posts