CM Registration (CMREG) - Extra - Custom CSS Styling

Custom CSS

Back to User Guide

Quick Read

What is CSS

CSS allows you to make changes that WordPress, themes and even the plugins don't support. Be sure to test all changes before applying! 
Learn more: General Support - Advanced - Custom CSS

CreativeMinds Can Help

If you prefer not modifying CSS and visual elements by yourself, CreativeMinds can help adapting CM plugins to your theme.
Learn more: Plugin Installation Service for WordPress by CreativeMinds

What is This Feature

CSS is a language that describes the style of a. It does so by describing how the HTML elements should be displayed.

Registration and Invitation Codes allow you to conveniently place your custom CSS styles to change the layout of the Front-End plugin elements. 

Accessing The Feature

From the WordPress dashboard navigate to CM Registration Pro → Settings → Custom CSS tab.

Typical Modifications

Custom CSS support was expanded in version 2.7.3 of the plugin, which now provides a series of pre-made rules to speed up your edits. 

To use these, choose the relevant one and then click Add, as shown:

Typical Style Modifications

  • Change form heading text
    .cmreg-form h2 { color:#141412 !important; font-size:13px !important; }
  • Change form description text
    .cmreg-form .cmreg-form-text { color:#141412 !important; font-size:13px !important; }
  • Change form labels
    .cmreg-form label { color:#141412 !important; font-size:13px !important; }
  • Change form input (text, password, email, number) field
    .cmreg-form input { background:#141412 !important; font-size:13px !important; }
  • Change form textarea field
    .cmreg-form textarea { background:#141412 !important; font-size:13px !important; }
  • Change the form button
    .cmreg-form button { background:#141412 !important; font-size:13px !important; }
  • Change form field description text
    .cmreg-form .cmreg-field-description { color:#141412 !important; font-size:13px !important; }
  • TIP: Making your custom CSS priority with !important

    If your custom CSS is not working and appearing crossed out, it means other rules have higher priority. 

    You can set your rule as more important by adding the !important property. 

    For example, this line

    .cmreg-form button { background:#141412; font-size:13px; }
    Would become this line
    .cmreg-form button { background:#141412 !important; font-size:13px !important; }

    Read more about !Important: How to apply !important in CSS?

    More information about the CM Registration and Invitation Codes Bar WordPress  Plugin

    Other WordPress products can be found at CreativeMinds WordPress Store

    Let us know how we can Improve this Product Documentation Page

    To open a Support Ticket visit our support center
    Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.