Customize Your UserPro CSS

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.

[dt_quote type=”pullquote” layout=”left” font_size=”normal” animation=”none” size=”1″]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.[/dt_quote]

Wrap Up

[dt_list style=”1″ dividers=”true”]

[dt_list_item image=””]Create an empty CSS file at your_theme/userpro/skins/default/style.css[/dt_list_item]

[dt_list_item image=””]Put your custom skin or CSS rules in that file[/dt_list_item]

[dt_list_item image=””]Use original plugin skin for reference/help wp-content/plugins/userpro/skins/default/style.css[/dt_list_item]

[dt_list_item image=””]Save your custom skin and refresh your site![/dt_list_item]

[/dt_list]

[dt_gap height=”10″ /]

[dt_divider style=”thin” /]

[dt_gap height=”10″ /]

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.

[dt_gap height=”10″ /]

[dt_divider style=”thin” /]

[dt_gap height=”10″ /]

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:

[dt_gap height=”10″ /]

[dt_divider style=”thin” /]

[dt_gap height=”10″ /]

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.

[dt_gap height=”10″ /]

[dt_divider style=”thin” /]

[dt_gap height=”10″ /]

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.

Was this article helpful?

Related Articles

Leave A Comment?