Interface Controls And Colors

This document describes the rules for template customization for H-Sphere 2.1 and higher. It covers the following issues:

Interface Controls

To generate HTML representation of H-Sphere control panel, we use Java and Java-based FreeMarker package. H-Sphere templates contain calls to FreeMarker functions, variables, and substitutions. Due to the added support of multiple designs in user's control panel, some of the functions needed to be changed. If you are using templates that have been developed for H-Sphere earlier than 2.1, you need to bring parameters in all FreeMarker function calls in line with the following list:

Inserting HTML images:

<function draw_image(image_id)>
<function draw_image_width(image_id, image_width)>
<function draw_image_alt(image_id, alt_msg)>
<function draw_image_align(image_id, img_align)>
<function draw_image_align_alt(image_id, img_align, alt_msg)>
<function draw_spacer(s__width,s__height)>

Inserting ON/OFF buttons:

<function draw_state(state,toDisableURL,toEnableURL)>
<function draw_state_on(toDisableURL)>
<function draw_state_off(toEnableURL)>
<function draw_off()>
<function draw_on()>
<function draw_on_always()>

Inserting other control images:

<function draw_add(addURL, label)>
<function draw_edit(editURL, label)>
<function draw_delete(deleteURL, label)>
<function draw_change(editURL, label)>
<function draw_select(selectURL, label)>
<function draw_fix(selectURL, label)>
<function draw_setup(selectURL, label)>
<function draw_select_signup(plan)>
<function draw_select_adminsignup(plan)>
<function draw_preview(previewURL, label)>
<function draw_preview_large(previewURL, label)>
<function draw_launch(launchURL, label)>
<function draw_launch_large(launchURL, label)>
<function draw_uninstall(launchURL, label)>
<function draw_credit(jumpURL, label)>
<function draw_enlarge_credit(jumpURL, label)>
<function draw_debit(jumpURL, label)>
<function draw_set_period_begin(jumpURL, label)>
<function draw_login_account(loginURL, label)>
<function draw_suspend_account(toSuspendURL, label)>
<function draw_resume_account(toResumeURL, label)>
<function draw_delete_account(toDeleteURL, label)>
<function draw_mail_type(editURL, image_id, label)>
<function draw_mailbox_type(editURL)>
<function draw_mailforward_type(editURL)>
<function draw_mailalias_type(editURL)>
<function draw_maillist_type(editURL)>
<function draw_submit(field_name, image_id)>
<function draw_oscommerce(previewURL, label)>
<function draw_oscommerce_admin(previewURL, label)>

Inserting text labels/messages:

<function draw_colored_label(llabel,lcolor)>
<function draw_colored_label_bold(llabel,lcolor)>
<function draw_label(label)>
<function draw_label_bold(label)>
<function draw_header(header)>
<function draw_important_label(label)>
<function draw_important_header(header)>

Inserting basic link elements
(t-target, p-picture, a-alt):

<function draw_link(url,label)>
<function draw_tlink(url,target,label)>
<function draw_plink(url, image_id)>
<function draw_palink(url, image_id, alter)>
<function draw_ptlink(url, target, image_id)>
<function draw_ptalink(url, target, image_id, alter)>
<function draw_onclick_palink(img, onClick, alt)>

Drawing traffic and disk usage charts:

<function draw_load_diagram(d_value, d_limit, d_app_percent, d_width)>
<function draw_diagram_legend()>

Interface Colors

Designs in H-Sphere 2.1 have customizable color schemes. To display interface elements, we use colors, each having its own id_handle. For example, bgcolor is the id for the background of the HTML page other than the menu and the header. Its color can be set in the Look And Feel menu.

To get the RGB value of the color by color_id, the following syntax is used:

${design.color("color_id")}

Note: the color_id value must be replaced with an approprate handle and must be enclosed in double quotation marks.

Some colors are predefined in the 'functions' file:

<assign LIGHT_STRIP=design.color("table_light_strip")>
<assign DARK_STRIP=design.color("table_dark_strip")>
<assign HEADER_COLOR=design.color("header_color")>
<assign ERROR_COLOR = design.color("error_color")>
<assign BG_COLOR = design.color("bgcolor")>

Use them as follows:

${BG_COLOR}