Customizing look & feel of chat

[User132112]

I am wondering if there is any way I can customize design & style the chat window for user?

Is there any UI Macro which is controlling the page ?

1. User Chat window from ESS

, Ideally I would like it to look like

2. Chat administration window

Also if there is any way to style the chat administration window as well? from url, the chat admin window is chat_desktop.do page but I can not find that page anywhere in Pages.

Anybody has any idea how can I style these chat ?

[Uncle Rob]

I would strongly advise against this course of action.   The Geneva release of SN is going to make significant alterations to all the social features, including (at minimum) a massive face-lift.   You could be executing a ton of work for something that's only going to collide with the upgrade.

[User132112]

We are not going to use a newer version at least for a year.

If there are any ways, I can customize the chat in current fuji release, that will be helpful.

[Manjul Katare · Accepted solution]

Hi Imisi,

What rfedoruk suggested is correct and I would also recommend the same to wait for fuji upgrade.

But if you have to have be on older release for any reason and you need some kind of fix, below CSS might help you a little bit. You can not do structural changes on the chat window but some kind of color scheme you can definitely apply. Also when you plan to upgrade to Fuji all you would need is remove the custom css from the theme.

Steps to implement:

#1 Create a new stylesheet for CMS with below css. (Name it like Chat customization)

div.glide_box.gb_mw.focused div.gb_wrapper {

  border: 1px solid #ccc;

  box-shadow: 2px 2px 5px #ccc;

}

div.gb_wrapper table.gb_table td.gb_toolbar_col_l1 {

  background: #ccc;

}

div.gb_wrapper table.gb_table td.gb_toolbar_text {

  color: #ffffff;

}

div. live_chat_message span.live_chat_msg_timestamp {

  color: #ccd5db;

}

table.gb_toolbar_right.gb_toolbar_decoration td span.gb_close.i16 {

  background: url("images/icons/nav_clear_2.png") no-repeat;

}

div.gb_wrapper div.gb_toolbar_bottom_border {

  display: none;

}

div.live_chat_message div.live_chat_message_body {

  float: right;

  padding: 10px;

  color: #ffffff;

  background: #fd9808;

  border-radius: 5px;

}

#2 Add this new CSS to the site theme you are applying on the ESS Portal.

#3 End Result:

Hope this helps!

-Manjul

[User132112]

Thanks Manjul, Thats really helpful. Just few question. Do you know when Fuji will be upgraded ? Is there anywhere in servicenow I can see the demo version of upgraded chat? My dev instance is still I think fuji.