In order to support theme switching a ChatNow applet on the fly, certain standards must be followed. A switchable theme must contain a certain set of objects that will be common to all switchable themes. Since a switchable theme won't be able to allow extra objects, you will only be able to define properties of the common objects, instead of defining a full theme.

---

The applet will handle all macros and functions, the designer's job is only to define the objects themselves. To include the theme object within a theme's .zip file, name the XML file that contains it theme.xml and put it in the root directory of the .zip file for the theme.

---

When designing your theme, use an applet size of 725x500 pixels. If your design is smaller, use the width and height attributes of the <theme> object and it will be centered in the applet. The applet itself, as defined in the HTML, must always be equal to or less than 725x500 pixels.

---

Each object has a set of attributes that you should set. As one of the main uses for standard themes will be to allow a theme to be changed out on the fly, you should design with the idea in mind that the theme could be loaded on the heels of another. Therefore, make sure that you set every attribute needed. Any attribute not set will be reset to the specified default value. When defining your theme, do not add any extra XML code other than the object specified in this documentation. Results could be unpredictable. Be sure to write the XML in the hierarchy as shown below, where <theme-login-panel> and <theme-chat-panel> are sub-objects of the <theme> object, and so forth.

Back to Top
 
 
The theme objects defined are as follows:

<theme>
<theme-variation>
<theme-login-panel>
<theme-login-background>
<theme-login-background2>
<theme-login-background3>
<theme-login-background4>
<theme-login-background5>
<theme-login-nickname-prompt>
<theme-login-nickname-textfield>
<theme-login-password-prompt>
<theme-login-password-textfield>
<theme-login-room-prompt>
<theme-login-room-textfield>
<theme-login-connect-button>
<theme-login-language-button>
<theme-login-logo-button>
<theme-chat-panel>
<theme-chat-background>
<theme-chat-background2>
<theme-chat-background3>
<theme-chat-background4>
<theme-chat-background5>
<theme-chat-historyrooms-panel>
<theme-chat-history>
<theme-chat-rooms>
<theme-chat-usersbuddylist-panel>
<theme-chat-users>
<theme-chat-buddylist>
<theme-chat-input>
<theme-chat-inputsend-button>
<theme-chat-showchat-button>
<theme-chat-showrooms-button>
<theme-chat-refreshrooms-button>
<theme-chat-showusers-button>
<theme-chat-showbuddylist-button>
<theme-chat-exit-button>
<theme-chat-changefonts-button>
<theme-chat-showservices-button>
<theme-chat-showavatars-button>
<theme-chat-showemoticons-button>
<theme-chat-language-button>
<theme-chat-logo-button>

Back to Top
 
 
<theme>
The main theme object, and parent of all sub-objects.
Attribute Default Description
name none theme's proper name
themepack none zip of files for this theme
themebaseurl none base url to find theme files
previewimageurl none url to an image to use for a preview of the theme
description none short bit of text to describe the theme
width 725 width of your design, must be less than 725
height 500

height of your design, must be less than 500 - The theme will be centered in the 725x500 applet

avatars none If you use a custom avatars zip file
emoticons none If you use a custom emoticons zip file
<theme-variation>
A variation of the <theme> object, allowing you to have different versions such as for different languages or colors. The attributes of the parent <theme> object are used as defaults. Normally you would put graphics in the same themepack and baseurl as the parent <theme> object.
Attribute Default Description
name none theme's proper name
themepack none zip of files for this theme
themebaseurl none base url to find theme files
previewimageurl none url to an image to use for a preview of the theme
description none short bit of text to describe the theme
width 725 width of your design, must be less than 725
height 500

height of your design, must be less than 500 - The theme will be centered in the 725x500 applet

avatars none If you use a custom avatars zip file
emoticons none If you use a custom emoticons zip file
<theme-login-panel>
The panel visible before connecting to the chat server with a nickname and password prompt, room and connect button.
Attribute Default Description
fg #000000 foreground color
bg #ffffff background color
<theme-login-background>..<theme-login-background5>
Up to 5 positionable backgrounds (if used) for the login panel. You can use these in variations to patch over a default background. Should be no bigger than 725x500.
Attribute Default Description
url none url to an image
x 0 in case you need to position it
y 0 in case you need to position it
<theme-login-nickname-prompt>
The text prompt for the nickname field used. fg and bg colors will be inherited from the login panel.
Attribute Default Description
text none text for nickname prompt
x 100 x coordinate
y 50 y coordinate
fg #000000 text color, inherited
bg #ffffff bg color, inherited
font sans-serif font name to use
fontstyle plain

