eMember – How to replace CSS, to customize the look, for login and registration

[Olik]

This is more information, than a question. Even though I would like to ask the developers, if they see maybe a more elegant way to solve it.

The matter is, eMember stylesheet defines a lot of details, and many of them by default already are defined by our design theme, to something that matches the theme.

So it was a task of redefining again to what was defined in our design theme, after that interface being redefined by eMember css.

But since some details are defined by eMember css as !important, they are even harder to redefine generally – there is a need to go over every id, to define them.

I know about the WP Custom CSS, but it sounded weird to redefine something over again, to what it was defined to be before. And very complicated, since in our design theme there’re different definitions for mobile etc.

Then I thought, if I removed all the eMember definitions, and only defined what I needed to add, it would be simpler and it could also work better.

So I started to look for the way to maybe remove the code from eMember plugin. I had (at least) two choices: to remove the including of the stylesheet, in wp_eMember1.php, or to clean the inner content of the eMember_style.css.

But then, when the plugin is updated, I would need to compare and replace lines (if changing in php) or replace the whole file (if cleaning in css), and do some replacing again. It would not be very good.

Then I heard of deregistering stylesheets, and I found, what looks to me like an elegant solution:

1. when I load the site, I would just deregister the eMember css,

2. and I would add only the definitions I need to add (for example, .emember_hidden {display:none;}) to my child theme style.css.

This way nothing is redefined several times, only defined as needed, and I can in the future simply update the plugin, without comparing/replacing any files in it.

Unless, of course, in the plugin this file name changes. But I think for what is now, this is the best possible solution, and it can be used even for js and php files, that are included. What do you think?

For those who wants to use this:

There is a difference between deregistering styles and dequeuing them: those who were registered, should be deregistered, etc.

So I found the lines in wp_eMember1.php, where the css is included:

wp_enqueue_style(‘eMember.style’, WP_EMEMBER_URL . ‘/css/eMember_style.css’, array(), WP_EMEMBER_VERSION);

that is why the way to solve it, was to add to my child theme’s functions.php:

add_action( ‘wp_enqueue_scripts’, ‘remove_stylesheets’, 20 );

function remove_stylesheets() {

wp_dequeue_style( ‘eMember.style’ );

}

That’s it.

[admin]

What you did is perfectly fine. Removing the stylesheet from the queue is a clean solution.

You could also just remove all the CSS from the emember’s stylesheet file and make it empty. Since you are removing everything, you don’t have to worry about looking at the change after an upgrade. You just remove everything from that CSS file again after the update (or overwrite with an empty CSS file).

[Olik]

Thank you!

Regarding the removing – I just wanted to make it hand-free, as much as possible, for the future. When I dequeue it, the code of dequeuing is in my child theme files, so I won’t need to update anything again, when I install new versions of the plugin.

[Author]

Posts