¶ NACVIEW Captive Portal - Customization
Captive Portal is a secure and customizable network authentication method. It allows full protection against misuse of network access and excessive network traffic thanks to the possibility of applying bandwidth limitations.
Correct configuration of the Captive Portal in the NACVIEW system will redirect users to a page where they will be asked to provide authentication data. After successful authentication, they will be granted access to the requested URL and other network resources, according to the established access rules.
The instructions below concern the configuration of the appearance of the website displayed to visitors.
¶ 1. Default template
¶ 2. Template personalization
The Captive Portal edit form allows you to personalize the appearance by completing the appropriate form fields:
- Custom message after correct authorization
- Custom message after incorrect authorization
- Header template
- Footer template
- HEAD section template addon
The fields allow you to enter a plain text as well as HTML, CSS, javascript and selected Symphony TWIG tags. Please be attentive and careful during your code entry. We recommend that you keep saving measures when embedding your code. It is not recommended to enter any code from an unknown source.
¶ 3. Location of code regions
Blue frames represent the location of individual blocks on the page:
The custom message after correct authorization:
The custom message after incorrect authorization:
¶ 4. Header template
The code below shows a sample way to change the background and header of the Captive Portal page.
Images and backgrounds: Please note, that the background and images must be embedded in the code of the page. It is not possible to embed external files. The recommended way is to embed graphic elements in SVG format (e.g. logos, background images).
An example of setting an image as background in CSS for the ‘body’ element:
body {
background-image: url("data:image/svg+xml,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg>");
}
Here is an example of the header implementation:
<style>
body {
background-size: cover;
background-position: center;
background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='69.141' height='40' patternTransform='scale(3) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(204, 77%, 32%, 1)'/><path d='M69.212 40H46.118L34.57 20 46.118 0h23.094l11.547 20zM57.665 60H34.57L23.023 40 34.57 20h23.095l11.547 20zm0-40H34.57L23.023 0 34.57-20h23.095L69.212 0zM34.57 60H11.476L-.07 40l11.547-20h23.095l11.547 20zm0-40H11.476L-.07 0l11.547-20h23.095L46.118 0zM23.023 40H-.07l-11.547-20L-.07 0h23.094L34.57 20z' stroke-width='1' stroke='hsla(204, 64%, 36%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}
.captive-header {
background: transparent;
height: auto;
padding: 3px;
}
.logo-section {
text-align: center;
padding: 30px 30px 0 30px;
}
.logo {
font-size: 45px;
font-weight: bold;
color: white;
}
.title {
font-size: 22px;
font-weight: 100;
line-height: 40px;
color: #dadada;
text-transform: uppercase
}
</style>
<div class="logo-section">
<div class="logo">Hotel Typical</div>
<div class="title">The best place to stay</div>
</div>
The sample code adds new elements to the page:
• Hotel Typical as the logo
• tagline
• using CSS - the appearance of newly added elements was changed and the background image was set
¶ 5. Footer template
Here we have an example of the footer implementation:
<style>
.captive-footer {
text-align: inherit;
padding: 10px;
background: rgba(0,0,0,0.6);
}
.footer-body {
text-align: center;
}
.captive-footer ul {
padding: 0;
margin: 0;
display: block;
list-style: none;
}
.captive-footer ul {
color: #aaa;
display: block;
}
.captive-footer ul li {
display: inline-block;
}
.captive-footer ul li a {
display: block;
padding: 5px;
color: #dadada;
}
</style>
<div class="footer-body">
<ul>
<li>Copyright © Hotel Typical</li>
<li><a href="#" data-toggle="modal" data-target="#modal-terms">Terms and conditions</a></li>
<li><a href="#" data-toggle="modal" data-target="#modal-privacy-policy">Privacy policy</a></li>
<li><a href="#" data-toggle="modal" data-target="#modal-contact">Contact</a></li>
</ul>
</div>
<div class="modal fade" id="modal-terms" tabindex="-1" role="dialog" aria-labelledby="Terms and conditions">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Terms and conditions</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-privacy-policy" tabindex="-1" role="dialog" aria-labelledby="Privacy policy">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Privacy policy</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-contact" tabindex="-1" role="dialog" aria-labelledby="Contact">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Contact</h4>
</div>
<div class="modal-body">
<h2>Hotel Typical</h2>
<p>42 The Avenue<br>
London<br>
NW67 0GP
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The sample code adds new elements to the page:
• footer with links to sample content
• exemplary windows with content opened after clicking on the link
¶ 6. The HEAD section template addon
Sample implementation of an additional header at the top of the page:
<style>
.extra-section {
background: black;
color: #ffffff;
text-align: center;
padding: 20px;
}
</style>
<div class="extra-section">
{% if app.request.locale == 'pl' %} W tym miesiącu oferujemy darmowe WiFI dla naszych gości! {% endif %}
{% if app.request.locale == 'en' %} Free WiFi for our guests this month! {% endif %}
{% if app.request.locale == 'de' %} Diesen Monat bieten wir unseren Gästen kostenloses WLAN! {% endif %}
{% if app.request.locale == 'es' %} ¡Este mes ofrecemos Wi-Fi gratis a nuestros huéspedes! {% endif %}
{% if app.request.locale == 'fr' %} Ce mois-ci, nous offrons le Wi-Fi gratuit à nos clients ! {% endif %}
{% if app.request.locale == 'ua' %} Цього місяця ми пропонуємо нашим гостям безкоштовний Wi-Fi! {% endif %}
</div>
The sample code adds new elements to the page:
• sample banner at the top of the page
• CSS styles
• sample content translated into available languages
¶ 7. How to translate the texts on the website into the available languages
Any text or other page elements may be displayed depending on the language selected by the user.
To restrict a given fragment to display in the selected language, use the following code:
{% if app.request.locale == 'pl' %} Tekst po polsku {% endif %}
¶ 8. How to add a modal window
The following code shows how to use modal windows:
<a href="#" data-toggle="modal" data-target="#modal-custom-name">Modal example</a>
<div class="modal fade" id="modal-custom-name" tabindex="-1" role="dialog" aria-labelledby="My custom modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">My custom modal</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Please note that the item ID must be unique.
¶ 9. System variables
You can also use system variables in the page code to personalize the look of the Captive Portal page, such as:
{% if app.request.server.get('SERVER_NAME') == 'captiveportal.pl' %}
{% endif %}
Available variables: SERVER_NAME, SERVER_PORT, REMOTE_ADDR, SCRIPT_NAME, SCRIPT_FILENAME, QUERY_STRING, REQUEST_URI