Customizing Captive Web Portal Design

Customizing the Captive Web Portal page allows you to edit the current Default page, create something completely new, or add logos from current companies web page. This gives you the ability to display the same look and feel as your current internal web pages for your end users. Under Preferences > Captive Web Portal > Design Template Four tabs will be displayed to allow you to customize your CWP page

  • Component Options: Allows you to edit the page using the component.

  • Edit: Allows you to customize your own CWP page.

  • CSS Style: Allows you to add CSS Style.

  • Layout: Allows you to edit page layout.

  • Image: Alows you to upload custom images to make the CWP look and feel like your own.

Component Options

  1. Click the add or delete button for the required component

  2. Page preview on Main page in the right side of the Web-console

  3. Click Update

Edit

  1. CWP page display in html code form

  2. Provide pages in html code format

  • Modify the page by adding or removing the tag of the component to the code

  • Can be modified using html code

  1. Click Update

  2. A Page preview will display on the Main page in the right side of the Web console.

CSS Style

You can define CSS Style class and use it in EDIT Tab or Layout Tab.

  1. Input the CSS style code in "CSS Style" tab.

.test {color:red;}

  1. To use defined CSS style in "Edit" tab

<div class="test">
TEST
</div>

  1. Click Update

  2. A Page preview will display on the Main page in the right side of the Web console.

Layout

You can modify the layout of the page using Html code.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://xmlns.jcp.org/jsf/facelets"ß
   xmlns:h="http://xmlns.jcp.org/jsf/html"
   xmlns:p="http://primefaces.org/ui"
   xmlns:gncomponent="http://xmlns.jcp.org/jsf/composite/gncomponent">
$HEAD
<body id="body1">
 $PAGEHEADER
 <div id="wrap" class="wrap">
     $CUSTOMPAGEHEADER
     <div id="content" class="content">
         <!-- Don't delete code -->
         $CONTENT
         <!-- Don't delete code -->
     </div>
     $CUSTOMPAGEFOOTER
 </div>
</body>
</html>

Image

Upload custom images to make CWP look and feel like your own.

Note

Only jpg/gif/png files with alphabetic character file names are supported.

Apply the defined CWP template

  1. Go to Policy in the top panel/li>

  2. Go to Node Policy in the left Policy panel

  3. Find and click name of Node Policy

  4. Find CWP Design Template in the main Management Policy

  5. Select a Design Template for a CWP page

  6. Click Update and apply on the right top panel.