To follow up. I have the css files in the editor, but am having trouble getting them into my custom css file so that they work.
From what I can tell, all of the CSS is used by the WYSIWYG editor. Personally, I renamed all of CSS elements in the plugin’s CSS file and moved it all to my theme CSS file so my changes wouldn’t be overwritten by a plugin update. Take a look at user.dev.css and work from that.
There are 3 stylesheets that the plugin uses for the front end:
- css/user.css (optimized version; readable version is user.dev.css) — this file contains styles used to display campaign/cause content as well as the display of the form fields
- css/smoothness/jquery.ui.pfund.css — this file contains styling for the popup window and the buttons. It is from the jQuery UI javascript library and is the Smoothness theme from that library, which can be further customized here: jQuery UI Themeroller
- css/jquery.validationEngine.css — this file contains the styles for the validation error messages
As far as overriding these styles you have several options:
- Write css selectors that are more specific than the ones in the plugin
-
In your theme’s function.php, add the following code to disable loading of personal fundraiser css. For example:
function my_print_styles() {
if (!is_admin()) {
//jquery.validationEngine.css
wp_deregister_style('jquery-validationEngine');
}
//jquery.ui.pfund.css
wp_deregister_style('jquery-ui-pfund');
//user.css
wp_deregister_style('pfund-user');
}
add_action( 'wp_print_styles', 'my_print_styles' );
NOTE — If you do this you will have to provide your own styling for all of personal fundraiser by copying and modifying the existing files into your theme. If you only need to modify one file, then you would only deregister that style.
- Use !important declarations in your theme’s style to override the css classes declared by the plugin. See http://css-tricks.com/when-using-important-is-the-right-choice/.
