This short guide helps you customize your UserPro css. First, in order to make custom css rules that won’t be overwritten by a plugin update, go to your theme folder and create a folder structure like this:

Now create an empty style.css file and place it inside this folder. Voila! Any custom rules you add here will be loaded to UserPro. Now you have just made the plugin aware of your custom theme/skin! You could create different skin names as long as you choose it as your default theme in plugin options.

But how can I customize some CSS stuff with my new style.css I just created?

Good question. We have some tips as a starting guide for you here.

These are basic customization tips, you can add any custom rules such as backgrounds, shadows, colors. You simply need to know the element class that you want to customize and then you can apply any rules to it. You can always use the original skin file located at plugins folder /skins/default/style.css for reference to help you find the elements and customize them in your custom skin.

Wrap Up

  • Create an empty CSS file at your_theme/userpro/skins/default/style.css

  • Put your custom skin or CSS rules in that file

  • Use original plugin skin for reference/help wp-content/plugins/userpro/skins/default/style.css

  • Save your custom skin and refresh your site!

Changing the profile image to square instead of rounded

Each element in UserPro has a specific class. The profile image is handled by .userpro-profile-img class so If we wanted to make the profile image square instead of a rounded image, we need to add this to our custom skin.

Setting the border-radius to 0px will shut off the rounded edges.

Changing the plugin heading background color

To change the heading background color you need to adjust the background color like this in your custom skin:

Change the active font color used by the plugin

The plugin has a common color that is used to display the text. If your theme is dark, you will need to change the color probably. You can adjust the active font color for userpro plugin by adding this rule to your custom skin:

You can change the color value to the color you want. Also you can add a background color to override the default white backgorund.

Changing the field label text color

The field label text-color can be customized by adding this rule to your custom skin. It will override the default skin label color.

That rule makes the label color #666.