Pelcro | The #1 Subscription and Membership Management Software

CSS Documentation

Learn more about how to customize the CSS of our widgets.

  • Override the CSS to your liking

    Pelcro uses the !important tag to ensure all CSS styles are prioritized. In order to override the CSS, add another CSS rule with !important , and either give the selector a higher specificity (adding a tag, id or class to the selector), or add a CSS rule with the same selector at a later point than the existing one (before end of body). This works because in a specificity tie, the last rule defined wins. Example below to override the submit button color.

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-submit-btn {background-color: #3684a8 !important; border-color: #3684a8 !important;}

    In the example above, the selector of .pelcro-prefix-submit-btn is #pelcro-prefix-app, so as shown above, we added another selector (.pelcro-prefix-modal) to give it more specificity and hence override it.

Ready to get started?

Get in touch, or create an account.

Try for free

or contact sales