Title: [Plugin: Personal Fundraiser] CSS STYLING
Last modified: August 20, 2016

---

# [Plugin: Personal Fundraiser] CSS STYLING

 *  [jerryminer](https://wordpress.org/support/users/jerryminer/)
 * (@jerryminer)
 * [14 years ago](https://wordpress.org/support/topic/plugin-personal-fundraiser-css-styling/)
 * Greetings –
    How can I change the styling of buttons, fonts, colors, etc. Also
   to modify the appearance of the form for starting the campaign.
 * [http://wordpress.org/extend/plugins/personal-fundraiser/](http://wordpress.org/extend/plugins/personal-fundraiser/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Thread Starter [jerryminer](https://wordpress.org/support/users/jerryminer/)
 * (@jerryminer)
 * [14 years ago](https://wordpress.org/support/topic/plugin-personal-fundraiser-css-styling/#post-2774720)
 * 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.
 *  [ChipH](https://wordpress.org/support/users/chiph/)
 * (@chiph)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/plugin-personal-fundraiser-css-styling/#post-2774961)
 * 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.
 *  Plugin Author [John Kleinschmidt](https://wordpress.org/support/users/johnkleinschmidt/)
 * (@johnkleinschmidt)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/plugin-personal-fundraiser-css-styling/#post-2774962)
 * 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](http://jqueryui.com/themeroller/#ffDefault=Verdana,Arial,sans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px)
    - **css/jquery.validationEngine.css** — this file contains the styles for the
      validation error messages
 * As far as overriding these styles you have several options:
    1. Write css selectors that are more specific than the ones in the plugin
    2.  In your theme’s function.php, add the following code to disable loading of 
       personal fundraiser css. For example:
    3.     ```
           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' );
           ```
       
    4. 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.
    5. 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/](http://css-tricks.com/when-using-important-is-the-right-choice/).

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘[Plugin: Personal Fundraiser] CSS STYLING’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/personal-fundraiser_7a8b84.svg)
 * [Personal Fundraiser](https://wordpress.org/plugins/personal-fundraiser/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/personal-fundraiser/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/personal-fundraiser/)
 * [Active Topics](https://wordpress.org/support/plugin/personal-fundraiser/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/personal-fundraiser/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/personal-fundraiser/reviews/)

 * 3 replies
 * 3 participants
 * Last reply from: [John Kleinschmidt](https://wordpress.org/support/users/johnkleinschmidt/)
 * Last activity: [13 years, 11 months ago](https://wordpress.org/support/topic/plugin-personal-fundraiser-css-styling/#post-2774962)
 * Status: not resolved