Title: [Plugin: Gravity Forms WYSIWYG] CSS Stylesheet
Last modified: August 20, 2016

---

# [Plugin: Gravity Forms WYSIWYG] CSS Stylesheet

 *  [hittheroadjack](https://wordpress.org/support/users/hittheroadjack/)
 * (@hittheroadjack)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/plugin-gravity-forms-wysiwyg-css-stylesheet/)
 * Hi and thanks for this great addon.
    It works for me close to perfect – one exception:
   the text area has no background color defined. What css stylesheet is used for
   this – the addon does not come with its own?
 * [http://wordpress.org/extend/plugins/gravity-forms-wysiwyg/](http://wordpress.org/extend/plugins/gravity-forms-wysiwyg/)

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

 *  Plugin Author [bradvin](https://wordpress.org/support/users/bradvin/)
 * (@bradvin)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/plugin-gravity-forms-wysiwyg-css-stylesheet/#post-2870560)
 * Hi there
 * I think your theme’s css is overriding the textarea’s background colour.
    You
   might need to add some custom CSS to your theme to take this into account, as
   there is no CSS added by the plugin
 *  Thread Starter [hittheroadjack](https://wordpress.org/support/users/hittheroadjack/)
 * (@hittheroadjack)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/plugin-gravity-forms-wysiwyg-css-stylesheet/#post-2870652)
 * Hi bradvin,
    this is what Firebug says:
 *     ```
       <td class="mceIframeContainer mceFirst mceLast">
       <iframe id="input_20_19_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Textfeld mit Formatierungsmöglichkeiten Drücke ALT + F10 für die Werkzeugleiste. Drücke ALT + 0 für die Hilfe." style="width: 100%; height: 156px; display: block;">
       </td>
       ```
   
 *  for the rich text area. It seems that transparency is explicitly allowed. But
   I cannot find out where the class “mceIframeContainer” is coming from. Any idea?
   It is not the tinyMCE default skin.
    Otherwise, I have to override it again at
   the end of my stylesheet again for td, this class and iframe – but no idea what
   this will do to the rest of my site. Also, in the GF_wysiwyg_class.php file, 
   you hand over an editor_class=>’frontend’ to the wp-editor. Afaik, this is an
   extra css class, but where does it come from and what does it do?
 *  Thread Starter [hittheroadjack](https://wordpress.org/support/users/hittheroadjack/)
 * (@hittheroadjack)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/plugin-gravity-forms-wysiwyg-css-stylesheet/#post-2870819)
 * Forgot one thing to mention: it is only in visual mode where the text area is
   transparent – in HTML mode the background is opaque and kind of white.
    Tried
   to override ‘<iframe>’ and ‘<textarea>’ in my theme’s stylesheet, but to no avail.
   But finally, I found this article [Link](http://wordpress.stackexchange.com/questions/54622/how-to-add-editor-style-css-styling-to-wp-editor-on-front-end-for-comments)
   and that did the job for now. I just wanted the tranparent backgroud go away.
   And another one: the popup window under the ‘Link’ button is coming up with white
   letters on light-light-grey background – almost impossible to read. I believe,
   it would be very helpful to know what CSS stylesheet is defining all this in 
   order to be able to change it according to local requirements.
 *  Thread Starter [hittheroadjack](https://wordpress.org/support/users/hittheroadjack/)
 * (@hittheroadjack)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/plugin-gravity-forms-wysiwyg-css-stylesheet/#post-2870850)
 * From what I found out so far, it is the /wp-includes/css/editor-buttons.css where
   most of the styling is coming from.
    And most classes can be overridden by your
   e.g. style.css and some of them cannot -like i.e._‘.quicktags-toolbar, .wp\_themeSkin
   tr.mceFirst td.mceToolbar’_ . Still testing, maybe I’ll find out why not and 
   post it here.
 *  Thread Starter [hittheroadjack](https://wordpress.org/support/users/hittheroadjack/)
 * (@hittheroadjack)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/plugin-gravity-forms-wysiwyg-css-stylesheet/#post-2870902)
 * Kept on testing some things and came across another small problem:
    when I try
   to show my form containing the editor textarea in a Fancybox like described [here](http://websitesetuppro.com/how-to-open-gravity-forms-form-in-a-lightbox/)
   no buttons are shown in the editor menu toolbar. Looks like a conflict of javascripts/
   jquery. Not a big issue because the form displays o.k. on a normal page – just
   a would-have-been-nice feature.
 *  Thread Starter [hittheroadjack](https://wordpress.org/support/users/hittheroadjack/)
 * (@hittheroadjack)
 * [13 years, 10 months ago](https://wordpress.org/support/topic/plugin-gravity-forms-wysiwyg-css-stylesheet/#post-2870960)
 * The css styles can be overridden using ‘!important’ in your own style.css or 
   editor-style.css.
    Now, everything works fine with my intended use case. Also
   tested it in conjunction with the TinyMCEAdvanced Plugin and worked nicely.

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

The topic ‘[Plugin: Gravity Forms WYSIWYG] CSS Stylesheet’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/gravity-forms-wysiwyg_636362.svg)
 * [Gravity Forms WYSIWYG](https://wordpress.org/plugins/gravity-forms-wysiwyg/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/gravity-forms-wysiwyg/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/gravity-forms-wysiwyg/)
 * [Active Topics](https://wordpress.org/support/plugin/gravity-forms-wysiwyg/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/gravity-forms-wysiwyg/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/gravity-forms-wysiwyg/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [hittheroadjack](https://wordpress.org/support/users/hittheroadjack/)
 * Last activity: [13 years, 10 months ago](https://wordpress.org/support/topic/plugin-gravity-forms-wysiwyg-css-stylesheet/#post-2870960)
 * Status: not resolved