font style to use, plain - bold - italic

fontsize 12 font size to use
tooltip none text to use when mouse is hovering over
<theme-login-nickname-textfield>
The textfield where the user can type the nickname to be used.
Attribute Default Description
text none initial text in field
x 250 x coordinate
y 50 y coordinate
width 200 width of field
height 20 height of field
length none length of field, in characters
fg #000000

text color, inherited

bg #ffffff bg color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain - bold - italic
fontsize 12 font size to use
tooltip none text to use when mouse is hovering over
<theme-login-password-prompt>
The text prompt for the password field (if used). fg and bg colors will be inherited from the login panel.
Attribute Default Description
text none text for nickname prompt
x 100 x coordinate
y 50 y coordinate
fg #000000 text color, inherited
bg #ffffff bg color, inherited
font sans-serif font name to use
fontstyle plain

font style to use, plain - bold - italic

fontsize 12 font size to use
tooltip none text to use when mouse is hovering over
<theme-login-password-textfield>
The textfield where the user can type the password to be used.
Attribute Default Description
echo * echo character to use
x 250 x coordinate
y 50 y coordinate
width 200 width of field
height 20 height of field
length none length of field, in characters
fg #000000

text color, inherited

bg #ffffff bg color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain - bold - italic
fontsize 12 font size to use
tooltip none text to use when mouse is hovering over
<theme-login-room-prompt>
The text prompt for the room field (if used). fg and bg colors will be inherited from the login panel.
Attribute Default Description
text none text for nickname prompt
x 100 x coordinate
y 50 y coordinate
fg #000000 text color, inherited
bg #ffffff bg color, inherited
font sans-serif font name to use
fontstyle plain

font style to use, plain - bold - italic

fontsize 12 font size to use
tooltip none text to use when mouse is hovering over
<theme-login-room-textfield>
The text field where the user can type the intial room to be joined.
Attribute Default Description
text none initial text in field
x 250 x coordinate
y 50 y coordinate
width 200 width of field
height 20 height of field
length none length of field, in characters
fg #000000

text color, inherited

bg #ffffff bg color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain - bold - italic
fontsize 12 font size to use
tooltip none text to use when mouse is hovering over
<theme-login-connect-button>
This is the button to click to connect to the chat server.
Attribute Default Description
text Connect text, if any, for the button
up none image to be used when button is in "up" state
down none image to be used when button is in "down" state
over none image to be used when button is moused over
x 275 x coordinate
y 200 y coordinate
fg #000000

text color, inherited

bg #ffffff bg color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain - bold - italic
fontsize 12 font size to use
tooltip none text to use when mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when moused over
<theme-login-language-button>
A button that opens a menu of languages available in this theme.
Attribute Default Description
x 350 x coordinate
y 300 y coordinate
fg #000000

text color, inherited

bg #ffffff bg color, inherited
tooltip none text to use when mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when moused over
<theme-login-logo-button>
The user-defined logo displayed in the login panel. It can be used for banners and/or be assigned a URL when clicked.
Attribute Default Description
clickurl none address to link to when clicked
up none image to be used when button is in "up" state
down none image to be used when button is in "down" state
over none image to be used when button is moused over
x 275 x coordinate
y 200 y coordinate
fg #000000

text color, inherited

bg #ffffff bg color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain - bold - italic
fontsize 12 font size to use
tooltip none text to use when mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when moused over
<theme-chat-panel>
The panel containing the chat interface.
Attribute Default Description
fg #000000 foreground color
bg #ffffff background color
<theme-chat-background>..<theme-chat-background5>
Up to 5 positionable backgrounds (if used) for the chat panel. You can use these with theme variations to patch over the default backgrounds. Should be no larger than 725x500.
Attribute Default Description
url none URL to an image
x 0 in case you need to position it
y 0 in case you need to position it
<theme-chat-historyrooms-panel>
A switching panel containing both the history and rooms objects. The showchat and showrooms buttons will toggle between these two views.
Attribute Default Description
fg #000000 foreground color
bg #ffffff background color
x 0 x coordinate
y 20 y coordinate
width 600 width of panel
height 455 height of panel
<theme-chat-history>
This object displays the current chat room being viewed. The history object is the same size as the historyrooms panel.
Attribute Default Description
fg #000000 text color, inherited
bg #ffffff background color
urlcolor fg color of URLs
avatarbackgroundcolor none background color behind avatar images
titlebarcolor bg background color of titlebar
titletextcolor fg text color of titlebar
joincolor #000000

