membership2 and market press same styling

I have loaded in MarketPress and Membership2. All is OK, but the styles of the two plugins are completely different. Can they be easily made to match up a bit. Marketpress Looks ok with styled forms etc - but Membership2 looks very bare. The theme does seem to have rstyled elements for woocomerce inbuilt - so wondering if it would be possible to hook into those as the forms and tables look lovely.

  • Kasia Swiderska

    Hello Justin,

    Plugins are separate that is why they are not sharing the same CSS code - thus they look different. If your theme has pretty tables - then styles from them can be used to style memberships elements. You can add custom styles to your child theme style.css file or use this small plugin https://wordpress.org/plugins/simple-custom-css/

    But it would require writing custom styles. I could help you with this, but I would need to have detailed description of the new look.

    kind regards,
    Kasia

  • Justin

    Thank you for the quick reply (always great at wpmudev). :slight_smile:
    Understood that they use different css - would be lovely too try and bring them together.
    I really like the styles the theme uses inbuilt for its shopping cart - but it doesn't have to be too similar.
    Any help is always welcome - thank you :slight_smile:

    Here is the themes demo styles...
    http://demo.qodeinteractive.com/bridge/cart/
    http://demo.qodeinteractive.com/bridge/checkout/
    http://demo.qodeinteractive.com/bridge/pricing-tables/

    If the membership2 and market press pages looked anything like that I'd be over the moon! :slight_smile:

  • Kasia Swiderska

    Hello Justin,

    Please try this CSS code:

    #ms-shortcode-register-user-form #register {
    position: relative;
    display: inline-block;
    width: auto;
    height: 38px;
    line-height: 38px;
    margin: 0;
    padding: 0 23px;
    border: 2px solid #303030;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    color: #303030;
    font-family: 'Raleway',sans-serif;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    outline: 0;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    -o-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    text-shadow: none;
    background-color: transparent;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -ms-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
    }
    
    #ms-shortcode-register-user-form #register:hover {
    background-color: #1abc9c;
    color: #fff;
    border-color: #1abc9c;
    }
    
    #ms-shortcode-register-user-form {
    background-color: #f6f6f6;
    }
    
    .ms-form-element .wpmui-field-input {
    padding: 10px;
    color: #818181;
    font-family: 'Raleway',sans-serif;
    font-weight: 400;
    }
    
    .ms-membership-form-wrapper legend {
    color: font-size: 17px;
    color: #303030;
    padding-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    }
    
    .ms-alert-box.ms-alert-success {
    border-top-color: #1abc9c;
    color: #1abc9c;
    background-color: #fff;
    }
    
    .ms-alert-box {
    border-radius: 0;
    box-shadow: none;
    }

    please note, that not everything is possible with only CSS - some changes would require changing plugin code to alter html output and use some JS scripts.

    kind regards,
    Kasia

  • Justin

    HI there,
    I think I have been playing with this too long now - and gone around in circles. Thankfully you guys are always fantastic!
    Having played with the Membership2 for hours, I'm still not much closer to making the pages look nice. Every single M2 page has different styling??? Is there not a simple way to make all buttons, text fields and tables match the website theme?
    I've added in a pic of all the different style buttons within M2 pages.
    And also added in a pic of the woocomerce plugin that just pics up the theme buttons automatically.
    As always - thank you for your help. I couldn't do it without you :slight_smile:
    All the best,
    Justin

  • Justin

    Hi there,
    Outside of a few last bits - I think I have solved the styling issues. Here is what I did.
    I have made new css for...

    .ms-form-element .wpmui-field-input
    input#user_login.input.focus
    input#user_pass.input
    button, input[type="button"], input[type="reset"], input[type="submit"]
    button, input[type="button"], input[type="reset"], input[type="submit"]:hover

    which has changed (as far as I can see) all the text forms and buttons to match the theme.
    Here is the complete code (I'm sure there may be simple ways).
    All the best,
    Justin

    input#user_login.input.focus,input#user_pass.input,input#first_name.wpmui-field-input.wpmui-text.wpmui-input-first_name,input#last_name.wpmui-field-input.wpmui-text.wpmui-input-last_name,input#email.wpmui-field-input.wpmui-text.wpmui-input-email,input#password.wpmui-field-input.wpmui-password.wpmui-input-password,input#password2.wpmui-field-input.wpmui-password.wpmui-input-password2
    {
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    -webkit-writing-mode: horizontal-tb;
    background-color: rgb(248, 248, 248);
    border-bottom-color: rgb(144, 144, 144);
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(144, 144, 144);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(144, 144, 144);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(144, 144, 144);
    border-top-style: none;
    border-top-width: 0px;
    color: rgb(144, 144, 144);
    cursor: auto;
    display: inline-block;
    font-family: Raleway, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 17px;
    letter-spacing: normal;
    line-height: 17px;
    margin-bottom: 2px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 2px;
    outline-color: rgb(144, 144, 144);
    outline-style: none;
    outline-width: 0px;
    padding-bottom: 15px;
    padding-left: 13.515625px;
    padding-right: 13.515625px;
    padding-top: 15px;
    resize: none;
    text-align: start;
    text-indent: 0px;
    text-shadow: none;
    text-transform: none;
    width: 380px;
    word-spacing: 0px;
    writing-mode: lr-tb;
    }

    input#user_login.input.focus,input#user_pass.input{
    width: 280px;
    }

    button, input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: none;
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px;
    -webkit-font-smoothing: antialiased;
    -webkit-rtl-ordering: logical;
    -webkit-transition-delay: 0s;
    -webkit-transition-duration: 0.1s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: linear;
    -webkit-user-select: text;
    -webkit-writing-mode: horizontal-tb;
    align-items: flex-start;
    background-color: rgb(20, 53, 87);
    border-bottom-color: rgb(20, 53, 87);
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-collapse: collapse;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(20, 53, 87);
    border-left-style: solid;
    border-left-width: 2px;
    border-right-color: rgb(20, 53, 87);
    border-right-style: solid;
    border-right-width: 2px;
    border-top-color: rgb(20, 53, 87);
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-top-style: solid;
    border-top-width: 2px;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-family: Raleway, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    height: 38px;
    letter-spacing: 1px;
    line-height: 35px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    outline-color: rgb(255, 255, 255);
    outline-style: none;
    outline-width: 0px;
    padding-bottom: 0px;
    padding-left: 22px;
    padding-right: 22px;
    padding-top: 0px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-indent: 0px;
    text-shadow: none;
    text-transform: uppercase;
    top: 1px;
    transition-delay: 0s;
    transition-duration: 0.1s;
    transition-property: all;
    transition-timing-function: linear;
    white-space: nowrap;
    word-spacing: 0px;
    writing-mode: lr-tb;
    }

    button, input[type="button"], input[type="reset"], input[type="submit"]:hover {
    background-color: rgb(20, 53, 87);
    border-bottom-color: rgb(20, 53, 87);
    border-left-color: rgbrgb(20, 53, 87);
    border-right-color: rgbrgb(20, 53, 87);
    border-top-color: rgbrgb(20, 53, 87);
    color: rgb(255, 255, 255);
    outline-color: rgb(255, 255, 255);
    }

  • Kasia Swiderska

    Hello Justin,

    I think I'd like to put it in a table and make it a bit more structured - but not sure where to begin :slight_smile:

    Elements on the account page are in fact tables - few of them, but they can be stylled.
    Please try this code:

    #account-membership table,
    #account-membership th,
    #account-membership td {
    border: 1px solid gray;
    }
    
    #account-membership th,
    #account-membership td {
    padding: 12px 10px;
    }
    
    #account-membership table {
    margin: 20px 0;
    width: 100%;
    }

    this will show border, change paddings and add margins to them.

    kind regards,
    Kasia

  • Kasia Swiderska

    Hello Justin,

    My bad! I use wrong ID for this, and only first table got the styles. It should look like that:

    .ms-account-wrapper

    .ms-account-wrapper table,
    .ms-account-wrapper th,
    .ms-account-wrapper td {
    border: 1px solid gray;
    }
    
    .ms-account-wrapper th,
    .ms-account-wrapper td {
    padding: 12px 10px;
    }
    
    .ms-account-wrapper table {
    margin: 20px 0;
    width: 100%;
    }

    Please, let me know if this works better.

    kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.