Overriding Editor Formatting/Styles Through CSS

Aug 21, 2009 5:39 pm

I wanted to share a way to override the default formats and styles generated from the WYSYWIG editor from the stylesheet in any way you need.

This can help you override the font size defaults to use pts, pixels, or ems, whatever your preference is. This can also help you override content where a customer has applied many styles and fonts to a page without having to manually update each style.

For example, to override the color of text in the editor where it used the font tag , you add the following code to the css:

font[color="red;"] { color: blue !important; }

Where "font" is the html element and "color=red" is one of the values in the font tag. The final key component is the !important attribute of the style, which overrides all existing styles, including inline styles.

To override the default size of the text in the editor you need to use a format that overrides a matching value of an element using some special css. For example:

HTML generated by the editor

<p><span style="font-size: x-small;">One</span></p>
<p><span style="font-size: small;">Two</span></p>
<p><span style="font-size: medium;">Three</span></p>
<p><span style="font-size: large;">Four</span></p>
<p><span style="font-size: x-large;">Five</span></p>
<p><span style="font-size: xx-large;">Six</span></p>
<p><span style="font-size: xxx-large;">Seven</span></p>

CSS to override with specific pixel sizes (just add to stylesheet)

span[style="font-size: x-small;"] { font-size: 10px !important; }
span[style="font-size: small;"] { font-size: 11px !important; }
span[style="font-size: medium;"] { font-size: 12px !important; }
span[style="font-size: large;"] { font-size: 14px !important; }
span[style="font-size: x-large;"] { font-size: 18px !important; }
span[style="font-size: xxx-large;"] { font-size: 26px !important; }

Hope this helps.