[Resolved] change width field my account

Home Forums Support change width field my account

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #224999
    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?

    #225012
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    Let me know ๐Ÿ™‚

    #225171
    Nico
    #225257
    Tom
    Lead Developer
    Lead Developer

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

    #225273
    Nico

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

    #225352
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #225386
    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.

    #225392
    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.

    #225393
    Nico

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

    #225518
    Tom
    Lead Developer
    Lead Developer

    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.

    #225543
    Nico

    Okรฉ and thanks.
    Let’s close this topic.

    #225581
    Tom
    Lead Developer
    Lead Developer

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

    #225709
    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;
    }

    #225840
    Tom
    Lead Developer
    Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.