HSNM Hotspot Manager-Graphic Customization of Cards and Vouchers

Graphic Customization of Cards and Vouchers

This page, accessible from the respective command bars, allows you to customize the graphic layout of cards and vouchers.
By using a default template, you can simply change the graphic layout provided by the various fields (background image, colors, etc) and if you choose a “Custom” template you can define the HTML with variables and the CCS code. In this way, you can meet every need.

Adding and Editing

Pressing the button “Graphic Customization” from the list of the cards or vouchers, a page will appear with the following fields:

Preview

Field	Description
Preview	Displays a preview based on the entered fields.

General Data

The data are the area that contains the texts (title, product description, username/password or the voucher code, etc).

Field	Description
Template	Allows selecting the template to use for printing. The template chosen affects the available fields for customization. The possible options are: Classic: it prints cards with a classic layout. Two Columns: The content of the cards is divided in two vertical areas. QRCode: cards, instead of the username and password, contain the QRCode to log in. Custom: in this case, the graphic can be free defined by entering HTML and CSS codes. Warning! To easily log in with QRCode, disable the CNA.
Data Alignment	Alignment of the data container. Possible options are: Left; Right. The field is not displayed if you choose the “Classic” or “Custom” template.
Data Width	Allows defining the width of the area where the data are printed. The field is not displayed if you choose the “Classic” or “Custom template”.
Title	Inserts the multilingual title to be printed for the data area. In this field, you can use the variable %CompanyName% that automatically inserts the Company name of the manager. The field is not displayed if you choose the “Classic” or “Custom” template.
Title Color	Colour of the title. The field is not displayed if you choose the “Classic” or “Custom” template.“
Text Color	Text’s colour. The field is not displayed if you choose the “Custom” template.
Initial Gradient Color for Data Background	Initial gradient colour of the area that contains data. The field is not displayed if you choose the “Classic” or “Custom” template.
Final Gradient Color for Data Background	Initial gradient colour of the area that contains data. The field is not displayed if you choose the “Classic” or “Custom” template.
Print Price	Enables the printing of the price. The field is not displayed if you choose the “Classic” or “Custom” template.
Print Expiration	Enables the printing of the expiration. The field is not displayed if you choose the “Classic” or “Custom template”.
Print “Can be used till”	Enables the printing of the “Can be used till” date and time. Enables the printing of the “Can be used till” date and time. The field is not displayed if you choose the “Classic” or “Custom” template.

Main Title

The main title is an additional title that allows you to highlight the nature of the card or voucher. It usually quotes “WiFi Card” or “WiFi Voucher”.

Field	Description
Enable the Printing	Enables the printing of the main title.
Text	Enter the multilanguage text to be printed. Warning, since the space is limited, it is possible to enter only a few characters.
Background Color	Colour of the background.
Text Color	Colour of the text.

This section is not available when you choose the “Classic” or “Custom” template.

Background

It allows defining the background layout of the card or voucher.

Field	Description
Background Type	Defines the type of background to be printed. Coloured: allows colouring the background area. It displays the fields for choosing the initial and final gradient colour. Background image: allows defining the background image to use. None: no background is printed.
Initial Gradient Color	Defines the initial gradient colour. Available only if the “Background” type has been selected “Colored”.
Final Gradient Color	Defines the final gradient colour. Available only if in the “Background” type has been selected “Colored”.
Background Image	Allows loading the background image to print on the card or voucher. Dimensions must be 325 x 205 pixel. Available only if you have selected selected “Background Image” in the “Background” type field.

Custom Template

It allows you to define freely the HTML and CSS to be used for the printing of cards or vouchers.

Field

Description

HTML

Customised HTML of the template.
Allows you to define the elements that define the printing structure of the cards or vouchers.
For the cards, it is possible to use the following variables: %CanBeUsedTill%; %CompanyName%; %Currency%; %Expiration%; %InfoText%; %Password%; %PasswordLabel%; %UserName%; %UserNameLabel%.
For the vouchers, it is possible to use the following variables:
%CanBeUsedTill%; %CompanyName%; %Currency%; %Expiration%; %InfoText%; %PriceLabel%; %Product%; %SellPrice%; %UserData%; %VoucherCode%; %QRCode%.
The field is displayed only if you choose the “Customised” template.

In order to add the QRCode, add an IMG element and in the src attribute define the variable. Example:

CSS

Customised CSS of the template.
They allow you to freely edit any graphic layout of the elements that make up the cards or the vouchers.

Template variables

In the custom templates, you can use the following variables:

