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
    • Support nomad

    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
    • Design Lord, Child of Thor

    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:

  • Justin
    • Design Lord, Child of Thor

    Hi there - quick update. I have changed the shopping cart on the site to woocommerce (as it is built into the theme so now that side of things looks good). I just need to get the membership 2 forms styled a little bit to match the rest of the site.

  • Justin
    • Design Lord, Child of Thor

    Ahhh - so I have now discovered that ContactForm7 is also compatible (styling) with the Bridge Theme. Is there anyway to get the Membership 2 forms and pages to match up with that css? Here is a quick pic of a dummy form I created - but would be lovely to make the Membership 2 form match.

  • Kasia Swiderska
    • Support nomad

    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
    • Design Lord, Child of Thor

    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
    • Design Lord, Child of Thor

    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);
    }

  • Justin
    • Design Lord, Child of Thor

    The last thing to look at I think is the accounts page - which is a bit all over the place at the moment. 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:
    Thank you for all your help!!! I think it is starting to take shape now :slight_smile:

  • Kasia Swiderska
    • Support nomad

    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
    • Support nomad

    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.