How do I change the font color on a specific catalogue element without changing all of the catalogue elements in the rest of the website?
Also, how do I remove the hover color so there is no color at all?
Thank you for your help, it is greatly appreciated!
Hey Micheal0424,
What element to you want to change the color for? And do you mean remove the menu hover?
Best regards,
Jordan Shannon
I am using the catalogue element and need to know how to control the color of the fonts for the specific catalogue elements without changing all of the catalogue elements throughout the website.
Does anybody have any ideas? This is a little on the urgent side so any help is greatly appreciated.
Thanks.
Four days after my initial question and all I received so far is a question asking “want to change the color for?” when my original questions says “change the font color on a specific catalogue element”.
Can somebody please help me here, this has now become urgent and any help would be greatly appreciated.
The catalogue element I am wanting all of the font to be white on is the homepage. The other request was that there is no hover color so when you hover over the items there is no color.
Thank you in advance for your help, it is really needed.
Hi,
Sorry for the delay.
Enable developer options from Enfold > Layout Builder and add custom CSS class name to the element to target specific catalogue element.
To target a specific catalogue list item please use the below code and change the n-th value to target different elements.
.custom-class-name .av-catalogue-list li:nth-child(2) {
background: gold;
color: black;
}
For more info please check the docs.
Best regards,
Vinay
That didn’t work. I did try to simplify things a bit with the custom class and this worked:
.whitefont * {
color: #ffffff !important;
}
Thanks for the help!
Hi,
I’m glad this was resolved. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon