Creating a Theme for Webconfig

• base contains the base styles, graphics, and HTML templates.
• standard contains the standard theme that comes with ClarkConnect.
• fancymenus contains another theme.
• default - ignore this directory... it is there for legacy reasons.

The first thing that you want to do is copy the standard theme directory to your new mytheme directory.

	Copy the standard theme directory to a new theme directory

cd /var/webconfig/htdocs/templates cp -av standard mytheme

You will now be able to see your new theme listed in webconfig under System > Settings > Themes.  Change the setting so that it points to your new "mytheme".  The look an feel won't change since we haven't made any changes!

Changing Graphical Elements

In the templates/base/images directory, you will see a list of graphics used by the template system.  These graphics are used by the common user interface (UI) functions for buttons, dialog boxes, and navigation.  The list is summarized in the table below.

If you want to keep the graphics, simply leave your template/myksin/images directory empty.  If you want to override one or more graphics, then add your custom images to the template/mytheme/images directory.  For instance, if you want to change the toggle button icon, add your custom icon_toggle.png to templates/mytheme/images/.

Constant	Purpose	Image Name	Example
General Purpose
WEBCONFIG_ICON_OK	Status ok	icon_ok.png
WEBCONFIG_ICON_WARNING	Warning	icon_warning.png
WEBCONFIG_ICON_INFO	Show extra information	icon_info.png
WEBCONFIG_ICON_CHECKMARK	A simple checkmark	icon_checkmark.png
WEBCONFIG_ICON_XMARK	A simple X-mark	icon_xmark.png
Buttons
WEBCONFIG_ICON_ADD	Add button	icon_add.png
WEBCONFIG_ICON_DELETE	Delete button	icon_delete.png
WEBCONFIG_ICON_EDIT	Edit button	icon_edit.png
WEBCONFIG_ICON_UPDATE	Update button	icon_update.png
WEBCONFIG_ICON_CANCEL	Cancel button	icon_cancel.png
WEBCONFIG_ICON_TOGGLE	Toggle button	icon_toggle.png
WEBCONFIG_ICON_ARROWRIGHT	Generic arrow pointing right	icon_arrowright.png
Navigation
WEBCONFIG_ICON_GO	Jump to a page	icon_go.png
WEBCONFIG_ICON_BACK	Back a page (for wizards)	icon_back.png
WEBCONFIG_ICON_CONTINUE	Forward to a page (for wizards)	icon_continue.png

	Graphics are Copyrighted!

These graphics were purchased from Icon Factory and can only be used for ClarkConnect themes... sorry!  If you want to use the graphics in other products or projects, please purchase the license from Icon Factory.

Changing HTML and CSS Elements

In the templates/mytheme/html directory, you will find HTML templates as well as cascading style sheets (CSS).  The .inc files contain the HTML templates for the header, footer, dialog boxes and tables.  The template files include documentation -- it's straightforward stuff.  Feel free to use PHP in these templates.

Overriding the default style is easy too.  The CSS in style_required.css must be defined or things won't look right.  If you want to add your own styles (for instance, if you create your own menu system), then use the style_custom.css file.

Session Variables

A handful of session variables are available; they are summarized in the table below.  Feel free to use them in your HTML templates.