Allow UM CSS Customization

I was in the same boat Kru. Instead of purchasing I dropped them and went with Buddypress, and I’m going to purchase Memberpress to go with it. Buddypress is easily customizable out of the box and there is support all over for it.

Thnks,
Gon’a take a look at them, shame I was happy with UM except that it changes my backend that I use for my users.

Took me some time to figure out, but the solution was simpler then I thought. My problem was just showing up on the backend and Norm1’s solution works on the backend as well but I had to use the “admin_enqueue_scripts” instead (as the name suggests, duhhh) ?? So:

add_action( ‘admin_enqueue_scripts’, ‘remove_stylesheet’);

function remove_stylesheet() {

wp_dequeue_style(‘um_styles’);

}

There was a lot of discussion on where and how to add the code, and if you don’t want to fiddle around with child theme, functions.php etc. (like me) use the brilliant plugin “snippets”

Hello,

I solved the css problem adding !important in css code.

I hope it can help somebody.

??

@norm1 – your post and code was SUPER helpful.

Here is the process I used to get a css file I can edit:

Example: I want to edit um-styles.css,

1) I ran Norm’s dequeue code for that file,

$um_priority = apply_filters( ‘um_core_enqueue_priority’, 100 );
add_action( ‘wp_enqueue_scripts’, ‘gbfl_dequeue_um_scripts’, $um_priority + 1);
function gbfl_dequeue_um_scripts() {

wp_dequeue_style(‘um_styles’);

}

Then:
2) created a new file in my theme child folder (new-um-style.css)
3) copied the script from um-style.css and pasted it into new-um-style.css (to then edit as much as I want)
4) then I added this code after Norm’s code in the child functions.php file:

function enqueue_my_custom_style_for_UM(){
wp_enqueue_style(‘um_styles’, get_stylesheet_uri(), array( ‘reset’ ) );
wp_enqueue_style( ‘reset’, get_stylesheet_directory_uri() . ‘/new-um-styles.css’);

}

add_action(‘wp_enqueue_scripts’, ‘enqueue_my_custom_style_for_UM’);

This worked and got the website looking as before! Now I can go into my new-um-styles.css and change things around.

It sucks that the css files are all over the place, so I will need to do this with likely all the ones Norm originally listed, but to keep the instructions clear here, I just used the one file.

I hope this helps others out!!!

Every time I try it it breaks my site… Not sure exactly why.
THe Dequeue portion seems to be ok. But when I ad the Equeue portion it bombs the site each time.

THoughts?

@emdizzle I am really glad it helped.

@alfredwestlake What are you trying to add to the queue?

Hello,
I was just trying the functions just to see how they worked, or didn’t. I want to be able to edit the css for the forms and other things. So I was trying the above code.
I created a new-um-styles.css file and put it in my child theme folder.
I added the following to my child theme functions file:

$um_priority = apply_filters( ‘um_core_enqueue_priority’, 100 );
add_action( ‘wp_enqueue_scripts’, ‘gbfl_dequeue_um_scripts’, $um_priority + 1);
function gbfl_dequeue_um_scripts() {

wp_dequeue_style(‘um_styles’);

}

function enqueue_my_custom_style_for_UM(){
wp_enqueue_style(‘um_styles’, get_stylesheet_uri(), array( ‘reset’ ) );
wp_enqueue_style( ‘reset’, get_stylesheet_directory_uri() . ‘/new-um-styles.css’);

}

add_action(‘wp_enqueue_scripts’, ‘enqueue_my_custom_style_for_UM’);

This crashes my site.

THanks,
Alfred

If we need to become css gurus then why not dump UM and WordPress? Just code in HTML/jQuery/css. I’m getting really fed up with this big steaming pile known as WordPress and Ultimate Member. The whole point of it all was to speed up website development – not slow it down. When you can’t even change the font family via an obvious and intuitive widget setting then you know you got crap on your hands. Styling only possible via settings when using the UM theme?? Who thought of that one? There’s a plethora of themes available and we’re supposed to toss out our existing theme and use UM instead so we can get consistent look and feel? Or spend all our time on css workarounds/hacks? It’s taking a lot of restraint to keep me from using some colorful expletives just now.

Really thankful to find this forum. I’m helping a client with their site that is using Ultimate Member. After this experience, I’m also feeling like it’s not a tool I’ll recommend to most people. The majority of my clients want something way beyond these style presets. I find it’s more effective & efficient to define my own user types and custom fields and code a view rather than battling their code. This plugin is not a time saver.

I’m wondering if Ultimate Member adopting Beaver Builder for their own site a couple of years back might encourage them to invest more time and resources into styling functionalities.

I’m just tossing me two cents in to:

– add to the list of users who would kindly request you STOP using !important in your CSS!

– and to thank Norm1 for the dequeue solution, which will come in handy

Thanx to all of you – your contributions made my day.

Important: using emdizzle’s recipe has created two bugs:

a) The file name in step 2 is missing an “s”. It should be “new-um-styles.css” as it is used in step 4

b) Copying the text from the browser might bring you to wrong characters being pasted in your editor. Make sure, the text in your editor of choice is really using the string escape character for php (“‘”). At best, use a php code aware editor and check that the text between the “‘” is a string.

With this modifications it runs like a charm. I’ve done this with little experience in CSS. Thanx again!

Thanks for the suggestions, I’m just spending my time writing !important everywhere and it works often, although it’s such a bad habit that I feel code like this shouldn’t even be allowed. Anyway my only concern with dequeuing the original monster css would be that if they do an update to the plugin and the css classes etc then it would be a mess to figure out what changed and how? Thoughts?

I have somewhat of a crude and dirty solution.

I just installed a plugin that allows you to put code into the <head> and put my custom CSS in there. As most of you know, <head> CSS overrides external CSS, so that made my !important tag more important that UM’s CSS’s !important tag.

Don’t forget to use <style type="text/css"> </style> so that the system knows its CSS.

If you’re wondering which plugin I used, I used “Head & Footer Code”, but I’m sure there are plenty other plugins out there that do the same.

If you don’t like installing unnecessary plugins, then I’m sure you can put your header file into your child theme and add the CSS directly in there. I haven’t tried that so I don’t know how well it will work.

The good thing about doing it this way is that you don’t have to rewrite a bunch of CSS from the files you dequeued, you just need to overwrite the stuff you want changed.

@sharcs Let me know how did you do it by providing examples. My dropdown select2 is not showing properly in iOS. Weird that it works on other devices but not iOS.