color when a user joins the room

partcolor #000000 color when a user leaves the room
quitcolor #000000 color when a user quits chat while in the room
kickcolor #000000 color when a user is kicked out of the room
actioncolor #000000 color for action lines in the room
soundcolor #000000 color for sound lines in the room
systemcolor #000000 color used for various server messages
errorcolor #000000 color used for various error messages
mycolor #000000 color used when the user speaks
talkcolor #000000 color default when other users speak
noticecolor #000000 color used when receiving a notice
privatecolor #000000 color used when receiving a private message
showtitlebevel true draw a bevel around the titlebar, true or false
raisedtitlebevel true draw a raised titlebar bevel
showtitleseparator false draw a line separating the titlebar from main content view
showbevel true draw a bevel around main content view
raisedbevel true draw a raised bevel around main content view
showscrollbar true draw a scrollbar beside main content
showtitlebar true draw a titlebar above main content
shownicknames true draw nicknames
showavatars true draw avatar images
showemoticons true draw emoticon images
centerbackgroundimage false centers a background image behind the history
tilebackgroundimage false tiles a background image behind the history
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
nicknamefont sans-serif font name to use for nickname
nicknamefontstyle plain font style to use, plain, bold, italic, for nickname
nicknamefontsize 12 font size to use for nickname
backgroundimage none url to an image to use in the background
foregroundimage none url to an image to use in the foreground, use a transparent gif
titlebarimage none url to an image to use beneath the titlebar
tooltip none text to use when the mouse is hovering over
<theme-chat-rooms>
This object can display a list of rooms available on the chat server.
Attribute Default Description
fg #000000 text color, inherited
bg #ffffff background color
titlebarcolor bg background color of the titlebar
titletextcolor fg text color of titlebar
showtitlebevel true draw a bevel around the titlebar, true or false
raisedtitlebevel true draw a raised titlebar bevel
showtitleseparator false

draw a line separating the titlebar from main content view

showbevel true draw a bevel around main content view
raisedbevel true draw a raised bevel around main content view
showscrollbar true draw a scrollbar beside main content
showtitlebar true draw a titlebar above main content
centerbackgroundimage false centers a background image behind the rooms
tilebackgroundimage false tiles a background image behind the rooms
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
backgroundimage none url to an image to use in the background
foregroundimage none url to an image to use in the foreground, use a transparent gif
titlebarimage none url to an image to use beneath the titlebar
tooltip none text to use when the mouse is hovering over
<theme-chat-usersbuddylist-panel>
A switching panel containing both the users and buddylist objects. The showusers and showbuddylist buttons will toggle between these two views.
Attribute Default Description
fg #000000 foreground color
bg #ffffff background color
x 600 x coordinate
y 20 y coordinate
width 100 width of panel
height 475 height of panel
<theme-chat-users>
This object can display a list of the users in a current room.
Attribute Default Description
fg #000000 text color, inherited
bg #ffffff background color
titlebarcolor bg background color of titlebar
titletextcolor fg text color of titlebar
userscolor #000000 text color of normal users
opcolor #0000ff text color of ops (blue default)
voicecolor #00ff00

text color of voice ops (green default)

uopcolor #00ffff text color of uops (cyan default)
showtitlebevel true draw a bevel around the titlebar, true or false
raisedtitlebevel true draw a raised titlebar bevel
showtitleseparator false draw a line separating the titlebar from main content view
showbevel true draw a bevel around main content view
raisedbevel true draw a raised bevel around main content view
showscrollbar true draw a scrollbar beside main content
showtitlebar true draw a titlebar above main content
showavataricon true draw the user's avatar icon
showmodeicon true draw the user's current mode icon (ops, etc)
showencryptedicon false draw the encrypted icon if user is connected securely
centerbackgroundimage false centers a background image behind the users
tilebackgroundimage false tiles a background image behind the users
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
backgroundimage none url to an image to use in the background
foregroundimage none url to an image to use in the foreground, use a transparent gif
titlebarimage none url to an image to use beneath the titlebar
opimage none url to an image to use for operators
voiceimage none url to an image to use for voice ops
uopimage none url to an image to use for uops
encryptedimage none url to an image to use to show a secure connection
tooltip none text to use when the mouse is hovering over
<theme-chat-buddylist>
This object can display a list of a user's buddies.
Attribute Default Description
fg #000000 text color, inherited
bg #ffffff background color
titlebarcolor bg background color of titlebar
titletextcolor fg text color of titlebar
showtitlebevel true draw a bevel around the titlebar, true or false
raisedtitlebevel true draw a raised titlebar bevel
showtitleseparator false

