www.hsnetworkmanager.com
Administrator Manual
Custom HTML, CSS and JavaScript

Default CSS for Welcome Portal and Apps

Field Description
Custom CSS CSS for setting the defaults of the Welcome Portal and all Apps. For instance, to adjust the font size, use the following definition and modify the values as needed:


:root {
--FontExtraSmall: 11px;
--FontSmall: 13px;
--FontStandard: 15px;
--FontMedium: 18px;
--FontBig: 22px;
--FontBiggest: 30px;
--FontHeaderTitles: 45px;
--FontHeaderTitlesResponsive: 30px;
}

Welcome Portal

Field Description
Welcome Portal Customisation

Enable customisation of the Welcome Portal by activating the fields: ‘Custom HTML Head’, ‘Custom CSS’, ‘Custom JavaScript’, and ‘Custom HTML’.If you have already applied some customisations, deactivating this setting, will not remove them. Instead, it will hide them from the administration interface and prevent their use in the Welcome Portal. If reactivated, the custom content will be displayed and utilised once again.

You can use this feature only if the Welcome Portal module is active.

HTML Head

Only visible if you have activated “Welcome Portal Customisation”.

 

Field Description

Custom HTML Head

Allows you to insert custom definitions into the HTML head section.

CSS

Only visible if you have activated “Welcome Portal Customisation”.

 

Field Description

Custom CSS

CSS that allow customisation of the graphical appearance of the Welcome Portal.

For example, to hide the ‘Disconnect’ button in the connection status app, insert the following CSS definition:

#StatusMainContainer .SubmitBox {

    display: none;

}

Javascript

Only visible if you have activated “Welcome Portal Customisation”.

 

Field Description

Custom JavaScript

Allows you to insert custom JavaScript.

HTML

Field Description

Custom HTML

Allows you to define the custom HTML structure for the Welcome Portal.

The content will be inserted into the “body” of the page and combined with other predefined elements.

You can use this feature only if the Welcome Portal module is active.

The basic HTML schema for the Welcome Portal is as follows:

<!–     PAGE HEADER –>

<div id=”WP_AppContainerBar”>

   <div id=”WP_AppContainerInner”>

         <div id=”WP_AppContainerBarText”>

               <div id=”WP_AppContainerBarLogoContainer”>

                     <img class=”HotspotLogo” src=”/functions/get-image.php?t=10&tmplid=%Template_ID%” alt=””/>

               </div>

               <div class=”WP_AppContainerBarTitle”>

                     <div class=”WP_AppContainerBarTitleRow”>%Template_PortalTitle%</div>

                     <div class=”WP_AppContainerBarSubTitleRow”>%Template_PortalSubTitle%</div>

               </div>

         </div>

   </div>

</div>

<!–     TOP BANNER  –>

<div id=”WP_AppContainerBarTopBanner” style=”display:none;”>

   <img id=”WP_AppContainerBarTopBannerImg” src=”” alt=””/>

</div>

<!–     APP BAR CONTAINER (Automatically added if “Display App Bar” is active) –>

<div id=”WP_AppContainer”>%WP_AppBar%</div>

<!–     SIDEBAR BUTTON (Automatically added if “Display the Sidebar Button” is active)   –>

<a id=”SidebarButton” href=”#” style=”display: none;”>%WP_SidebarButton%</a>

<!–     WELCOME PORTAL MAIN CONTAINER   –>

<div id=”WP_Container”>

   <!–  LEFT BANNER –>

   <div id=”Wp_AppLeftBanner” style=”display:none;”>

         <img id=”Wp_AppLeftBannerImg” src=”” alt=””/>

   </div>

   <!–  RIGHT BANNER –>

   <div id=”Wp_AppRightBanner” style=”display:none;”>

         <img id=”Wp_AppRightBannerImg” src=”” alt=””/>

   </div>

   <!–  INTRO MIXED CONTENT –>

   <div id=”WP_FullScreenAd”>

         %WP_IntroContent%

   </div>

   <!–  POWERED BY  –>

   <div id=”WP_AppBarPoweredBy”>

         Powered by <a target=’_blank’ href=’https://www.https://www.sicetelecom.it/sice-network-station-hotspot-pppoe-manager’>Network Station</a>

   </div>

</div>

Using the basic schema outlined above will generate the same result as the “standard” Welcome Portal.

The following variables can be used within the HTML:

