Advanced Captive Portal Techniques
How to create elegant, custom-branded captive portal pages with CSS, JavaScript, and Flash.
Log into SputnikNet, then select Captive Portals under the CONFIG menu.
You have full control over the HTML used in captive portal pages, and can use advanced techniques such as CSS, JavaScript, and Adobe Flash to build extremely sophisticated designs. Here's we'll create a captive portal that utilizes all of these options.
To create or modify captive portals, select "Captive Portals" from the "CONFIG" menu.
Add a new captive portal.
Click on "Add New Captive Portal" to create a new captive portal. Or, to edit an existing captive portal, click on its name.
Name your new captive portal.
For this example, we'll create a new captive portal and name it "Rodeo".
Apply appropriate authentication system(s) to your new captive portal.
Authentication systems create login forms on captive portal pages. We'll add them first since they're part of the page's design. Here we're adding a guest authentication system called "Mandan Rodeo".
Review authentication system content.
Login forms inserted into the captive portal by authentication systems can include HTML. Here we've applied paragraph tags with class "greeting". We'll see later how you can use CSS to style the greeting text however you want.
Upload graphics to your captive portal.
Follow instructions in online documentation chapter titled "Branding your Wi-Fi Network with Captive Portals" to upload graphics for your captive portal. Once uploaded, you can use graphics in any captive portal.
Preview your captive portal with basic CSS.
If you want CSS style definitions to apply to both your captive portal content and the login form from the authentication system, place them between [style] and [/style] tags.
Here is the complete captive portal HTML previewed above. We've created an asterisk ("all") CSS selector to apply styles-- in this case, a dark blue background and white text-- to everything in the captive portal.
[style]
* {
background-color: #071f31;
color: white;
}
[/style]
[login]
Create walled garden policies for external content.
Elements fetched from external sites for display on captive portal pages need corresponding walled garden ("allow") policies so that they are not blocked before the user logs in. Here we intend to add some JavaScript from "mrodeo.com". First we'll create the walled garden policy, then we'll apply it to the Rodeo captive portal.
For more details on walled garden policies, see online documentation chapter titled "Branding using Walled Gardens and Redirects".
Add JavaScript to your captive portal page.
To use JavaScript in a captive portal page, it needs to be saved to a site external to SputnikNet. Here the JavaScript calls a nice animation of the photos of past rodeo winners from mrodeo.com. The following is pasted into the "portal content" field just after the CSS definition [/style] tag:
<script type="text/javascript" src="http://www.mrodeo.com/flash/swfobject.js"></script>
<script type="text/javascript" src="http://www.mrodeo.com/flash/bz.js"></script>
<div id="BZ06B0C49547644155862B"><div style="background-color:#ffffff;color:#000000;padding:1em;"><div style="margin: 0pt auto; max-width: 500px; text-align: justify;"></div></div></div>
Add a graphic and position it using CSS.
We'll add a CSS definition to place a logo over the JavaScript banner. The following goes between the [style] and [/style] tags:
img#mandan {
position: absolute;
top: 100px;
left: 580px;
}
The following HTML can go anywhere in the content below the closing [/style] tag:
<img id="mandan" src="/sputnik/pc/14/33" alt="mandan-230.png">
Use a table to layout additional design elements.
We'll add a few more graphics to the bottom of the captive portal, flanking the login form. An HTML table is an easy way to do this:
<div align="center">
<table border=0">
<tr>
<td width="200" ><img src="/sputnik/pc/14/36" alt="mandan-tix.png" align="right"></td>
<td width="60"> </td>
<td width="400">[login]</td>
<td><img src="/sputnik/pc/14/34" alt="bareback-horse-rider.png"></td>
</tr>
</table>
</div>
Style the login form with CSS.
Add more CSS selectors to style the greeting text (which we tagged with class "greeting"), the login form itself, and the login button. Sputnik provides a few CSS classes to help you style these elements, but each element is not present in every authentication system. They are:
- login_form: the overall form
- login_username: username field
- login_password: password field
- login_error: error message displayed for failed login
- login_submit: login button
NOTE: since some authentication systems don't include all of these classes, it's a good idea to use your browser to "view source" of the captive portal under construction. For example, the guest authentication system doesn't use the "login_submit" class for the login button, but you can select the element based on input type, as shown below:
p.greeting {
font: normal x-large Georgia, "Times New Roman", Times, serif;
text-align: center;
}
.login_form {
font: large "Lucida Grande", Lucida, Verdana, sans-serif;
}
input[type="button"],input[type="submit"] {
font: small-caps xx-large Georgia, "Times New Roman", Times, serif;
color: white;
background-color: #369;
}
Add some more flair to the login form.
Since in this example the captive portal will be viewed outdoors, we'll highlight the access code and login button in its "hover" state with some additional CSS definitions.
You have full control over the branding of your captive portal and can create any kind of customer experience you desire.
input[type="text"] {
font: bold x-large "Lucida Grande", Lucida, Verdana, sans-serif;
padding:3px;
color: yellow;
}
input[type="button"],input[type="submit"]:hover {
font: small-caps xx-large Georgia, "Times New Roman", Times, serif;
color: #369;
background-color: yellow;
}