F5 Logo MyF5
Search
  1. MyF5 Home
  2. BIG-IP Access Policy Manager: Customization
  3. Access Profile and Per-Request Policy - Logout/Ending Deny - Modern and Standard
  4. Localizing ending pages
  5. Personalizing Appearance Settings
Manual Chapter : Personalizing Appearance Settings

Applies To:

Show Versions Show Versions

BIG-IP APM

  • 16.0.1, 16.0.0
Manual Chapter

Personalizing Appearance Settings

What is personalization?

With full and mobile browser customization, you can change the appearance, text, and messages of all pages that a browser views, either from the BIG-IP Edge Client by directly logging in through a web browser, or on a mobile device. Some settings that are specific to the BIG-IP Edge Client software are customized separately in the BIG-IP Edge Client customization view.

Personalizing page appearance for common settings

Personalize access profile login pages to change the front image and advanced customization images for the login page in a specific access or per-request policy.
  1. On the Main tab, click
    Access
    Profiles / Policies
    Customization
    General
    .
    The Customization tool appears in General Customization view, displaying
    Form Factor: Full/Mobile Browser
     settings.
  2. To configure common settings, click
    Customization Settings
    Access Profiles
    access_profile_name
    Common
    .
  3. Customize the settings for each individual element by clicking the element and changing the displayed settings.
  4. After you customize settings, click the
    Save
     icon at the top of the Customization tool.
The access or per-request policy login page reflects your changes.

Previewing customization changes

You must have customized an element with the Customization tool to see a preview of your changes.
After you customize and save an element with the Customization tool, you can preview the changes you have made in the Preview window. The Preview window opens a separate browser window, and shows a live update of changes as you save them.
  1. On the Main tab, click
    Access
    Profiles / Policies
    Customization
    General
    .
    The Customization tool appears in General Customization view, displaying
    Form Factor: Full/Mobile Browser
     settings.
  2. On the menu bar, at right, click the
    Preview
     button.
  3. Navigate to a page to view customizations.
    For example, to navigate to a logon page and view the results of access profile branding customization, in the Preview window expand
    Customization Settings
    Access Profiles
    access_profile_name
    Access Policy
    Logon Pages
    , then click
    logon_page_name
    .
The Preview window shows the results of any customization changes.

General page style settings

With the Customization tool, you can customize the following general page style settings for access profiles or per-request policies.
Name
Value
Description
Page alignment
Left
,
Center
, or
Right
.
Indicates the general HTML page alignment for all pages displayed by the access profile or per-request policy.
Page background color
A hex color code, for example,
#123ABC
. When you click the color value, two color choosers appear. One allows you to select a color from 40 common color blocks, and the other allows you to select any HTML color from a more sophisticated color wheel. You can also type the color value in as text.
Indicates the color for the general page background for all pages displayed by the access profile or per-request policy.
Page width (px or %)
A specific pixel value, for example
800px
, or a percentage, for example
80%
.
Specifies the width of the content on all HTML pages displayed by the access profile or per-request policy, as an absolute pixel value or as a percentage of the entire browser screen.

Font settings

With the Customization tool, you can customize the following font settings for access profiles or per-request policies.
Setting
Value
Description
Font family (comma-separated)
Font names or font-family names, space-separated, for example
Calibri, Tahoma, Verdana, Arial, Helvetica, Sans-Serif
.
Specifies the base font used by pages displayed by the access profile.
Headline font size (px)
A pixel value, for example
18px
.
Indicates the pixel size for heading items on pages displayed by the access profile.
Text font size (px)
A pixel value, for example
14px
.
Indicates the pixel size for text items on pages displayed by the access profile.

Page header settings

You can customize the following page header style settings with the Customization tool.
Setting
Value
Description
Disconnect icon
An image icon 48 x 48 pixels or smaller.
Specifies the icon image displayed in the browser when the page is disconnected.
Header background color
A hex color code, for example,
#123ABC
. When you click the color value, two color choosers appear. One allows you to select a color from 40 common color blocks, and the other allows you to select any HTML color from a more sophisticated color wheel. You can also type the color value in as text.
Indicates the background color for HTML header elements for the web pages served to web and mobile clients.
Header left image (Full Size)
An image name. This is a larger image up to 80 x 80 pixels, for display on web pages.
The header image for web pages. To replace this image, type the relative path, or click the preview icon to the right of the filename, and click
Replace
.
Header left image (Mobile Devices Size)
An image name. This is a smaller image up to 32 x 32 pixels, for display on mobile devices.
The header image for mobile device pages. To replace this image, type the relative path, or click the preview icon to the right of the filename, and click
Replace
.

