bobpeers -> blog

I recently read about using rgba values for the background CSS property, it’s very easy to apply using JQuery, for example.

$("#element").css("background","rgba(255,63,73,0.5)")

The last value of 0.5 is just the opacity. Of course this doesn’t work in IE so you need to use.

$("#marker").css("filter","alpha(opacity=50)")

Finally to get the RGB values from the hex colour codes you can use these functions I found here.

function HexToR(col) {return parseInt((cutHex(col)).substring(0,2),16)}
function HexToG(col) {return parseInt((cutHex(col)).substring(2,4),16)}
function HexToB(col) {return parseInt((cutHex(col)).substring(4,6),16)}
function cutHex(col) {return (col.charAt(0)=="#") ? col.substring(1,7):col}

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