Summary How to apply a custom skin to the GroupChat user interface.

Introduction

Groupchat user interface have the ability to change colors dynamically with a configuration file. Whenever we want to express emotions or we want customers to experience your company’s identity colors become handy. Most colors are interchangeable to match site colors where Groupchat is running.

The XML description

A configuration file (skins.xml) describes all available skins and modifying it will result in changed in skin colors. The xml file consists of sections starting with <skin name=”skinname”> and ending with </skin>. One section of the skin tag describes all colors for a one skin palette. In the first part of the skin tag there are class modifiers which must be static (untouched) in a non-code-custom version. In the second part are the color tags which have child tags describing all colors.

Tag	Description
mainskincolor roster	bottom backgrounds
windowbackgroundcolor	window background colors
topbarfirstcolor	first color of windows mostly small windows
topbarsecondcolor	second color of window bars used in big windows
rosterbgcolor	roster colors
rosterbgcolorcenter	roster colors
ownMessageColor	in input and chat logs your messages will appear with this color
otherMessageColor	in input and chat logs other messages will appear with this color
roundCorners	specify window roundness
videoRoundCorners	video windows have less round corners than normal windows
onlineColor	in roster for online users
offlineColor	color in roster for offline users
rosterButtons	roster buttons color - conference, add user, invite friend, scrollers
gradientButtonCircleInside	Background gradient for controls
gradientButtonCircleOutside	Background gradient for controls
glowColor	Glow color of windows
outlineColor	all outline colors
smileyGlowOver	Smileys have a glow on mouse over
gradientTopLeftColor	gradient for windows right to left
gradientTopRightColor	gradient for windows left to right
redOffset, greenOffset, blueOffset	controls and icons color offset this can be used to slightly modify color of controls (buttons)

Do it yourself example :

1. Open skins.xml, copy whole “generic-violet” skin tag and paste underneath. Name it <skin name='generic-brown'>
2. Change – mainskincolor, rosterbuttons, gradientButtonCircleInside,gradientTopRightColor to 0xBD8D4.Change – topbarFirstColor, gradientButtonCircleOutside, gradientTopRightColor – 0xFCFAE1. And save skin.xml file.
3. Switch current skin from configuration to the newly created : “strSkinChat” : “generic-brown”; in DotNetNuke modules always strSkinChat=generic is used, so the easiest way is to name the own skin generic.
4. Save configuration and reload the page you should see brown GroupChat user interface.

Some samples:

Generic	Violet
Earth	Mars
River	skins.xml

Skinning possibilities vs. customization services

Skinning with xml is a very fast way to change impressions of the GroupChat user interface to match your company site although it has limitations. For example further customization of skinning such as logos, control colors and banners require a custom version of Groupchat user interface where the Think5 team can offer their services on request.

Home - GroupChatServer Wiki