Page tree

Contents

Admins can modify the landing page of the captive portal by configuring the authentication settings. A captive portal is a web page that your end users access through a web browser when they are first connected, so they can be authenticated and granted access to BloxOne services and resources. You can use captive portals for your users to present a login page that contains the required access authentication. You can modify the HTML template on the Authentication Settings page to customize the look and feel of the captive portal.

Note

You can modify only the look and feel of the captive portal, you cannot modify the predefined elements and content in the portal.

To modify the captive portal settings, complete the following:

  1. Authentication Domain: Enter the domain for the captive portal. The default is captiveportal.infoblox.internal.
  2. User Session Configuration: Click the arrow key to expand this section and complete the following:
    • Use Session TTL: Select this check box to specify the time interval during which the user session is valid. By default, when BloxOne DHCP is enabled, the user session interval will match the lease time. Otherwise, the time interval is set to eight hours.
    • Session TTL: Choose the time interval for the user session. The default is eight hours.
    • Default Redirect Target: Enter the redirect destination to which you want the system to redirect users after the user session expires. The default is https://www.infoblox.com/.
  3. HTML: This panel contains the styling script for the default captive portal. It displays the CSS styles that you can modify to customize the look and feel of the captive portal elements. As you make changes to the CSS style, the changes are reflected in the Preview panel.

    Note

    The HTML page must contain the {{{ibAuthnScript}}} and {{{ibAuthnPannel}}} tags. The {{{ibAuthnScript}}} tag contains javascript that is necessary for the HTML page authentication functionality, and the {{{ibAuthnPannel}}} tag is an HTML form that clients interact with in order to get authenticated.


    You should place {{{ibAuthnScript}}} in the <head> tag, as follows:

    <head>
           <link rel="shortcut icon" type="image/x-icon" href="/atlas/favicon.ico" />
        {{{ibAuthnScript}}}
          <style>
          .
          .
          .
          </style>
          <title>Infoblox Captive Portal</title>
       </head>

    You should place {{{ibAuthnPannel}}} in the <body> tag, as follows:


    <body>
        {{{ibAuthnPannel}}}
       </body>


    These tags contain HTML elements and javascript code for the default captive portal. You cannot make changes to the el
    ements within these tags, but you can change the style of the elements.

    • For example, if you want to change the Log In button from blue to green, you can modify the following element in the HTML panel:

      #ib-auth-submit   {        
      .
      .
      .
      background-color:green; }

      The captive portal will change accordingly, as follows:

    • from  to 
  4. Click Save to save your configuration or click Cancel to discard your changes.

The following table lists the HTML elements you can modify if you want to change the style of the captive portal:

ElementDescriptionUsage
#ib-authn-main-pannelDefines the area that contains the authentication information.

You can change the background color and the shape of this area by modifying the values of the following:

  • background-color
  • border-radius
#ib-authn-logoDefines the logo you use inside the authentication area of the captive portal.

The captive portal contains the Infoblox logo by default. If you want to change the logo, you must first upload the new logo and then change the URL in the content element. You can also make changes to the following to set the logo position:

  • margin
  • content
  • width:
  • padding:
#ib-authn-hlDefines the horizontal line that separates the logo and the authentication text below the logo.

You can define the color and the width of the horizontal line by modifying the following elements. To remove the line, set width to 0%.

  • border-top
  • width
#ib-authn-main-contentDefines the margin or padding for the content area.

You can modify the top, left/right, and bottom margins of the content area respectively. Enter the value in this order: top, left/right, and bottom to modify paddings.

  • padding
#ib-authn-messageDefines the font size of "Authentication Required" in the content area.

You can modify the alignment and font size of "Authentication Required" by modifying the following elements:

  • text-align
  • font-size
  • font-weight
#ib-authn-errorDefines the error message when the authentication returns an error.

You can apply any CSS styles to define the colors and position of the error message. However, the error message is predefined by Infoblox and you cannot change the error message.

#ib-authn-main-formDefines the form used for your captive portal.You can apply any CSS styles to define the colors and position of the form. However, the form is predefined by Infoblox and you cannot change the content of the form.
#ib-authn-submitDefines the style of the "Log In" button.

You can modify the following elements to change the style of the submit or "Log In" button:

  • display
  • box-sizing
  • font-family
  • font-size
  • padding
  • line-height
  • border
  • border-radius
  • width
  • height
  • margin
  • background-color
  • color
#ib-authn-submit:hoverDefines the style of the "Log In" button when users hover the mouse over it.

You can modify the following to change the style of the submit or "Log in" button when users hover the mouse over it:

  • border-color
  • outline
  • background-color

For more information about access authentication, see the following:

  • No labels

This page has no comments.