Change Icon On My_Account Dashboard

This topic has 12 replies, 2 voices, and was last updated 4 years, 3 months ago by Elise Noromit.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
January 29, 2021 at 3:44 pm #262452

Benson82
Participant

So hello I’m in a real crisis. How do I get this icon exchanged? I use Woodmart Child and the YITH WooCommerce Gift Cards plugin. Unfortunately I am not a CSS professional or PHP expert

Attachments:
You must be logged in to view attached files.

January 29, 2021 at 5:58 pm #262479

Elise Noromit
Member

Hello,

Thank you very much for choosing our theme and for contacting us.

Please provide your site admin access and icon URL which you want to insert instead, I will provide custom CSS.

Best Regards

January 29, 2021 at 6:21 pm #262488

Benson82
Participant

Log In Page:

January 30, 2021 at 11:30 am #262600
Elise Noromit
Member
Hello,

Please add this code to the Theme Settings > Custom CSS > Global:
```
body .woodmart-my-account-links .gift-cards-link a:before {
    content: " ";
    background-image: url(https://woodmart.xtemos.com/wp-content/uploads/2017/02/001-people.png?id=2450) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
	width:100%;
	min-height:100px;
}
```
Pleae replace this https://woodmart.xtemos.com/wp-content/uploads/2017/02/001-people.png?id=2450 for your image URL.

Best Regards
January 30, 2021 at 3:07 pm #262636

Benson82
Participant

First of all, thank you very much for the help! Now I have one more question. If you move the mouse over the button, the icon turns black. I have created a second icon that is black and the ccs code with the associated file is given in the forums, but nothing happens on the attached photo is a screenshot if When I move the mouse over the other points, they turn black when I click the button “ORDERS”. How is the CSS correct here? That this is uniform.

The following code is from me:

body .woodmart-my-account-links .gift-cards-link a: before {

content: “”;

background-image: url (https://www.curvy-is-sexy.com/wp-content/uploads/2021/01/Icon_MyAccount_GiftCard_Grey_One.svg)! important;
background-image: height: 50px! important;
background-position: top center! important;
background-repeat: no-repeat! important;

width: auto;
min-height: 50px;
}

# background-image: hover {

background-image: url (https://www.curvy-is-sexy.com/wp-content/uploads/2021/01/Icon_MyAccount_GiftCard_Black_One.svg)
}

Attachments:
You must be logged in to view attached files.

January 31, 2021 at 7:39 pm #262829
Elise Noromit
Member
Hello,

You use an image on as an icon, so you need the black line image and insert this code:
```
body .woodmart-my-account-links .gift-cards-link a:before:hover {
    content: " ";
    background-image: url(<strong>insert the black image URL instead this phrase</strong>) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
	width:100%;
	min-height:100px;
}
```
Best Regards
January 31, 2021 at 11:33 pm #262852

Benson82
Participant

body .woodmart-my-account-links .gift-cards-link a:before {

content: ” “;

background-image: url(https://www.curvy-is-sexy.com/wp-content/uploads/2021/01/Icon_MyAccount_GiftCard_Grey_One.svg) !important;
background-image: height:50px !important;
background-position: top center !important;
background-repeat: no-repeat !important;

width: auto;
min-height:50px;
}

body .woodmart-my-account-links .gift-cards-link a:befor:hover {

content: ” “;

background-image: url(https://www.curvy-is-sexy.com/wp-content/uploads/2021/01/Icon_MyAccount_GiftCard_Black_One.svg) !important;
background-image: height:50px !important;
background-position: top center !important;
background-repeat: no-repeat !important;

width: auto%;
min-height:50px;
}

February 1, 2021 at 11:44 am #262953

Elise Noromit
Member

Hello,

Please explain what you want to do? Please remove all the custom CSS and add those I provided and check the issue.

Best Regards

February 1, 2021 at 1:15 pm #262972

Benson82
Participant

The customer dashboard shows all icons in gray with a white background. As you can see, the icon for the “Gift Card” item has already been replaced by me. but if you move the mouse over the icon, it remains gray and does not turn black like the others. I created the icon once in gray and once in black, but even if I use one code alone, the color does not change as with the other icons, it should change color as soon as I go to the icon with the mouse, the icon of the Color gray in black. As with the second picture that is in the hang the mouse is over the point orders and this is colored black.

Attachments:
You must be logged in to view attached files.

February 1, 2021 at 1:15 pm #262976

Benson82
Participant

here is a video of it

February 1, 2021 at 7:22 pm #263069

Elise Noromit
Member

Hello,

Please remove this style from the SVG: https://prnt.sc/xznbpb, add width and height. You have inserted the code with a mistake- you specified width:auto%; that is not correct.

Best Regards

February 1, 2021 at 11:13 pm #263117

Benson82
Participant

I have completely deleted the code and replaced yours and inserted the black icon. Now it shows the original icon again. The changes are now not accepted at all.

February 2, 2021 at 2:41 pm #263304

Elise Noromit
Member

Hello,

I have corrected the CSS, please check now.

Best Regards
Author

Posts

Tagged: Change Icon On My_Account Dashboard

Viewing 13 posts - 1 through 13 (of 13 total)

Change Icon On My_Account Dashboard

Attachments:

Attachments:

Attachments:

Create your WordPress website.