Carousel Product Title Font Colour

Hello,

We are using the carousel widget on one page and it has a black background. The product title is in grey and does not show well. It should be white. (See screenshot attached).

Can you advise us how we can change the product name title to white colour just for this element?

Kind Regards

Panda

Hello,

As we are visiting your Site, it seems that you have changed the style of that mentioned section on your Site: https://snipboard.io/0pt4yR.jpg

You have put the white specifically for the Products. So, are you ok with that? Or do you still want the change in this regard?

Best Regards

Hello,

Please make sure you are on the UK website and clear your cache. I have included the link again for you to the page. The carousel is background black colour so the product titles need to be white in colour.

It’s the areas in red that we need to understand how to change to white colour. See image attached.

Thank you

Hello,

Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

#carousel-443 .product-element-bottom .wd-entities-title a {
   color: #fff !important;
}

This CSS will make the Carousel Product Titles as white.

Best Regards

Hello.

Thank you but it hasn’t worked. Can you offer any other ideas?

Hello,

Sorry that the CSS didn’t work in your case. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can directly check this concern on your Site and help you out accordingly.

Best Regards

Hello Thank you.

Please see the private area for access details.

Hello,

We have thoroughly checked this concern on your Site, actually under the Theme Settings > Typography > Basic > you had added the Black color for the Entities title fonts which includes Products too which is why the color given under the Elementor editor as well as CSS isn’t working. So, we had changed the black color to white from the Theme Settings and now the color change shows.

Please check back your Site after completely clearing the browser and server cache.

Best Regards

Hello.

Thank you for working with us on this. Yes I can see that the colour can be changed for the entities font in Theme Settings > Typography > Basic > but by changing this to white it also changes the carousels where we have a white background so the product names completely disappears for these carousels (example – see red outlines area in the image attached where the product titles should be) .This is why we said we need the product titles font in white colour for the carousel with the black background only on the front page.

Is there a way to do this?

Hello,

Sorry for the earlier inconvenience in this regard. Actually, we have noticed now that the Carousel ID is getting uniquely generated every time the page is loaded, so that’s why the CSS wasn’t working because we were using the carousel ID in that. So, we have now use the general carousel class along with the Products container class and the following CSS class is used now on your Site under the Theme Settings > Typography > Advanced > +Add Rule > there we have selected Custom Selector and added the following CSS class to change the color to white:

.wd-carousel-container .product-grid-item .product-wrapper .product-element-bottom .wd-entities-title a

The color is now changed accordingly: https://snipboard.io/RyEJQC.jpg

This was the Rule added: https://snipboard.io/PZJdHv.jpg

Best Regards

Hello,

Thank you again. That worked! However we are still left with these elements (see attached image with the parts circled in rec) which are not in white colour.

I know you guys are busy but could you explain how I can do this? My CSS is not that great

Regards

Panda

Hello,

The following CSS class selector has been used on your Site to change the title of the product to white:

.elementor-element-7fe85ac3 .products .product-grid-item .product-wrapper .wd-entities-title a

Following CSS class selector has been used for the Next and Prev arrows color change:

.wd-carousel-container .owl-carousel .owl-nav .owl-prev:after

.wd-carousel-container .owl-carousel .owl-nav .owl-next:after

All these are defined under the same Typography > Advanced > Custom Selector.

This is the resultant preview: https://snipboard.io/rVhCWv.jpg

Please check back your Site after completely clearing the browser and server cache.

Best Regards

Superb!

Without doubt you went above and beyond with helping us on this one and I like the way you explain how you did it rather than just keeping us in the dark.

Keep up the excellent support.

Most Welcome 🙂

If you do not mind, can you please leave 5 stars rating for our theme by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in future. It would encourage our work a lot. If you like our Theme and Support.

Have a great day 🙂

Topic Closed.
Best Regards.

[Author]

Posts