Customizing Splash Page Templates

Introduction:

Splash Page Templates are designed to easily customize the welcome pages to provide better branding experience for end-users while prompting for user authentication. The welcome page is the first impression about the business that visitors get through to connect to Wi-Fi with through social credentials or filling a short form.

Templates consist HTML, CSS and JavaScript files. Common CSS and JavaScript files are linked on server which does not need changes. The HTML and Custom CSS can be customized from the control panel. 

For a list of available templates please contact IPERA Support team. you will be provided with a list of templates along with HTML and Custom CSS files. 


Template Branding & Logo:

After selecting the appropriate template, the first step is to add logo and brand images to the splash page (refer to "Replacing Template Images" section).

It is necessary to apply the exact skin color which goes with logo and brand color after adding the images (refer to "Changing Theme Skin Color" section).

If the logo does not fit with the background, then you may need to contact IPERA support to suggest the best method


Replacing Template Images:

  • Images should be changed through Media Manager
  • Image can only be replaced with another image that has the same size (i.e.: dimension) and same format (i.e.: png or jpg)

 

Changing Theme Skin Color:

Theme skin color can be changed by defining appropriate class in the HTML body.   

<!--change skin color-->
<body class="skin-blue">

Options are:

  • skin-blue
  • skin-brown
  • skin-black
  • skin-green
  • skin-orange
  • skin-purple

Defining New Theme Skin Color

If necessary, new theme skin color can be defined using custom CSS. Copy the code at the bottom section of the Custom CSS from the control panel

/*START skin-luxury-brown color*/

 

/*language select color*/

.skin-skin-luxury-brown .dd-select {border: solid 1px #333; background: #a39161;}

 

/*form button color*/

.skin-skin-luxury-brown. registration-block form button{background: #a39161;}

 

/*form labels color*/

.skin-skin-luxury-brown. form-group label{color:#a39161;}

 

/*social buttons color*/

.skin-skin-luxury-brown. social-btn-block button{background:#a39161;}

 

/*buttons color*/

.skin-skin-luxury-brown. btn-style{background:#a39161;}

 

/*links color*/

.skin-skin-luxury-brown. content-item-info a{color:#a39161}

 

/*modal button color*/

.skin-skin-luxury-brown. modal.feedback .modal-body button{background:#a39161;}

 

/*close modal button color*/

.skin-skin-luxury-brown. btn-style.close_modal{background:#a39161;}

 

/*appstore and google play buttons color*/

.skin-skin-luxury-brown .application_block .btn-style{background:#a39161;}

 

/*registration form text color*/

.skin-skin-luxury-brown. registration-block p.title {color:#a39161}

 

/*feedback modal heading color*/

.skin-skin-luxury-brown. modal.feedback .modal-body strong{color:#a39161}

 

/*feedback modal label color*/

.skin-skin-luxury-brown. modal.feedback .modal-body .form_item label {color:#a39161}

 

/*feedback modal text color*/

.skin-skin-luxury-brown. modal.succsess_feedback {color:#a39161}

 

/*!*END skin-luxury-brown color*!*/

Have more questions? Submit a request

Comments