Introduction
The Groupchat user interface has the ability to change colors dynamically with a configuration file. Whenever we want to express emotions or we want customers to experience the company’s identity a customizable color set becomes handy. Most colors are interchangeable to match site colors where Groupchat is running.
The XML description
A configuration file (skins.xml) describes all available predefined skins and a modification will result in changed 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.