WordPress Registration Form Plugin (CMREG) - Extra - Custom CSS Styling

Custom CSS

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.

The WordPress Registration Form Plugin allows 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.

Custom CSS settings - WordPress Plugin User Registration — Custom CSS settings

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:

Choosing between standard of fancy styles - User Registration WordPress — Choosing between standard of fancy styles

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:

Adding custom CSS - WordPress Custom Login — Adding custom CSS

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.

Example of CSS with low priority - WordPress Social Sign In Plugin — Example of CSS with low 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?

Get WordPress Registration Form Plugin Now ➔

	More information about the WordPress Registration Form 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