help hiding some elements in Store and Checkout pages

Hi I am using Fixer, Marketpress and MP MOJO...

So far it has been very interesting how to make my store look good :slight_smile:

In the Store and checkout pages I see an avatar which I would like to hide and the discount coupon field and the apply button don't look very good. I'd like to show the borders of the coupon field and the butto make it look actually as a button...

I am attaching an image, can you please help me?

The url is http://todoparaperros.com.mx/store/shopping-cart/

Thanks!

  • Adam Czajczyk

    Hey @BePresence,

    I hope you're well today and thank you for your question!

    In the Store and checkout pages I see an avatar which I would like to hide

    As these pages are using standard Fixer's page template removing an avatar from them will result in removing an avatar from all other pages also. Fortunately, this shouldn't be a big issue as this won't affect your blog posts.

    That being said, please open your "store" page in your browser and enter the "Upfront" mode by clicking the "Upfront" link you your admin toolbar.

    Next steps would be:
    - select "Theme Settings" in the left Upfront Panel
    - click on "add custom css rules" link
    - scroll down the source CSS code in an editor that pops out at the bottom of the screen (scroll untill the end
    - add the following css rule and save everything:

    .page .avatar {display:none;}

    discount coupon field and the apply button don't look very good. I'd like to show the borders of the coupon field and the butto make it look actually as a button...

    I'd like to take a look at the discount coupon field and the button but I'm not able. That said, could you please grant me a support access to your site so?

    To do this, please follow this guide:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Cheers,
    Adam

  • BePresence

    Hi Predrag,, thank you very much for stepping in and your response... :slight_smile:

    I was also mentioning in my original post that the discount code field doesn't look very good, the field is not very clear where it starts and the button looks like text with a background not a button (I am attaching an image) I have also noticed that this happens in many cases for example in the affiliates plugin you might notice that also the fields don't look nice, and the button also just looks like text with background, not a button, so I am starting to believe this is a theme issue, do you think you can help me?

    Thanks

  • Adam Czajczyk

    Hey BePresence!

    I've visited your site and I've added this code to CSS:

    #coupon_code {border:1px solid #ddd;margin-bottom:10px; margin-top:10px;}

    This makes "coupon code" field stand out a bit from background. Of course you may want to tweak it a bit to adjust "look&feel".

    To do this, select "Theme settings" -> "add custom CSS" in Upfront editor and scroll the code all the way down. The same way you should be able to style all other input fields. The first step is to identify the element class or id (Chrome DevTools are great for doing this). Once you know this the standard CSS comes to play.

    As for buttons, there's a nice online generator here: http://css3buttongenerator.com/. It gives you back "ready to use" CSS code so you only need to replace class names and paste it to the Upfront code editor.

    I know this may be a bit frustrating as Upfront is meant to be fully WYSIWYG "drag&drop" editor. Well, it is but because it's virtually impossible to create a tool that would be 100% compatible with everything, sometimes such CSS tweaks are needed.

    That said, I hope this helps but of course if you feel like you still need assistance with all other fields layout/tweaks/changes, just let us know and we'll work with you as long as you need to make your site all up and running :slight_smile:

    Have a nice day!
    Adam

  • BePresence

    Hi Adam, thank you very much for your response!

    I used your code and added this...

    .mp_cart_login .user_login .user_pass {border:1px solid #ddd;margin-bottom:10px; margin-top:10px;}
    #mp_cart_col_quant {border:1px solid #ddd;margin-bottom:10px; margin-top:10px;}

    And it didn't work :slight_frown:

    I also copied the code for the buttons and try to add it to the login button and nothing either

    .mp_login_submit {
    border: none !important;
    text-shadow: none !important;
    background: #39B3D7 !important;
    color: #f4f4f4 !important;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    }

    Can you please help me by telling me what I did wrong?

  • Adam Czajczyk

    Hello BePresence,

    Thanks for re-granting access.

    The button code you've added didn't work because you addressed the CSS class instead of ID. The difference here is as follows:

    - if an element is described .e.g <div class="mp_login_submit">, use ".mp_login_submit"

    if an element is described .e.g <div id="mp_login_submit">, use "#mp_login_submit"

    I've adjusted you're code a bit (and added some paddings and rounded corners to make it look more like a button), added it to your global CSS ('add custom css" option) and it seems to be working:

    #mp_login_submit {
    border: none !important;
    text-shadow: none !important;
    background: #39B3D7 !important;
    color: #f4f4f4 !important;
    padding:10px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    }

    To make transition effects work you also need duplicate the above code with a little twist. Take a look below please:

    #mp_login_submit:hover {
    border: none !important;
    text-shadow: none !important;
    background: #39B3D7 !important;
    color: #f4f4f4 !important;
    padding:10px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    }

    The code above will be executed when you hover a mouse pointer over button. Of course you will want to modify it a bit, e.g. change colors in order to be able to see the effect in action.

    As for other rules.

    This code of yours

    .mp_cart_login .user_login .user_pass {border:1px solid #ddd;margin-bottom:10px; margin-top:10px;}

    I've modified as follows:

    #user_login, #user_pass {border:1px solid #ddd;margin-bottom:10px; margin-top:10px;}

    The same principle applies here: this is an ID so it's starting with "#" character. There's also a comma as we're addressing here two different elements (no parent-child relationship).

    And for this code:

    #mp_cart_col_quant {border:1px solid #ddd;margin-bottom:10px; margin-top:10px;}

    It's a class again, not an ID, so it should start with a dot ("."). There's a "catch" though as this is a part of a table and tables a kinda special :slight_smile: So here's the code:

    td.mp_cart_col_quant {border:1px solid #ddd!important;margin-bottom:10px!important; margin-top:10px!important;}

    It was also necessary to add "!important;" flag to the rules in this part to force browser to follow these rules instead of defined before (which we are not able to change).

    I hope this helps :slight_smile:

    Cheers,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.