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 ----------------- #. Click the add or delete button for the required component #. Page preview on Main page in the right side of the Web-console #. Click **Update** Edit ---- #. CWP page display in html code form #. 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 3. Click **Update** 4. 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. .. code:: bash .test {color:red;} 2. To use defined CSS style in "Edit" tab .. code:: bash
TEST
3. Click **Update** 4. 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. .. code:: bash $HEAD $PAGEHEADER
$CUSTOMPAGEHEADER
$CONTENT
$CUSTOMPAGEFOOTER
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 ------------------------------ #. Go to **Policy** in the top panel/li> #. Go to **Node Policy** in the left Policy panel #. Find and click **name of Node Policy** #. Find **CWP Design Template** in the main **Management Policy** #. Select a Design Template for a CWP page #. Click **Update** and **apply** on the right top panel.