How to?

[Ken Shea]

How do I change this (desk top)

 

To this ... Like Steve has 😄

 

Edited May 17 by Ken Shea

[CHD-UK]

Hi Ken,

In summary, you need to

- remove the background colour from the account box
- Set the font colour of the account box to white or set it back to blank default (so you can read the Account text)

- Add your custom background colour to the ".w-account .my-acc-link::before" style  <- this style is responsible for the circular button effect

 

Edited May 17 by CHD-UK

[Ken Shea]

Thanks again Andy

[Ken Shea]

No joy

This is the text I show,different numbers and not showing background or font color as you are showing.

Should I enter that text?

 

[CHD-UK]

Hi Ken,

Yes, you will need to add the line

background-color: #90ee90;

to the .w-account css file and then save it.   You also need to edit the widget in the visual editor to remove the current background and font colours you have set.

If we can get the changes to take, it should work just fine. 

 

Here are a few screen shots I've taken from prototyping the changes on your live website in my browser.  This process may help in future as it will help you track down which parts of the theme to change.

 

1. In my web browser, I click f12 to get the developer tools, then click inspector.  Select an element on the page using ctrl + shift + C (top corner icon) and choose the account box

2. The current styles are shown over to the right.  You can see that both background-color and font color are set.

 

So next I click the tickmarks next to background-color and color to disable these styles  (this will be like us clearing them from the account widget)

 

Next, I am clicking html document window to exand the A class to reveal the "::before" pseudo class, then click it to select and display the styles applied to it.   You will see in the top right the ".w-account .my-acc-link::before" style.  It currently has #0 for the colour and no background-colour set!  (as per the browser window perview) - Will are going to test our changes here, then they will need to be duplicated into the themes css when we are happy.

 

This one is fairly simple, we are just going to add a new entry for

background-colour: #90ee90;

You will see the icon spring to life - the preview is slight wrong colour because it is selected but de-selecting you will see it is as required

 

 

 

 

Alternatively, it you are looking to blanket change all of the yellow to another colour, consider the styles button in the themse section.

For the buttons, they are coloured using a variable named background-color-4 :: you will see this available down the right hand side when editing the CSS for the account widget.  Just click to insert the colour-name,  sort of like a short cut - everywhere that it appears will be replaced with the colour you define on the "styles tab"

If you make changes on the styles tab you will need to flush the cache and rebuild the theme from the ADMIN menu.

 

 

 

(Make sure the style rules have a ; at the end - missed it when taking this screen shot!! )

 

 

 

Edited May 18 by CHD-UK
remove duplicate image

[Ken Shea]

Wow Andy 

You went the extra miles, that is a big help on how to locate particular theme areas. 

I'll be looking into that tomorrow.

Ken

[warleb2]

Andy got there first lols

[KimLangston]

On 5/18/2023 at 6:12 AM, CHD-UK said:

Hi Ken,

Yes, you will need to add the line

background-color: #90ee90;

to the .w-account css file and then save it.   You also need to edit the widget in the visual editor to remove the current background and font colours you have set.

If we can get the changes to take, it should work just fine. 

 

Here are a few screen shots I've taken from prototyping the changes on your live website in my browser.  This process may help in future as it will help you track down which parts of the theme to change.

 

1. In my web browser, I click f12 to get the developer tools, then click inspector.  Select an element on the page using ctrl + shift + C (top corner icon) and choose the account box

2. The current styles are shown over to the right.  You can see that both background-color and font color are set.

 

So next I click the tickmarks next to background-color and color to disable these styles  (this will be like us clearing them from the account widget)

 

Next, I am clicking html document window to exand the A class to reveal the "::before" pseudo class, then click it to select and display the styles applied to it.   You will see in the top right the ".w-account .my-acc-link::before" style.  It currently has #0 for the colour and no background-colour set!  (as per the browser window perview) - Will are going to test our changes here, then they will need to be duplicated into the themes css when we are happy.

 

This one is fairly simple, we are just going to add a new entry for

background-colour: #90ee90;

You will see the icon spring to life - the preview is slight wrong colour because it is selected but de-selecting you will see it is as required

 

 

 

 

Alternatively, it you are looking to blanket change all of the yellow to another colour, consider the styles button in the themse section.

For the buttons, they are coloured using a variable named background-color-4 :: you will see this available down the right hand side when editing the CSS for the account widget.  Just click to insert the colour-name,  sort of like a short cut - everywhere that it appears will be replaced with the colour you define on the "styles tab"

If you make changes on the styles tab you will need to flush the cache and rebuild the theme from the ADMIN menu.

 

 

 

(Make sure the style rules have a ; at the end - missed it when taking this screen shot!! )

 

 

 

Thanks for explaining it in brief, you made my day. I appreciate you.