change width field my account

[Nico]

Hi Tom.

The next and hopefully last issue.
http://www.dewereldvergaat.nl

I made a field within ‘Mijn account’ page green to be sure you spot the correct field.
I would like to make the left padding and/or margin about 10px.

this is the not working code:
.woocommerce-MyAccount-navigation {
background-color: #65d66e;
margin:0px;
padding:0px;
}

Any suggestions?

[Tom]

Hi there,

I’m not too sure what you mean – I’m not seeing any green fields on that page?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nico]

http://www.dewereldvergaat.nl/mijn-account/

[Tom]

Still not seeing any green? Can you show me a screenshot maybe?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nico]

If create an account, you see the pages with the green field.
I’ll also send you a screenshot

[Tom]

Ah, you need to be logged in to view the green area.

You need to use the inspect element tool in your browser to find the right class and add the padding to it.

Right click on the element and select “Inspect” in Chrome. Then play around with some of the classes 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nico]

thanks.

I use plugin SiteOrigin CSS.

It shows the pages and while hovering it highlights the class area’s.
After clicking the area, on the left it is selected and you can change all you want. The plugin writes the CSS.

I’ll send a screenshot.

till now i can not find the right class. But I keep trying.

[Nico]

I did what you suggested. I looked at all the classes that are seen in right-click chrome. None of them does the trick. The class that is containing the ul and li is: .woocommerce-MyAccount-navigation, but also this one doesn’t give the result. Both the plugin SiteOrigin CSS and Chrome highlight this class. Clearly visible is the margin between the left of this class and the left of ul. So a simple padding-left should do the trick, but it doesn’t. Align-content and align-items doesn’t do it either.

Any suggestions?
Thanks.

[Nico]

Did you create the class: woocommerce-MyAccount-navigation, or did the people at woocommerce create it?

[Tom]

It must be WooCommerce or another WooCommerce related plugin you have installed.

I’m afraid I don’t really have a solution as I didn’t write the code for that section – you’ll have to ask the developers.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nico]

Oké and thanks.
Let’s close this topic.

[Tom]

No problem – let me know if they can’t help you.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nico]

Hi Tom.

I found this code to create a horizontal menu bar in my account pages.
This is fine for me. the contents of the my account pages can now use the whole width.

/* My account horizontal menu bar */
.woocommerce .woocommerce-MyAccount-navigation {
float: none;
width: 100%;
margin: 0 0 30px;
border-bottom: 1px solid rgba(0, 0, 0, .5);
}

.woocommerce .woocommerce-MyAccount-navigation:before,
.woocommerce .woocommerce-MyAccount-navigation:after {
content: ” “;
display: table;
}

.woocommerce .woocommerce-MyAccount-navigation:after {
clear: both;
}

.woocommerce .woocommerce-MyAccount-navigation li {
float: left;
padding: 0 10px;
border: none;
border-left: 2px solid rgba(0,0,0,.5);
}

.woocommerce .woocommerce-MyAccount-content {
float: none;
width: 100%;
margin: 0;
}

[Tom]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts