Skip to content

Custom Templates Guide

What are custom file-based templates?

In SyCes2, a user of level Tenant Admin can configure the captive portal (Login page of Tenant's hotspot) either using the Standard templates via the drag and drop in the frontend or using a template uploaded from a file. A custom template file (.tpl) can be created and uploaded to the web server for these template type.

Setting up custom templates

To use custom templates created for SyCes2, a file in .tlp format must be uploaded via the Upload Manager. The uploaded .tlp file can then be linked to a template of type From file upload.

The template is rendered in the Django login app in the backend, simliar to standard templates. This enables the use of certain variables and features for file-based templates.

Usable Variables and Template tags in file-based Templates

Template tag Description
{{title}} Default SyCes2 title
{% css %} Default SyCes2 stylesheet
{{date}} Current date and time
{{version}} Software version
{% lang_switch %} Language links
{% logo %} Default SyCes2 Logo
{% tos %} Load Tenant's Terms of Service
{{path}} Path of Tenant's upload directory
{% login_title %} Default Title for login form
{% login_form %} Default Login form
{% register_title %} Default Title for register form
{% register_form %} Default Register form
{% rate_info %} Information about rate of location
{% register_name_form %} Default Register with name
{% register_check_form %} Default Register anonymously
{% register_email_form %} Default Register with e-mail
{% register_phone_form %} Default Register with phone number

Example template

{% load static %}
{% load login_methods %}
<!DOCTYPE HTML>
<html>
    <head>
        <title> {{title}} </title>
        {% css %}
        <!--link rel="stylesheet" href="{{path}}styles.css"-->
    </head>
    <body>
        <div class="left">
            <!--img src="{{path}}subdir/logo2.png" alt="Picture Tag" width="400" height="120"-->
            {% logo %}
        </div>
        <div class="right">
            <p> {{date}} </p>
            <a style="text-decoration: none" href="https://syces.de/"> SyCes® </a>
            <p> Version {{version}} </p>
        </div>
        <div class="center block"></div>
        <div class="center">
            <p> {% lang_switch %} </p>
            <p></p>
        </div>
        <div class="center window">
            <p>{% login_title %}</p>
            <p>{% login_form %}</p>
        </div>
        <p></p>
        <div class="center window">
            <p>{% register_title %}</p>
            <p>{% rate_info %}</p>
            <p>{% register_form %}</p>
        </div>
        <p></p>
    </body>
</html>
  • The first two lines, starting with {% load are required to understand the context variables.
  • In the HTML head section, a custom title and css or the defaults can be chosen.
  • Images or other files (e.g. .html, .css) can be linked using {{path}}, where path is the Tenant's upload directory.
  • Various registration/login methods are available as template tags.
  • Custom HTML and CSS allow for the free design of custom page with easy access to backend login functionality.