This is an old revision of the document!

Table of Contents

Custom Templates (not for Default Free Service)

Types of custom templates

There are 2 types of custom templates:

  • those that use the normal Template (hotspot.tpl) and its functionalities, but has its own layout
  • those that may provide even more flexibility and also supply the complete functionality for the sending of the required forms

Whereas the first type can be used for all kinds of walled garden registration methods, the second type is only valid for a specific registration method. Internally we distinguish between

  • custom_oneclick.tpl
  • custom_paypal.tpl
  • custom_sms.tpl
  • custom_anonym.tpl

At the moment we only support custom_anonym.tpl.

Process for the installing of custom templates

You need to create a template (use one of the examples below) and edit it according to your needs. Choose .html instead of .tpl if the file cannot be edited.

Certain elements may not be removed:

  1. the 4 lines of comment, <!– BEGIN HEAD –> etc.
  2. the template variable {SCRIPTS} in the head part
  3. the body tag containing the onload-function-call <body onload=“init();”>
  4. the template variables {LOGIN} and {REGISTER}

You may add text, html, css. Of course you can use an existing html and just add the required elements. There are some extra template variables that you may use, if you want:

{TITLE} : default title {CSS} : Verweis auf ein Stylesheet namens ticketstyle.css 

            Sie können natürlich andere Stylesheet(s) einbinden

{DATE} : aktuelles Datum / Zeit {VERSION} : Software-Version {LANGSWITCH}: Sprachlinks (div id=“langswitch”) {LOGO} : derzeit nicht verwendet {ERROR} : Anzeige Fehler-und Statusmeldungen {LOGINTITLE}: Überschrift für Login-Formular {REGISTERTITLE} Überschrift für Registrierungsformular

The customer sends a zip file containing all required files like images, the template, the css-file. Synergysystems does some basic security and functionality checks, renames the template if necessary (either hotspot.tpl or custom_anonym.tpl) and uploads them in the appropriate custom directory.

It is possible to use the template for all locations of that customer or specific ones.

To finally activate the custom template you have to choose “Custom Layout” for all locations concerned (Admin Frontend, Location, Walled Garden Options). This can be reset to default layout any time.

hotspot.tpl (default)

This is the template currently used for the default layout. Anything in brackets {} will be replaced by real values. 

<!DOCTYPE HTML>
<html>
	<!-- BEGIN HEAD -->
	<head>
		<title>{TITLE}</title>
		<meta name="author" content="Synergy Systems GmbH">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		{CSS}
    	        <link rel="shortcut icon" type="image/x-icon" href="{THEMEDIR}/favicon.ico">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
		{SCRIPTS}
		</head>
	<!-- END HEAD -->
	<!-- BEGIN BODY -->
		<body onload="init();">
			<div id = "container">
			<div id ="welcome">HotSpot</div>
			<div id ="dateversion">{DATE} Version {VERSION} </div> {LANGSWITCH}				
				<div id = "logo">{LOGO}</div>
				<div id = "errorbox" >{ERROR}</div>
				<div id = "login">
					<p class="title">{LOGINTITLE}</p>
					{LOGIN}</div>
				<div id = "register">
					<p class="title">{REGISTERTITLE}</p>
					{REGISTER}
				</div>
			</div>
		</body>
	<!-- END BODY -->
</html>

basic template (minimum requirements)

<!DOCTYPE HTML>
<html>
	<!-- BEGIN HEAD -->
	<head>
		{SCRIPTS}
	</head>
	<!-- END HEAD -->
	<!-- BEGIN BODY -->
		<body onload="init();">
			
			{LOGIN}
			{REGISTER}
			
		</body>
	<!-- END BODY -->
</html>

custom_anonym.tpl (minimum requirements)

This template can be used for the most flexible custom layout. You need to provide a form with a field named “reg_accept” and a hidden field “state”. Please ensure that the form is sent only after accepting the “Terms and conditions”. You may add any html, css, javascript that you need. This type of template without {login} and {register} can be used only for the registration type “anonymous login”. 

<!DOCTYPE HTML>
<html>
	<!-- BEGIN HEAD -->
	<head>
		{SCRIPTS}
	</head>
	<!-- END HEAD -->
	<!-- BEGIN BODY -->
		<body onload="init();">
                {LOGIN}
		 <form>
                       <input  name="reg_accept" type="checkbox"/>
                       <input name="state" type="hidden" value="ay" />
                       <input id="sb" type="submit" />
                 </form>	
						
		</body>
	<!-- END BODY -->
</html>

css example

This is an example of a very basic CSS file. You may adapt it to your needs, e.g. add media queries to make it responsive, add your own styles add your own images and so on. 

/* ticketstyle.css very simple */

body  {padding:0; margin:0; border:0;width:100%; font-size:0.8em;
height:100%; text-align:center; background:transparent;font-family:Verdana, Arial, Helvetica;color:#000;}

#container
{
    position:relative;
	width: 100%; 
	height: 100%;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
	
}

.title
{
	text-align:center;
	font-weight:bold;
	margin:0 0em 1em 0em ;
	background:white;
	color:black;
}

/* styles for non-default Pear Quickform */
.formclass{}
.formlabel{text-align:left;}
.formelement{text-align:left;}
.formrequired{position:absolute;bottom:10px;right:20px;}

#register, #login
{ 
    position:relative;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left:auto;
	margin-right:auto;
    padding:1em 2em 2em 2em;
    width: 30em;
	background:white;
    color:black;
    border: 1px solid gray;
  
}
ol, ul {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;}

a:hover{color:#9C0031;text-decoration:underline;}
a:active{color:red;text-decoration:underline;}
a:link,a:visited{color:#000;text-decoration:underline;

Trace: • Custom Templates (not for Default Free Service)

QR Code
QR Code Custom Templates (not for Default Free Service) (generated for current page)