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

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

    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

  • ash
    • Design Lord, Child of Thor

    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. Thought I'd mention this anyway in hope that you have broader visbility.

    Many thanks :slight_smile:

  • calvinrogercanas
    • New Recruit

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

    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

  • ash
    • Design Lord, Child of Thor

    I have managed to get some styles to work but the label copy colour doesn't change on the buttons, even though I've applied the same styles from existing theme buttons.

    Do I need to apply specific styles to the label also and if so, how?

    Thanks :slight_smile:

  • ash
    • Design Lord, Child of Thor

    Ok, I have solved the button/label styling. I simply included an 'a tag' to apply styles to every element of the button:

    ".ms-membership-buy a {}"

    Obvious perhaps, but I was thrown off the scent a little with the inclusion of 'button' and how classes were called from the shortcode.

    I'll have a stab at the tables now. Wish me luck!

  • Adam Czajczyk
    • Support Gorilla

    Hello Ash,

    I hope you're well today and I'm glad you managed to solve the problem!

    IMHO there's no such things as an "obvious" solution - the best one is the one that works for you. So great job! Can I consider this topic as resolved?

    Also, as you wish: good luck!

    Cheers,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.