Page footer settings

You can customize the following page footer style setting with the Customization tool.
Name
Value
Description
Footer font size (px)
A font size, in pixels, for example
12px
.
Specifies the font size for text in web page footers.

Layout settings

You can customize the following settings for page layouts with the Customization tool.
Name
Value
Description
Form cell width (px or %)
Width, in pixels or percentage, of the main login page form, for example
240px
, or
50%
.
Specifies the width of the login page form in pixels or as a percentage of the frame.
Image cell width (px or %)
Width, in pixels or percentage, of the main login page image cell width, for example
240px
, or
50%
.
Specifies the width of the login page image area in pixels or as a percentage of the frame.
Main table background color
A hex color code, for example,
#123ABC
. When you click the color value, two color choosers appear. One allows you to select a color from 40 common color blocks, and the other allows you to select any HTML color from a more sophisticated color wheel. You can also type the color value in as text.
Indicates the background color for the login page main frame.
Page layout
Form left, form center, or form right.
Indicates the placement of the login page form on the main access policy page.

Image settings

You can customize the following settings for the main page image with the Customization tool.
Name
Value
Description
Default image
Width, in pixels or percentage, of the main login page form, for example
240px
, or
50%
.
Specifies the width of the login page form in pixels or as a percentage of the frame.
Image left margin (px)
Left side margin, in pixels, of the main login page image, for example
24px
.
Specifies the left margin of the login page image.
Image right margin (px)
Right side margin, in pixels, of the main login page image, for example
24px
.
Specifies the right margin of the login page image.
Image top margin (px)
Top-edge margin, in pixels, of the main login page image, for example
24px
.
Specifies the top margin of the login page image.
Side image alignment
Center, left, or right.
Specifies the alignment of the image within the side frame.

Form settings

You can customize the following login form settings with the Customization tool.
Setting
Value
Description
Form alignment
Center
,
Left
, or
Right
.
Specifies the alignment of the form within the form frame.
Form background color
A hex color code, for example,
#123ABC
. When you click the color value, two color choosers appear. One allows you to select a color from 40 common color blocks, and the other allows you to select any HTML color from a more sophisticated color wheel. You can also type the color value in as text.
Indicates the background color for the login page form.
Form height (px, %, or auto)
Height value in pixels, as a percentage of the frame, or auto, for example
240px
,
40%
, or
auto
.
Specifies the height of the login form in the login frame.
Form left margin (px)
Left margin, in pixels, of the main login page form, for example
24px
.
Specifies the left margin of the login form.
Form right margin (px)
Right margin, in pixels, of the main login page form, for example
24px
.
Specifies the right margin of the login form.
Form top margin (px)
Top margin, in pixels, of the main login page form, for example
24px
.
Specifies the top margin of the login form.
Form width (px or %)
Form width in pixels or as a percentage of the form frame, for example
250px
 or
50%
.
Specifies the login form width within the login frame.

Form element settings

You can customize the following settings for the appearance of elements in the login form with the Customization tool.
Name
Value
Description
Field alignment
Center
,
Left
, or
Right
.
Specifies how fields align in the login form.
Field width (%)
A percentage value, for example
67%
.
Specifies the width of fields in the login form, as a percentage of the total size of the login form.
Header alignment
Left, center, or right.
Specifies the alignment of header elements in the login form.
Label alignment
Left, center, or right.
Specifies the alignment of form field labels in the login form.
Label position
Left or above.
Specifies whether login form field labels are above or to the left of their respective fields.
Label width (%)
A percentage value, for example
67%
.
Specifies the width of field labels in the login form.

Advanced customization image settings

You set advanced customization images to make images you add through the image browser available to your advanced customization pages.
The
Advanced Customization Images
 properties pages allow you to set advanced customization images from the image browser to associate with advanced customization image names. You can then use the image name to add an image to an advanced customization page.
To select an image from the image browser to associate with an image for advanced customization, click the button next to the current (or default) image name, and select
Replace
.

Personalizing page appearance for access profile logout settings

Personalize access profile logout settings to add advanced customization image support to logout pages in the access profile.
  1. On the Main tab, click
    Access
    Profiles / Policies
    Customization
    Advanced
    .
    The Customization tool appears in Advanced Customization view, displaying the
    Form Factor: Full/Mobile Browser
     settings in the left pane.
  2. To configure logout settings, in the left pane, expand the folders and navigate to
    Customization Settings
    Access Profiles
    access_profile_name
    Logout
    .
  3. Customize the settings for advanced customization images.
  4. After you customize settings, click the
    Save
     icon at the top of the Customization tool.
