Pro Sites 3.5 - registration layout and formatting

Hi there,

First off, congratulations to the team for a great upgrade to Pro Sites!

Running into a few issues getting everything set up and would appreciate some help:

1. The pricing tables have spaces in them - how can we fix this?
http://screencast.com/t/cHLdUTp5t

2. The sign up fields are messy and cramped:
http://screencast.com/t/afn2AJjj

3. What does choosing a Raw HTML layout as a Gateways layout in the Pricing Table allow us to do?

4. Is it possible to change or edit the "Take advantage of extra savings by paying in advance." text?

5. Can any styling changes be made to the Pricing Table?

6. Can the pricing table be inserted via shortcode or HTML into a page.

7. Are there any help or training modules available for 3.5?

Many thanks!

Justin

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hi Justin!

    1. The pricing tables have spaces in them - how can we fix this?
    http://screencast.com/t/cHLdUTp5t

    I've seen this on a few member sites, it usually has to do with the theme you're using. There's some CSS we can do to adjust this. (See the bottom of the post for more info there.)

    2. The sign up fields are messy and cramped:
    http://screencast.com/t/afn2AJjj

    Same here. I used the line-height CSS property to make mine look a bit better. We can try that on your site as well.

    3. What does choosing a Raw HTML layout as a Gateways layout in the Pricing Table allow us to do?

    Your active payment gateways will show under the pricing/features table, you have a choice of the tabbed styling we included, or using raw HTML if you want to alter how that looks.

    4. Is it possible to change or edit the "Take advantage of extra savings by paying in advance." text?

    Sure thing! We advise using a tool like our Ultimate Branding to make the text change, so it's a translation, not an edit to the core plugin files, which would be overwritten/lost the next time ProSites updates. Ultimate Branding has a text change module that makes simple text changes super easy. https://premium.wpmudev.org/project/ultimate-branding/

    5. Can any styling changes be made to the Pricing Table?

    Sure thing. If you can give me a link to your Pro Sites sign up page, I can give you the CSS you'll need, if you outline how you want it to look.

    6. Can the pricing table be inserted via shortcode or HTML into a page.

    Not at this time.

    7. Are there any help or training modules available for 3.5?

    Patrick just updated the Usage guide for ProSites, you'll see it under the Usage tab on the product page, here: https://premium.wpmudev.org/project/pro-sites/

    Hope this helps!

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hi, Justin!

    Try this:

    #prosites-checkout-table .bSe ul li {
    margin-bottom: 0;
    }
    
    #prosites-user-register {
    line-height: 2.3em;
    }

    Do you have a custom CSS plugin? If you've got Jetpack, it comes with one; some themes include a CSS editor, or you can get a plugin, like this one: https://wordpress.org/plugins/simple-custom-css/. Or, if you're using a child theme, you can just add this to the CSS file for your child theme.

    Thanks!

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey there, Justin!

    Your theme has some funky element names, let's try to work around those with this:

    .pricing-column .title {
    margin: 0;
    }
    
    .feature-section {
    display: none;
    }
    
    input#blogname, input#username, input#user-email, input#blog_title {
    line-height: 1.7em;
    }

    The gaps in the border are from the features section you're not using, and your theme adds an automagic 20px bottom margin to titles, the first bits of CSS in this post should get rid of those.

    The inputs are a little trickier, but the last CSS section there should get it for you. Let me know if it doesn't, some themes need a little more sweet talking than others. :slight_smile:

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hello!

    Okay! This will get rid of the additional gap.

    .pricing-column:first-child li.summary {
      margin-bottom: 0;
    }

    And this is going to need a little tweaking (specifically the 40% width and the 30% margin) to get it just like you want, but try this for the input fields:

    input#blogname, input#blog_title {
      line-height: 1.7em;
      width: 40%;
      float: right;
      margin-right: 30%;
    }
    
    #prosites-user-register .username input#user_name {
      line-height: 1.7em;
      width: 40%;
      float: right;
      margin-right: 30%;
    }
    
    #prosites-user-register .email input#user_email {
      line-height: 1.7em;
      width: 40%;
      float: right;
      margin-right: 30%;
    }

    Use the CSS above to replace this line I gave you before:

    input#blogname, input#username, input#user-email, input#blog_title {
    line-height: 1.7em;
    }

    Crossing my fingers! :slight_smile:

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey Justin!

    Okay, this should finally do it:

    #prosites-checkout-table .summary.no-periods {
    margin-bottom: 0!important;
    }
    
    #prosites-user-register #privacy{
    padding-top: 5%;
    }
    
    #prosites-user-register .blog_title {
    padding-bottom: 2%;
    }
    
    #prosites-user-register .username {
    padding-bottom: 2%;
    }
    
    #prosites-user-register .email {
    padding-bottom: 2%;
    }

    Crossing fingers, toes, and eyes this time. :slight_smile:

    Thanks!

  • Justin
    • The Crimson Coder

    Hi @Michelle,

    I think its an improvement, there are only 2 issues left:
    http://screencast.com/t/mlnNQImnj3mh

    The spacing by 1. and 2.

    It's possible that I have mis understood which css code to leave and which to replace as we have made a few changes. Here is how I have it now:
    http://screencast.com/t/rG5RPNvoGJIA

    ----
    2 Questions :slight_smile:

    at 3. how do I remove this choice option?

    at 4. is it possible to make the button bigger and give it a color (orange)?

    Thanks so much for you help!!

    Justin :slight_smile:

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hello!

    Your site owes us both a beer. :wink:

    Okay, your theme keeps trying to add a margin to the membership level title, and that's what keeps dropping in that gap. In the dev console, my CSS got rid of it. Let's go for broke here and try the name of the theme's parent element, like so:

    .bSe ul li, .bSe ol li {
    margin-bottom: 0 !important;
    }

    After adding that, check your other pages to make sure list formatting hasn't gone gonzo on us.

    To hide the language selector and make a fancy orange button:

    //hide language selection
    #prosites-user-register #language-selection {
    display: none;
    }
    
    //fancy orange button
    #check-prosite-blog {
      height: 40px;
      background-color: orange;
      border-color: orange;
      margin-top: 10px;
    }

    You can use hex color codes in place of "orange" above. The margin may need adjusting for your view, too. Without it, the button was right up against the text above it. You can change the button size, as well, just change the height variable above. :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.