Ultimate member removed color settings

Since the new UM version released in April 2018, you can not find color settings anymore. If you want to adjust colors of profiles and member cards, like most of us, you will need to add some custom CSS. Personally I think this a step back in time. But, the reason Um has made this adjustment makes sense, and here you can read more about this discussion on wordpress.org

After my concern about this Um has announced to look into a free extension to handle the color settings, let’s hope so!

Here is the How to from Ultimate member:

How to change default Ultimate member “blue” color using CSS

Ultimate member default blue color #3ba1da and hover color #44b0ec can be overwritten using CSS.
Since WordPress 4.7, users can add custom CSS directly from WordPress admin area  Appearance >> Customize >> Additional CSS.  Some premium themes provide Custom CSS section under the themes options. You can also use custom CSS plugins which allows you to store your custom CSS independent from your theme.

Here is the sample CSS which you can add to your custom CSS section and replace blue #3ba1da and hover #44b0ec colors with any color you need according to the design of your website.

.um .um-tip:hover,
.um .um-field-radio.active:not(.um-field-radio-state-disabled) i,
.um .um-field-checkbox.active:not(.um-field-radio-state-disabled) i,
.um .um-member-name a:hover,
.um .um-member-more a:hover,
.um .um-member-less a:hover,
.um .um-members-pagi a:hover,
.um .um-cover-add:hover,
.um .um-profile-subnav a.active,
.um .um-item-meta a,
.um-account-name a:hover,
.um-account-nav a.current,
.um-account-side li a.current span.um-account-icon,
.um-account-side li a.current:hover span.um-account-icon,
.um-dropdown li a:hover,
color: #3ba1da!important;

.um .um-field-group-head,
.um .um-members-pagi span.current,
.um .um-members-pagi span.current:hover,
.um .um-profile-nav-item.active a,
.um .um-profile-nav-item.active a:hover,
div.uimob800 .um-account-side li a.current,
div.uimob800 .um-account-side li a.current:hover
background: #3ba1da!important;

.um .um-field-group-head:hover,
.picker–focused .picker__day–highlighted,
.picker–focused .picker__list-item–highlighted,
.picker–focused .picker__list-item–selected {
background: #44b0ec!important;

.um input[type=submit]:disabled:hover {
background: #3ba1da!important;

.um input[type=submit].um-button,
.um input[type=submit].um-button:focus,
.um a.um-button,
.um a.um-button.um-disabled:hover,
.um a.um-button.um-disabled:focus,
.um a.um-button.um-disabled:active {
background: #3ba1da!important;

.um .um-button.um-alt:hover, .um input[type=submit].um-button.um-alt:hover {
background: #e5e5e5!important;

.um .um-button.um-alt, .um input[type=submit].um-button.um-alt {
background: #e5e5e5!important;

.um a.um-link {
color: #3ba1da!important;

.um input[type=submit].um-button:hover,
.um a.um-button:hover {
background-color: #44b0ec!important;

.um a.um-link:hover,
.um a.um-link-hvr:hover {
color: #44b0ec!important;

Leave a comment

Your email address will not be published. Required fields are marked *