Return to previous page

What are the steps required to change the colour of elements?

This topic has 10 replies, 3 voices, and was last updated 1 years, 8 months ago ago by Rose Tyler

Catholicans

Participant

April 12, 2023 at 16:52

What are the steps required to change the color of the Wishlist icon when clicked, and modify the hover color of the text?

Screenshot (color of the Wishlist icon when clicked )
My intention is to replace the color blue with red.
https://snipboard.io/qvMnDm.jpg

Screenshot (the hover color of the text)
I aim to substitute the color orange with Blue.
https://snipboard.io/rpTHzU.jpg

#353094 Copied Theme version: 0.0.1 WooCommerce version: Version 7.5.1

9 Answers
Tony Rodriguez

Support staff

April 13, 2023 at 05:42
Hello, Catholicans,

1. In order to solve your issue, please copy and paste the below given CSS code to XStore >> Theme Options >> Theme Custom CSS >> Global CSS and check back to your site after clearing the browser cache.
```
.xstore-wishlist[data-action=remove] .et-icon {
    color: red !important;
}
```
Note: You can change the value of the color from the given code as per your requirements.

2. Additionally, please copy and paste the following CSS code to XStore >> Theme Options >> Theme Custom CSS >> Global CSS and check back to your site after clearing the browser cache.
```
li.mpc-list__item.mpc-parent-hover.mpc-transition:hover {
    color: #2a5197 !important;
}
```
Note: You can change the value of the color from the given code as per your requirements.

We hope this helps.

Best Regards,
8Theme’s Team
#353142 Copied
Catholicans

Participant

April 13, 2023 at 07:19

Can you please help to change the color of the blue colored hearts that appear when they are clicked?
Screenshot for reference
https://snipboard.io/eGrRWP.jpg

#353156 Copied
Tony Rodriguez

Support staff

April 13, 2023 at 10:01
Hello, Catholicans,

1. In order to solve your issue, please copy and paste the below given CSS code to XStore >> Theme Options >> Theme Custom CSS >> Global CSS and check back to your site after clearing the browser cache.
```
 .xstore-wishlist-animated-heart{
fill: red !important;
}
```
Best Regards,
8Theme’s Team
#353184 Copied
Catholicans

Participant

April 18, 2023 at 05:44

How can I change the border color of the animated hearts in to red?

#353517 Copied

Tony Rodriguez

Support staff

April 18, 2023 at 07:57

Hello, Catholicans,

We kindly request that you provide us with a screenshot of the border color you are referring to. Additionally, if you could mark the screenshot for our better understanding, we would be able to assess the situation and provide assistance accordingly.

Regards,

The 8Theme Team

#353543 Copied

Catholicans

Participant

April 18, 2023 at 08:03

Sure.
Here is the screenshot:
https://snipboard.io/uQIGaK.jpg

#353545 Copied

Rose Tyler

Support staff

April 18, 2023 at 11:58

Hello, Catholicans,

Thank you for your reply and for the screenshot.
Please animated hearts are in red already on your site. Could you redescribe the desired result in more detail?

Best Regards,
8Theme’s Team

#353603 Copied

Catholicans

Participant

April 18, 2023 at 12:56

The animated hearts are filled with color, But the border color of that animated hearts are blue in color. So, I want to change the border color, blue in to red.

#353619 Copied
Rose Tyler

Support staff

April 18, 2023 at 14:15
Hello, Catholicans,

Please change this code https://prnt.sc/E2qKMSe_rNB2
to
```
.xstore-wishlist-animated-heart {
    fill: red !important;
    stroke: red !important;
}
```
Best Regards,
8Theme’s Team
#353634 Copied
Tagged: change, colour, element, steps, template, woocommerce, wordpress
Viewing 10 results - 1 through 10 (of 10 total)