Code Description
%Address% Address as entered in the manager.
%City% City as entered in the manager.
%CompanyName% Company name as entered in the manager.
%Country% Country as entered in the manager.
%Domain% Name of the domain.
%EMailAddress% Email address as entered in the manager.
%FirstName% First name as entered in the manager.
%FreeProductDescription% Description of the free product as defined in the domain.
%GatewayName% Name of the gateway.
%Lang% Language code selected by the user. Useful for customising texts displayed to the users using custom JavaScript.
The passed language codes are as follows:
• us: English United States;
• en: English United Kingdom;
• es: Spanish;
• fr: French;
• de: German;
• it: Italian;
• l1: first additional language;
• l2: second additional language;
• l3: third additional language.
%LastName% Last name as entered in the manager.
%Phone% Phone number as entered in the manager.
%SmsNumber% Primary phone number to which a confirmation or registration SMS is sent, based on what is defined in the domain registration mode.
%SmsNumber2% Secondary phone number to which a confirmation or registration SMS is sent, based on what is defined in the domain registration mode.
%Translations_ID% Inserts the translated text for the Welcome Portal, based on the ID defined and the active language.Replace “Translations_ID” with the actual translation code to be inserted.
%Template_ID% ID of the reference template. This can be used, for example, to load the main image defined in the template by using the following URL in the “src” attribute of an “img” tag: src=”/functions/get-image.php?t=10&tmplid=%Template_ID%”.
%Template_PortalTitle% Title of the Welcome Portal in the active languages.
%Template_PortalSubTitle% Subtitle of the Welcome Portal in the active languages.
%Web% Web address as entered in the manager.
%WP_IntroContent% Content of the Intro.
%WP_AppBar% Content of the AppBar.
%WP_SidebarButton% Button of the Sidebar.
%Zip% ZIP code as entered in the manager.

Info App

CSS

Field Description
CSS CSS that allow customisation of the graphical appearance of the Info App.

Custom HTML to Display at the Top

Field Description
Custom HTML Custom HTML to be displayed at the top. Multilingual field.

Login App

Field Description
Use Custom App Allow the use of a custom login app. If defined, it will replace the standard Login App.
The “standard“ Login App will then automatically receive the data defined by this customised app, as detailed in the Developer’s Manual.
Custom Login App

Select the custom Login App that will replace the standard Login App.Features and an example of this custom App are described in the Developer Manual.

Only Custom Login Apps classified as “Internal Login” type are listed.

CSS

Field Description
CSS

CSS that allow customisation of the graphical appearance of the Login App.

JavaScript

Field Description
JavaScript

JavaScript that allows customisation of the logical operation of the login application.

Custom HTML to Display at the Top

Field Description

Custom HTML

Custom HTML to be displayed at the top.

Not visible if ‘Use Custom App’ has been activated.

Multilingual field.

CSS for the User Profile App

Field Description
CSS

CSS that allow customisation of the graphical appearance of the User Profile App.

CSS for the Connection Status App

Field Description

CSS personalizzati

CSS that allow customisation of the graphical appearance of the Connection Status App.

In versions prior to version 7, the custom CSS for the Connection Status App were placed in the general CSS of the Welcome Portal. If you update your system, the CSS specific to the Connection Status App will need to be moved to this field

Parameterizing Fields

Various multilingual fields and the CSS of the templates can be parameterized with the following variables:

  • %Address%: manager’s address;
  • %City%: manager’s city;
  • %Zip%: manager’s ZIP;
  • %Country%: manager’s ountry code;
  • %Phone%: manager’s phone number;
  • %LastName%: manager’s contact last name;
  • %FirstName%: manager’s contact first name;
  • %EMailAddress%: manager’s email address;
  • %Web%: manager’s web address;
  • %FreeProductDescription%: description of the first free product assigned to the domain;
  • %Domain%: nome del dominio del gestore;
  • %CompanyName%: manager’s company name;
  • %GatewayName%: gateway name;
  • %SmsNumber%: number assigned to the first modem;
  • %SmsNumber2%: number assigned to the second modem.

 

The use of parameterized templates allows sharing them on multiple domains/gateways. In practice, it is possible to define a single template that parameterizes for multiple domains or gateways making any changes be easy.

Prometeo, HSNM, HsNetworkManager and logos Prometeo are HSNM and HsNetworkManager trademark. | Privacy Policy | Cookie Policy