User Styles Extension for Firefox and Chrome
February 11th, 2010I’ve recently had a problem when using EPIServer with either Firefox or Google Chrome. We’re using version 5 and the HTML editor used, HTMLarea, does not support either browser.
I should also mention that the HTML editor is pretty terrible especially when compared to CKEEditor, for example.
As an example, if I write some style rule like this using the source code:
style="border:0"
then after saving the editor manages to mangle to HTML so it looks like this:
style="BORDER-TOP:0;BORDER-BOTTOM:0;BORDER-LEFT:0;BORDER-RIGHT:0
It manages to expand a simple rule plus add ALL CAPS into the mix (which will not validate as valid XHTML by the way).
But to get back to the point, since the editor is not supported I end up with a very small textarea in Firefox that’s hard to use.
To try and solve the problem I tried the Firefox addon called Resizeable Textarea but this doesn’t work in Firefox 3.6 plus it requires manual resizing every time.
The solution that worked for me is the Stylish addon that allows me to override the CSS rules for any site. I simply made a new rule to resize the textarea looking like this.
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://intranet/login") {
textarea.epitextareaeditor {height:20em !important}
.episize500 {width:800px !important}
}
A similar extension, called Chrome Stylist, is available for Google Chrome that works almost identically.