Variable	Description
%CanBeUsedTill%	Prints the expiration date of the card.
%CompanyName%	Manager’s company name.
%Currency%	Currency symbol.
%Exparition%	Expiration description.
%InfoText%	Multilangual text information defined in the translations. For cards, use “Cards StartSurf” while for vouchers “Voucher ForActivateUseCode”.
%Password%	User’s password assigned to the cards.
%PasswordLabel%	Multilangual title of the password defined in the translations. It is used “Cards Password”.
%PriceLabel%	Multilingual text of the price defined in the translations. For cards, use “Cards Price” while for vouchers “Voucher Price”.
%Product%	Multilangual description of the product assigned to the card or the voucher.
%SellPrice%	Sales price.
%UserData%	Text that contains any data of the user assigned to the voucher.
%UserName%	User name assigned to the card.
%UserNameLabel%	Multilingual title of the password defined in the translations. It is used “Cards UserName”.
%VoucherCode%	Voucher code.

Example of a custom template for cards (two columns)

HTML

<div class=”CardsContainer”>
<div class=”CardsContentContainer”>
<div class=”CardsContentInnerContainer”>
<div class=”CardsTitle”>%DataTitle%</div>
<div class=”CardsProductName”>%Product%</div>
<div class=”CardsInfoLabel”>%InfoText%</div>
<div class=”CardsUserNameLabel”>%UserNameLabel%</div>
<div class=”CardsUserName”>%UserName%</div>
<div class=”CardsPasswordLabel”%HidePassword%>%PasswordLabel%</div>
<div class=”CardsPassword”%HidePassword%>%Password%</div>
<div class=”CardsPriceLabelContainer”%HidePrice%>%PriceLabel%: </div>
<div class=”CardsPriceContainer”%HidePrice%>%Currency%%SellPrice%</div>
<div class=”CardsExpiration”%HideExpiration%>%Expiration%</div>
<div class=”CardsExpiration”%HideCanBeUsedTill%>%CanBeUsedTill%</div>
</div>
</div>
<div class=”CardsMainTitle”%HideMainTitle%>%MainTitleText%</div>
</div>

CSS
.CardsContainer {
line-height: normal;
width:325px;
height:205px;
background-color:%BackgroundStartGradientColor%;
background: %BackgroundStartGradientColor%;
background: -webkit-linear-gradient(right,%BackgroundStartGradientColor%,%BackgroundEndGradientColor%); /*Safari 5.1-6*/
background: -o-linear-gradient(right,%BackgroundStartGradientColor%,%BackgroundEndGradientColor%); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,%BackgroundStartGradientColor%,%BackgroundEndGradientColor%); /*Fx 3.6-15*/
background: linear-gradient(to right, %BackgroundStartGradientColor%, %BackgroundEndGradientColor%); /*Standard*/
%BackgroundImg%;
background-size:cover;
font-size:10px;
font-family:arial;
float:left;
position: relative;
}

.CardsContentContainer {
background-color:rgba(0,0,0,0.4);
background: #222;
background: -webkit-linear-gradient(%DataGradientDirection%,%DataStartGradientColor%,%DataEndGradientColor%); /*Safari 5.1-6*/
background: -o-linear-gradient(%DataGradientDirection%,%DataStartGradientColor%,%DataEndGradientColor%); /*Opera 11.1-12*/
background: -moz-linear-gradient(%DataGradientDirection%,%DataStartGradientColor%,%DataEndGradientColor%); /*Fx 3.6-15*/
background: linear-gradient(to %DataGradientDirection%, %DataStartGradientColor%, %DataEndGradientColor%); /*Standard*/
width:%DataWidth%;
color:%TextColor%;
float:%ContentContainerFloat%;
}

.CardsContentInnerContainer {
padding:10px;
height:185px;
}

.CardsTitle {
color:%DataTitleColor%;
font-size:1.4em;
font-weight:bold;
max-height:50px;
overflow:hidden;
}

.CardsProductName {
font-size:1.2em;
margin: 3px 0 3px 0;
max-height:42px;
overflow:hidden;
}

.CardsUserNameLabel, .CardsPasswordLabel {
font-size:0.9em;
overflow:hidden;
max-height:10px;
}

.CardsPriceLabelContainer {
display:inline;
}

.CardsPriceContainer {
display:inline;
font-size:1.4em;
margin: 5px 0 5px 0;
}

.CardsInfoLabel {
font-size:0.9em;
overflow:hidden;
max-height:20px;
}

.CardsExpiration {
font-size:0.9em;
overflow:hidden;
max-height:17px;
}

.CardsUserName, .CardsPassword {
background-color:white;
border-radius:3px;
text-align:center;
font-weight:bold;
color:#111;
font-size:1.1em;
margin: 2px 0 2px 0;
padding:2px 0 2px 0;
}

