Plugin to Convert Levels page to DIV layout (plus a fancy Three Column style code idea)

by Kimberly Coleman | Plus and Unlimited Member Content, Recipes

The default Paid Memberships Pro Membership Levels page is a table layout. Some membership pricing is better displayed NOT in a table – so we’ve just released an add on plugin that loads your membership levels in a DIV layout, and also includes the description text for the level (if you have entered it in the Edit Membership Level admin page) for each level.

View or Download the Add On

Default Levels page layout

Default Levels page layout

Layout using ONLY the new DIV layout add on

Layout using ONLY the new DIV layout add on

Layout using new add on + custom CSS in this post

Layout using new add on + custom CSS in this post

Continue reading for the special CSS code to achieve this look!

This page requires a Plus Account or higher.

Already have an account?

New to this site?

Use CSS to hide an empty column on pmpro_levels page: No recurring payment

by Kimberly Coleman | Plus and Unlimited Member Content, Recipes

If you are using the default pmpro_levels shortcode on your Membership Levels page – depending on your pricing you may have an empty column under the “Subscription Information” or “Initial Payment” heading. CSS to the rescue! Here’s a block of code that can be used to hide the “Subscription Information” column (useful if all of…

This page requires a Plus Account or higher.

Already have an account?

New to this site?

Membership Account CSS from pre-1.7 Plugin Version

by Kimberly Coleman | Recipes

Some people have asked to restore the floating, outlined boxes on the Membership Account page (many default styles were removed and simplified with the v1.7 release to give your theme defaults more control over the plugin appearance). Just place this block of code right into the Text / HTML editor of the page containing your account shortcode (pmpro_account) and you are good to go.

<style>
#pmpro_account-profile.pmpro_box {float: left; border: 1px solid #CCC; width: 45%; padding: 1%; }
#pmpro_account-links.pmpro_box {float: left; border: 1px solid #CCC; width: 45%; padding: 1%; }
#pmpro_account-invoices.pmpro_box {float: right; border: 1px solid #CCC; width: 45%; padding: 1%; }
#pmpro_account .pmpro_box h3 {border:none; background: none; border-bottom: 1px solid #CCC; padding: 0 0 .5em 0; margin: 0 0 .5em 0;  }
</style>