Liferay 5.2.3 and the Chat Portlet - Fixed (Inc IE6)

You may have experienced some UI difficulties using the Chat Portlet in Liferay 5.2.3. The fixes listed here are for both IE6 and other browsers.

IE 6 Snapshot

The following css classes need to be set or IE 6 will make the chat window, settings, and online friend's font text white. (Place at the bottom of theme's custom.css file.)


/*Chat Portlet fixes*/
/*Font colors are all white in IE 6*/
.ie6 .buddy-list .panel-content div { color: #000;}
.ie6 .panel-output .blurb { color: #000;}
.ie6 .chat-portlet .chat-settings .settings { color: #000;}
.ie6 .panel-profile { color: #000;}

---

Status messages appear behind the image in the chat window and long status messages aren't viewable properly. This is a general browser issue and not only applicable to IE 6.


IE 6 & FF Snapshot - Before

/*Long status messages appear behind the image in the chat window*/
.panel-profile { position: relative; height: 30px; left: 60px; overflow: auto; width: 166px; text-indent: 0px; }



IE 6 & FF Snapshots - Fixed

---

Long status messages do not display properly in the chat bar. This is applicable in all browsers.


FF Snapshot

The major problem with this is that the settings and open chat windows are pushed to the bottom and can't be accessed.

.chat-status .status-message { width: 500px; }

You'll also need to hide the overflow in IE 6

.ie6 .chat-status .status-message { overflow: hidden; height: 15px; }

The iframe class lfr-shim may be on top of our status bar so we'll have to hide it (IE 6).

.ie6 .lfr-shim { display: none; }

Of course there are other tweeks that can be done such as putting a background image of an ellipses after the truncated status message but this should suffice if you're looking for a bare-bones solution.

Tested on IE 6, 7, 8 (compat+non-compat), FF, Safari