draw a line separating the titlebar from main content view

showbevel true draw a bevel around main content view
raisedbevel true draw a raised bevel around main content view
showscrollbar true draw a scrollbar beside main content
showtitlebar true draw a titlebar above main content
centerbackgroundimage false centers a background image behind the users
tilebackgroundimage false tiles a background image behind the users
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
backgroundimage none url to an image to use in the background
foregroundimage none url to an image to use in the foreground, use a transparent gif
titlebarimage none url to an image to use beneath the titlebar
onlineuserimage none url to an image icon to use to show an online user
offlineuserimage none url to an image icon to use to show an offline user
onlineroomimage none url to an image icon to use to show an open chat room
offlineroomimage none url to an image icon to use to show a closed or nonexistent chat room
tooltip none text to use when the mouse is hovering over
<theme-chat-input>
This object sets the text input bar into the applet.
Attribute Default Description
fg #000000 text color, inherited
bg #ffffff background color
x 0 x coordinate
y 475 y coordinate
width 600 width
height 25 height
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
backgroundimage none url to an image to use for the background
prompt none text to use for a prompt to the left of input bar
showsendbutton true show the send button to the right of the input bar
showbevel true draw a bevel around the input bar
lurk false require a nick change from a guest before they can speak
allowusercommands true user can send commands to the server
allowcommands   comma-separated list of commands the user can send
disablecommands   comma-separated list of commands the user can NOT send
tooltip none text to use when the mouse is hovering over
<theme-chat-inputsend-button>
This button can be used for a custom send button instead of the basic one used in the input object.
Attribute Default Description
text Send text, if any, for the button
up none image to use when button is in "up" state
down none image to use when button is in "down" state
over none image to use when button is moused over
x 275 x coordinate
y 200 y coordinate
fg #000000 text color, inherited
bg #ffffff background color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
tooltip none text to use when the mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when the mouse is over
<theme-chat-showchat-button>
This button can be used to switch to the chat history from the rooms list.
Attribute Default Description
text Show Chat text, if any, for the button
up none image to use when button is in "up" state
down none image to use when button is in "down" state
over none image to use when button is moused over
x 275 x coordinate
y 200 y coordinate
fg #000000 text color, inherited
bg #ffffff background color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
tooltip none text to use when the mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when the mouse is over
<theme-chat-showrooms-button>
This button can be used to switch to the rooms list from the chat history.
Attribute Default Description
text Show Rooms text, if any, for the button
up none image to use when button is in "up" state
down none image to use when button is in "down" state
over none image to use when button is moused over
x 275 x coordinate
y 200 y coordinate
fg #000000 text color, inherited
bg #ffffff background color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
tooltip none text to use when the mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when the mouse is over
<theme-chat-refreshrooms-button>
This button can be used to refresh the rooms list on the chat server.
Attribute Default Description
text Refresh text, if any, for the button
up none image to use when button is in "up" state
down none image to use when button is in "down" state
over none image to use when button is moused over
x 275 x coordinate
y 200 y coordinate
fg #000000 text color, inherited
bg #ffffff background color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
tooltip none text to use when the mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when the mouse is over
<theme-chat-showusers-button>
This button can be used to switch from the buddylist to the users list.
Attribute Default Description
text Show Users text, if any, for the button
up none image to use when button is in "up" state
down none image to use when button is in "down" state
over none image to use when button is moused over
x 275 x coordinate
y 200 y coordinate
fg #000000 text color, inherited
bg #ffffff background color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
tooltip none text to use when the mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when the mouse is over
<theme-chat-showbuddylist-button>
This button can be used to switch from the users list to the buddylist.
Attribute Default Description
text Show Buddies text, if any, for the button
up none image to use when button is in "up" state
down none image to use when button is in "down" state
over none image to use when button is moused over
x 275 x coordinate
y 200 y coordinate
fg #000000 text color, inherited
bg #ffffff background color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
tooltip none text to use when the mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when the mouse is over
<theme-chat-exit-button>
This button can be used to show the exit button to disconnect from the chat.
Attribute Default Description
text Exit text, if any, for the button
up none image to use when button is in "up" state
down none image to use when button is in "down" state
over none image to use when button is moused over
x 275 x coordinate
y 200 y coordinate
fg #000000 text color, inherited
bg #ffffff background color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
tooltip none text to use when the mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when the mouse is over
<theme-chat-changefonts-button>
This button can be used to show the fonts popup window.
Attribute Default Description
text Change Fonts text, if any, for the button
up none image to use when button is in "up" state
down none image to use when button is in "down" state
over none image to use when button is moused over
x 275 x coordinate
y 200 y coordinate
fg #000000 text color, inherited
bg #ffffff background color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
tooltip none text to use when the mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when the mouse is over
<theme-chat-showservices-button>
This button can be used to show the services popup window.
Attribute Default Description
text Services text, if any, for the button
up none image to use when button is in "up" state
down none image to use when button is in "down" state
over none image to use when button is moused over
x 275 x coordinate
y 200 y coordinate
fg #000000 text color, inherited
bg #ffffff background color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
tooltip none text to use when the mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when the mouse is over
<theme-chat-showavatars-button>
This button can be used to show the basic avatars popup window.
Attribute Default Description
text Avatars text, if any, for the button
up none image to use when button is in "up" state
down none image to use when button is in "down" state
over none image to use when button is moused over
x 275 x coordinate
y 200 y coordinate
fg #000000 text color, inherited
bg #ffffff background color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
tooltip none text to use when the mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when the mouse is over
<theme-chat-showemoticons-button>
This button can be used to show the basic emoticons popup window.
Attribute Default Description
text Emoticons text, if any, for the button
up none image to use when button is in "up" state
down none image to use when button is in "down" state
over none image to use when button is moused over
x 275 x coordinate
y 200 y coordinate
fg #000000 text color, inherited
bg #ffffff background color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain, bold, italic
fontsize 12 font size to use
tooltip none text to use when the mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when the mouse is over
<theme-chat-language-button>
A button that opens a menu of languages available in this theme.
Attribute Default Description
x 350 x coordinate
y 300 y coordinate
fg #000000

