Blocks layout

Hi Philippe, thank you for reaching out to the Paid Memberships Pro team.

Button styling can be changed under Memberships > Settings > Design where you can choose a primary and accent colour.

Any additional styling changes to the front-end buttons (or in cases where your theme might be applying a colour too), custom CSS would be required.

Kind Regards,
Jarryd
Support Manager at Paid Memberships Pro

Thank you Jarry,

Now, how do I change the look of the button requiring people to log in? Example: https://onehomeplanet.com/slicewp/affiliate-leaderboard/

Having thought about it, what suits me best is the Minimal global style. Unfortunately, Level and Price rows are not aligned (see https://onehomeplanet.com/pmp/levels/).

Thanks for your help again.

Thank you for your feedback. This CSS should tighten up the rows and have everything line up as expected. This can be added to your Custom CSS field found under Appearance > Customizer.

.pmpro_level td p {
    margin: 0 !important;
}

Kind Regards,
Jarryd
Support Manager at Paid Memberships Pro

Hi Jarry,

I had to give up on the Minimal global style because other PMP blocks were then totally messed up. Back to the Default one, the Membership Levels List block’s bottom padding is not quite right (see https://onehomeplanet.com/pmp/levels/), and the CSS code you gave does not change that.

Thank you for your feedback. I’ve adjusted the padding at the bottom of the card for you:

.pmpro_card_content {
    padding-bottom: 12px !important;
}

Kind Regards,
Jarryd
Support Manager at Paid Memberships Pro

Hi Jarryd,

It looks good for the button asking for people to log in (https://onehomeplanet.com/slicewp/affiliate-leaderboard/), ok for membership levels (https://onehomeplanet.com/pmp/levels/) though the top padding then lacks symmetry, and awful on other blocks (https://onehomeplanet.com/pmp/checkout/?pmpro_level=8).

The basic issue seems that PMP did not give the same padding to all its blocks/cards. What do you think?

The added padding is intentional to mimic ‘cards’ with some added spacing at the bottom. Unfortunately when it comes to front-end/styling changes there isn’t a one box fixes all solution however I appreciate your feedback.

You can change the CSS I sent you previously to work on the levels page. You would need to choose a class on the leader board page (and replace LEADER_BOARD_CLASS_NAME_TOCHANGEHERE with it) so that the styling applies to those elements too.

.pmpro_level_group .pmpro_card_content,
.LEADER_BOARD_CLASS_NAME_TOCHANGEHERE .pmpro_card_content {
    padding-bottom: 12px !important;
}

Kind Regards,
Jarryd
Support Manager at Paid Memberships Pro

It is much better, thank you. The one last thing is the Custom Membership Required Message (https://onehomeplanet.com/slicewp/affiliate-leaderboard/). Is there a way to fix the padding for this one in particular?

There aren’t any named CSS classes on this page but the following CSS will work on this page:

.post-23558 .pmpro_card_content {
    padding-bottom: 12px !important;
}

Kind Regards,
Jarryd
Support Manager at Paid Memberships Pro

Merci beaucoup !

Always a pleasure, Philippe!

Kind Regards,
Jarryd
Support Manager at Paid Memberships Pro