Creating New CheckIn Theme

Creating a New Check-In Theme
Creating a New Theme

Arena comes already installed with two Check-In Themes. This guide will cover how to
1
create a new theme or modify an existing one to best suit your needs.
Setup
1) Create a new folder in /Arena/Arena CheckIn/Themes with the new theme’s
name. Example: /Themes/childrenscheckin
2) Create the folder /Images as a subfolder under the new folder.
3) Copy the Style.css, ThemeSettings.xml, ThemeSettings.xsd,
ThemeSettings.xss files, and the /Sounds directory from /Themes/Arena to the
new theme directory.
4) For each of the image files listed in Table 1, you can:
a. Create new image files, using the guide below
Note: The Image Dimensions listed are defaults from the Arena Theme. If custom images
are created, the Style.css will need to be edited to accommodate the different image sizes.
b. Copy the image files from an /Images folder of an existing Theme and edit
the images as desired using any image editor. Be sure to retain the file types
and file names.
c. Copy the existing file as described and use the existing image.
Table 1 – Theme Images

1 2
Image File Name Image Page(s) Used On
Dimension
(Pixels) 1
action_button.png 172 x 77 Phone Lookup
action_button_down.png 172 x 77 Phone Lookup
action_button_change.png 190 x 77 Confirm name (Centralized
only)
action_button_change_down.png 190 x 77 Confirm name (Centralized
only)
action_button_check.png 190 x 77 Confirm name (Centralized),
name Family (Decentralized)
action_button_check.png 190 x 77 Confirm name (Centralized),
name Family (Decentralized)
back_button.png 125 x 100 Phone Lookup, Confirm name
(Centralized), name Family
(Decentralized/Centralized)
back_button_down.png 125 x 100 Phone Lookup, Confirm name
checkbox_blank.png 76 x 68 name Family (Decentralized)
checkbox_checked.png 76 x 68 name Family (Decentralized)
name_button.png 570 x 68 name Family
v1.1.7427.1100
name_button_down.png 570 x 68 name Family 2
numeric_button.png 95 x 77 Phone Lookup
numeric_button_down.png 95 x 77 Phone Lookup
phone_button.png 346 x 56 Phone Lookup
phone_button_down.png 346 x 56 Phone Lookup
scroll_down.png 70 x 70 Phone Lookup, Confirm name
scroll_down_down.png 70 x 70 Phone Lookup, Confirm name
scroll_up.png 70 x 70 Phone Lookup, Confirm name
scroll_up_down.png 70 x 70 Phone Lookup, Confirm name
scrollbar.png 59 x 863 Phone Lookup, Confirm name
search_background.png 380 x 65 Phone Lookup
background.jpg 3 1024 x 768 Phone Lookup, Confirm name
(Decentralized/Centralized),
3
background_Welcome.jpg 1024 x 768 Welcome Screen
busy.gif 4 126 x 22 All Screens
error.gif 5 48 x 48 Error Screen
Note 1: These are the default values, defined in styles.css. These values can be changed so
long as the corresponding value in styles.css is changed to match, but some location
references in styles.css are relative to image sizes/locations and may need to be adjusted
as well.
Note 2: The text displayed on each image/button in these locations is defined in
ThemeSettings.xml.
Note 3: background.jpg and background_Welcome.jpg are JPEG files.
Note 4: busy.gif is an Animated GIF file.
Note 5: error.gif is a GIF file.
v1.1.7427.1100
Add the Theme to the Database

3
1) As of Arena 1.1, there is no User Interface to add themes, so you need to directly
access the ArenaDB database, and in the comp_theme table, add a new line using
the values listed in Table 2.
Table 2 – comp_theme Row Values

Column Name Row Value
theme_id Automatically Assigned
theme_name Descriptive name, e.g. “Children’s
Theme”
theme_path Theme folder name, e.g.
“childrenscheckin”
date_created Today’s Date
date_modified Today’s Date
created_by Your User ID
modified_by Your User ID
default_theme False
Note: Only one value in the default_theme column may be True.
2) Refresh your Arena cache.

3) Edit the Style.css and the ThemeSettings.xml files to change fonts, colors, and
text. See Arena Style CSS and Theme Settings XML Definition Technical Documents
for more information.
Changing a Kiosk to a New Theme

Reference: Arena End User Manual (1.1.7427.1100), pages 162-164.
Centralized Mode
As Centralized mode uses the Kiosk Default setting for its theme, the following will show
how to set the new theme for use in Centralized Mode.
1) Make certain the Kiosk Application is closed on the kiosk you wish to update.
2) Go to Check-In Kiosks and click on the kiosk name you want to update to the
new theme.
3) Click the Default Check-In Theme drop-down box and select the name of your new
theme.
4) Click Update, refresh your Arena Cache, and restart the Kiosk application on the
affected kiosk.
Non-Centralized Mode
Non Centralized, however, uses the Attendance Type Theme setting, since that one type will
be used at that Kiosk.
1) Make certain the Kiosk Application is closed on the kiosk you wish to update.
v1.1.7427.1100
2) Under Check-In Attendance Type Categories, click the Attendance Type

hyperlink on the category containing the Type you wish to change. 4
3) Click on the Attendance Type desired.
4) Click on the Check-In Theme drop-down menu and change accordingly.
5) Click Update, refresh your Arena Cache, and restart the Kiosk application on the
affected kiosk.
v1.1.7427.1100

Creating New CheckIn Theme

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Creating New CheckIn Theme

Uploaded by

Copyright:

Available Formats

Creating a New Check-In Theme

Creating a New Theme

Table 1 – Theme Images

Add the Theme to the Database

Table 2 – comp_theme Row Values

Note: Only one value in the default_theme column may be True.

2) Refresh your Arena cache.

Changing a Kiosk to a New Theme

2) Under Check-In Attendance Type Categories, click the Attendance Type

You might also like