There are 4 types of custom templates:
Whereas the hotspot.tpl can be used for all kinds of walled garden registration methods, the third type is only valid for a specific registration method. Internally we distinguish between
At the moment we only support custom_anonym.tpl.
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:
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} : link to a stylesheet called ticketstyle.css
if you name your stylesheet ticketstyle.css it will be found by this variable, but of course you may add other stylesheets or use another name
{DATE} : current date / time
{VERSION}: Software Version
{LANGSWITCH}: language links (div id=“langswitch”)
{LOGO} : not used currently
{ERROR} : display of error and status messages
{LOGINTITLE}: title for Login form
{REGISTERTITLE} title for registration form
{AGB}: link to agb.html, a file containing your Terms and Conditions; you may have agb.html files for different locations and different languages. Please check what the Directory Structure for 'Terms and Conditions' implies.
Any files you use (images, CSS etc.) should have a {TPLDIR} as a prefix to get the right path to your template folder, e.g. <img src=“{TPLDIR}yourimage.jpg”>.
If you want to offer templates in several languages you must create one subfolder for each language and place the templates in the subfolders: {TPLDIR}<language>/. The language shortcuts are small letters as of ISO 3166, eg. de,en,it.
For uploading your files please use the Upload Manager . An explanation to where to place your files you'll find there.
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.
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>
<!DOCTYPE HTML>
<html>
<!-- BEGIN HEAD -->
<head>
{SCRIPTS}
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body onload="init();">
{LOGIN}
{REGISTER}
</body>
<!-- END BODY -->
</html>
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 {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>
Please be aware that any template variables need to be placed within either the head or the body section. The example above needs at least one more template variable e.g. {DATE} within the body section in order to get the body section displayed. Else use the following code if you only have the {LOGIN} variable:
<!DOCTYPE HTML>
<html>
<!-- BEGIN HEAD -->
<head>
{SCRIPTS}
</head>
<!-- END HEAD -->
<body onload="init();">
<!-- BEGIN BODY -->
{LOGIN}
<!-- END BODY -->
<form>
<input name="reg_accept" type="checkbox"/>
<input name="state" type="hidden" value="ay" />
<input id="sb" type="submit" />
</form>
</body>
</html>
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;
You need to be logged in to see this information. <nodisp> We should always test on our development system before installing on the live system. When everything is okay we can copy the whole testfolder contents to the custom folder on the live system. This is either /var/www/html/syces/custom/mandantid/captiveportal or a subfolder to this.
Possible subfolder structure to /var/www/html/syces/custom/<mandantid>/captiveportal:
/locationid
/lang
/lang/locationid
It may be necessary to add a .htaccess file to the captiveportal folder, e.g. when there is a download link to a terms-and-condition.pdf, because the download of csv und pdf files in the syces/custom folder is prohibited to prevent the illicit download of user credentials.
Howto's
Example .htaccess:
<FilesMatch "\.(pdf)$"> Order Allow,Deny Allow from All </FilesMatch>
</nodisp>