The access policy advanced customization page reflects your changes.

Advanced customization image settings

You set advanced customization images to make images you add through the image browser available to your advanced customization pages.
The
Advanced Customization Images
 properties pages allow you to set advanced customization images from the image browser to associate with advanced customization image names. You can then use the image name to add an image to an advanced customization page.
To select an image from the image browser to associate with an image for advanced customization, click the button next to the current (or default) image name, and select
Replace
.

Personalizing page appearance for access policy pages

Personalize access policy pages to change advanced customization images for the login page in a specific access policy, and to add advanced customization images for other access policy pages.
  1. On the Main tab, click
    Access
    Profiles / Policies
    Customization
    Advanced
    .
    The Customization tool appears in Advanced Customization view, displaying the
    Form Factor: Full/Mobile Browser
     settings in the left pane.
  2. On the Branding tab, click
    Customization Settings
    Access Profiles
    access_profile_name
    Access Policy
    , and select the folder for the item to customize.
  3. Customize the settings for each individual element by clicking the element and changing the displayed settings.
  4. After you customize settings, click the
    Save
     icon at the top of the Customization tool.
The access policy pages reflect your changes.

Customization settings for access policy items

You can personalize the following settings for pages exposed to the user in an access policy.
Setting
Value
Description
General > Front image
Image
The image that appears in the image frame of the login page for an access policy.
Advanced Customization Images
Images
Each Advanced Customization Images properties page allows you to set advanced customization images from the image browser to associate with advanced customization image names. Each access policy item has a page for advanced customization images. You can use these image names to add an image to a page using advanced customization. To select an image from the image browser to associate with an image for advanced customization, click the button next to the current (or default) image name, and select
Replace
.

Localizing messages for BIG-IP Edge Client

Configure localization for BIG-IP Edge Client® to change the messages and text in the BIG-IP Edge Client application.
  1. On the Main tab, click
    Access
    Profiles / Policies
    Customization
    General
    .
    The Customization tool appears in General Customization view, displaying
    Form Factor: Full/Mobile Browser
     settings.
  2. From the
    Form Factor
     list at the top of the Customization tool, select
    BIG-IP Edge Client
    .
  3. To select the BIG-IP Edge Client, in the left pane, expand the folders and navigate to
    Customization Settings
    Connectivity Profiles
    name_of_connectivity_profile
    , and click
    BIG-IP Edge Client
    .
  4. At the top right of the Customization settings pane, select the
    Language
     for which to customize localization messages for the BIG-IP Edge Client.
  5. Customize the settings for BIG-IP Edge Client localization.
  6. After you customize settings, click the
    Save
     icon at the top of the Customization tool.

Previewing customization changes

You must have customized an element with the Customization tool to see a preview of your changes.
After you customize and save an element with the Customization tool, you can preview the changes you have made in the Preview window. The Preview window opens a separate browser window, and shows a live update of changes as you save them.
  1. On the Main tab, click
    Access
    Profiles / Policies
    Customization
    General
    .
    The Customization tool appears in General Customization view, displaying
    Form Factor: Full/Mobile Browser
     settings.
  2. On the menu bar, at right, click the
    Preview
     button.
  3. Navigate to a page to view customizations.
    For example, to navigate to a logon page and view the results of access profile branding customization, in the Preview window expand
    Customization Settings
    Access Profiles
    access_profile_name
    Access Policy
    Logon Pages
    , then click
    logon_page_name
    .
The Preview window shows the results of any customization changes.

Customization settings for BIG-IP Edge Client localization

You can customize the following settings for BIG-IP Edge Client customization with the Customization tool. To see these settings, set
Form Factor
 to
BIG-IP Edge Client
.
Setting
Value
Description
About link
A URL
The text that appears as a link in the about area of the BIG-IP Edge Client.
About text
Text
Text, typically copyright info or some other identifying information, that appears in the about area of the BIG-IP Edge Client.
Application Name
Text
The application name, which appears in the status bar of the application.
Contact Support Contact Support

Have a Question?

Support and Sales >

About F5

Education

F5 Sites

Support Tasks




©2023 F5, Inc. All rights reserved.


Trademarks Policies Privacy California Privacy Do Not Sell My Personal Information