Styling the 'Protected Content' components

Hi,

Just wondering where I find the css to style up the buttons and membership tables for the shortcodes? I can only find the php files for this unfortunately and adding classes to the shortcodes doesn't work.

Thanks,

Ash

  • Adam Czajczyk

    Hey Ash,

    I hope you're well today!

    Price tables (including buttons) are enclosed within the <div> element with class "ms-form-price-boxes". Inside are the pricing tables or - actually - membership signup forms.

    For example to style signup buttons you just add style definition for .ms-membership-form-wrapper .ms-signup-button.

    Exapmle styling for button:
    .ms-membership-form button {
    float:left;
    height:auto;
    font-family:Arial;
    font-weight:bold;
    color:#FFF;
    border:1px solid red;
    background:rgba(0,0,0,0.5);
    }

    The above style will make the button semi-transparent black with completly irrelevant red border :slight_smile:

    Hope that helps. In case of any further questions I'll be glad to help.
    Cheers,
    Adam

  • ash

    Hi,

    Thanks for getting back to me.

    I tried the code you provided and it didn't work unfortunately. I'm also a little confused with it as it seems the class names you have applied on the div differ from that of the actual css. Can you explain to me why I need to define the classes as '.ms-membership-form-wrapper .ms-signup-button' but then apply the styles to '.ms-membership-form button' please?

    I've placed a [ms-membership-buy id="82" label="SUBSCRIBE"] shortcode on a page and then used the following to apply styles to this button:

    .ms-membership-buy { }

    Is this how the classes work with the shortcodes? Effectively the shortcode name is the class like how you would add a normal class to an element.

    I can't find the php file which has all the specific divs for the shortcodes either. Would you be able to point me in the right direction please?

    Many thanks,

    Ash

  • calvinrogercanas

    Hey there @ash,

    Hope you're well! :slight_smile:

    Would my applying styles to a child theme stylesheet cause any issues with the result? Ideally I don't want to have to amend the styles eachtime a new theme update is released is all, hence why I opted for using a child theme.

    You can put all your custom style for subscribe button and membership table in your child theme's style.css so whenever the plugin will release an update you don't need to worry about your custom code being wipe out. So basically child theme is the best place for your custom css code.

    Let me know if it helps! :slight_smile:

    Best Regards,
    Calvin

  • ash

    Thanks Calvin, that doesn't answer my initial qeuries though:

    Hi,

    Thanks for getting back to me.

    I tried the code you provided and it didn't work unfortunately. I'm also a little confused with it as it seems the class names you have applied on the div differ from that of the actual css. Can you explain to me why I need to define the classes as '.ms-membership-form-wrapper .ms-signup-button' but then apply the styles to '.ms-membership-form button' please?

    I've placed a [ms-membership-buy id="82" label="SUBSCRIBE"] shortcode on a page and then used the following to apply styles to this button:

    .ms-membership-buy { }

    Is this how the classes work with the shortcodes? Effectively the shortcode name is the class like how you would add a normal class to an element.

    I can't find the php file which has all the specific divs for the shortcodes either. Would you be able to point me in the right direction please?

    Many thanks,

    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.