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.

CSS Style

Since the version 3.4.4, the plugin allows to switch between CSS styles.

Find the option Look and feel CSS. You can choose between two options:

  • Standard Style - This option enables default css style for all forms and buttons provided by the plugin. This option can be useful if you want to implement your unique design.
  • Fancy Style - This option enables a pre-made style for forms and buttons. This option is chosen by default.

Both options can be additionaly configured with custom CSS in the area below.

Standard Style Example:

Fancy Style Example:

Typical Modifications

Custom CSS 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; }

  • Change color of placeholders in form fields

.cmreg-form ::placeholder {

/* Chrome, Firefox, Opera, Safari 10.1+ */

color: #ea342e !important;

opacity: 1; /* Firefox */


.cmreg-form :-ms-input-placeholder {

/* Internet Explorer 10-11 */

color: #ea342e !important;


.cmreg-form ::-ms-input-placeholder {

/* Microsoft Edge */

color: #ea342e !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.