.CardsMainTitle {
background:%MainTitleBackgroundColor%;
padding:6px 7px 3px 7px;
color:%MainTitleTextColor%;
font-size:1.8em;
margin-top:175px;
max-height: 21px;
position:absolute;
left:%MainTitleLeft%;
right:%MainTitleRight%;
overflow: hidden;
z-index: 10;
}.CardsUser {
margin-top:10px;
}

.CardsUserData {
margin-left: 20px;
}

Example of a custom template for vouchers (two columns)

HTML

<div class=”VouchersContainer”>
<div class=”VouchersContentContainer”>
<div class=”VouchersContentInnerContainer”>
<div class=”VouchersTitle”>%DataTitle%</div>
<div class=”VouchersProductName”>%Product%</div>
<div class=”VouchersInfoLabel”>%InfoText%</div>
<div class=”VouchersCodeContainer”>%VoucherCode%</div>
<div class=”VouchersPriceLabelContainer”%HidePrice%>%PriceLabel%: </div>
<div class=”VouchersPriceContainer”%HidePrice%>%Currency%%SellPrice%</div>
<div class=”VouchersExpiration”%HideExpiration%>%Expiration%</div>
<div class=”VouchersExpiration”%HideCanBeUsedTill%>%CanBeUsedTill%</div>
</div>
</div>
<div class=”VouchersMainTitle”%HideMainTitle%>%MainTitleText%</div>
</div>%UserData%

CSS
.VouchersContainer {
line-height: normal;
width:325px;
height:205px;
background-color:%BackgroundStartGradientColor%;
background: %BackgroundStartGradientColor%;
background: -webkit-linear-gradient(right,%BackgroundStartGradientColor%,%BackgroundEndGradientColor%); /*Safari 5.1-6*/
background: -o-linear-gradient(right,%BackgroundStartGradientColor%,%BackgroundEndGradientColor%); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,%BackgroundStartGradientColor%,%BackgroundEndGradientColor%); /*Fx 3.6-15*/
background: linear-gradient(to right, %BackgroundStartGradientColor%, %BackgroundEndGradientColor%); /*Standard*/
%BackgroundImg%;
background-size:cover;
font-size:10px;
font-family:arial;
float:left;
position: relative;
}

.VouchersContentContainer {
background-color:rgba(0,0,0,0.4);
background: #222;
background: -webkit-linear-gradient(%DataGradientDirection%,%DataStartGradientColor%,%DataEndGradientColor%); /*Safari 5.1-6*/
background: -o-linear-gradient(%DataGradientDirection%,%DataStartGradientColor%,%DataEndGradientColor%); /*Opera 11.1-12*/
background: -moz-linear-gradient(%DataGradientDirection%,%DataStartGradientColor%,%DataEndGradientColor%); /*Fx 3.6-15*/
background: linear-gradient(to %DataGradientDirection%, %DataStartGradientColor%, %DataEndGradientColor%); /*Standard*/
width:%DataWidth%;
color:%TextColor%;
float:%ContentContainerFloat%;
}

.VouchersContentInnerContainer {
padding:10px;
height:185px;
}

.VouchersTitle {
color:%DataTitleColor%;
font-size:1.4em;
font-weight:bold;
max-height:66px;
overflow:hidden;
}

.VouchersProductName {
font-size:1.2em;
margin: 3px 0 3px 0;
max-height:42px;
overflow:hidden;
}

.VouchersPriceLabelContainer {
display:inline;
}

.VouchersPriceContainer {
display:inline;
font-size:1.4em;
margin:5px 0 5px 0;
}

.VouchersInfoLabel {
font-size:0.9em;
overflow:hidden;
max-height:20px;
}

.VouchersExpiration {
font-size:0.9em;
overflow:hidden;
max-height:17px;
}

.VouchersCodeContainer {
background-color:white;
border-radius:3px;
text-align:center;
font-weight:bold;
color:#111;
font-size:1.1em;
margin:2px 0 2px 0;
padding:2px 0 2px 0;
}

.VouchersMainTitle {
background:%MainTitleBackgroundColor%;
padding:6px 7px 3px 7px;
color:%MainTitleTextColor%;
font-size:1.8em;
margin-top:175px;
max-height: 21px;
position:absolute;
left:%MainTitleLeft%;
right:%MainTitleRight%;
overflow: hidden;
z-index: 10;
}.VouchersUser {
line-height: 16px;
background-color: #666;
margin-top: 2px;
padding: 5px 10px;
margin-top: 2px;
display: inline-block;
width: 305px;
}