Support » Plugin: Gravity Forms WYSIWYG » [Plugin: Gravity Forms WYSIWYG] CSS Stylesheet

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author bradvin


    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

    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;">

    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?

    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 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.

    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.

    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 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.

    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.