text color, inherited

bg #ffffff bg color, inherited
tooltip none text to use when mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when moused over
<theme-chat-logo-button>
The user-defined logo displayed in the chat panel. It can be used for banners and/or be assigned a URL when clicked.
Attribute Default Description
clickurl none address to link to when clicked
up none image to be used when button is in "up" state
down none image to be used when button is in "down" state
over none image to be used when button is moused over
x 275 x coordinate
y 200 y coordinate
fg #000000

text color, inherited

bg #ffffff bg color, inherited
font sans-serif font name to use
fontstyle plain font style to use, plain - bold - italic
fontsize 12 font size to use
tooltip none text to use when mouse is hovering over
drawbevel true draw a bevel around the image
highlightbevel false highlight a bevel around the image when moused over
 
   
Back to Top
 
Remember that the applet must be set to a width of 725 and height of 500 for switchable themes to
work properly.
Parameters Value (Default) Description
themelibrary (/themes/ThemeLibrary.xml) Indicates an xml file that has all switchable themes that will be available to the applet. This file can either hold the definitions themselves or import individual definitions for each theme. The default ThemeLibrary imports all the themes that are currently switchable.
usestandardthemes true/false (false) If true, sets the applet to use the switchable themes. If no theme is specified, a plain non-skinned chat applet will appear, which can be switched to any other available theme.
initialtheme theme name (none) Sets the initial theme to use. This must be the name of a <theme> object as defined in the ThemeLibrary.
Back to Top
 
 
<import> object lines should be wrapped in a <chatnow> </chatnow> object. Otherwise, the applet will only parse the first <import> object line.

<?xml version="1.0" encoding="UTF-8"?>

<!-- Theme Library -->
<!-- store themes here -->
<chatnow>

%_inc /themes/achat/theme.xml%
%_inc /themes/air/theme.xml%
%_inc /themes/anime/theme.xml%
%_inc /themes/athlete/theme.xml%

</chatnow>

Back to Top
 
©2005 WebMaster Inc.