Manual Chapter : Personalizing Webtop Appearance Settings in General View

Applies To:

Show Versions Show Versions

BIG-IP APM

  • 15.0.1, 15.0.0
Manual Chapter

Personalizing Webtop Appearance Settings in General View

What is webtop appearance personalization?

You can customize the appearance of a webtop, including the layout of the webtop screen, images, and colors associated with the webtop.

Personalizing page appearance for webtops

Personalize webtop appearance settings to change the appearance and layout of specific webtops.
  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. In the left pane, expand the folders and navigate to
    Customization Settings
    Webtops
    webtop_name
    .
  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 webtop pages display your changes.

Webtop network connectivity status icons settings

You can customize the following icons for connectivity status on the webtop.
Name
Value
Description
Connected icon
16x16px image
Specifies the image for the connected status light on the webtop.
Disconnected icon
16x16px image
Specifies the image for the disconnected status light on the webtop.
Waiting icon
32x32px image
Specifies the image that displays while the client is connecting.

CSS sprite image setting

You can specify the portal access connection CSS sprites image with this setting.
Name
Value
Description
CSS Sprites image
An image file
Specifies the image to use for sprites to construct the webtop windows.

Web Applications Session Timeout settings

Portal access timeouts cause special behavior on the portal access webtop screen. When the session reaches the session timeout guard time, BIG-IP®Access Policy Manager displays a session timeout warning, and dims the screen behind the warning. Depending on the type of timeout, the user sees different choices. You can use the following options to customize and configure session timeout options.
Name
Value
Description
'Inactivity Timeout' 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.
Specifies the color of the background that appears behind the session timeout warning pop-up screen, when the timeout occurs because the session is inactive.
'Maximum Session Timeout' 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.
Specifies the color of the background that appears behind the session timeout warning pop-up screen, when the timeout occurs because the session has reached the maximum timeout.
Dialog 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 page background color for the timeout dialog box presented by session inactivity timeouts or maximum session timeouts.
Dialog x-size in pixels
Number (px)
Specifies the width, in pixels, of the timeout dialog.
Dialog y-size in pixels
Number (px)
Specifies the height, in pixels, of the timeout dialog.
Dimmed opacity percentage
Number (1-100)
Specifies the opacity of the background that appears behind the session timeout warning pop-up screen.
Guard time
Number (seconds)
Specifies the number of seconds before timeout that the session timeout warning pop-up screen appears.
Position of buttons Background image (hover) in CSS Sprites image
Coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the button background image that appears when the mouse hover.
Position of buttons Background image in CSS Sprites image
Coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the button background image.
Position of header Background image in CSS Sprites image
Coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the background hover image.
Position of Left Sidepart image (hover) in CSS Sprites image
Coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the left-side mouse hover image.
Position of Left Sidepart image in CSS Sprites image
Coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the left-side image.
Position of Logout image in CSS Sprites image
Coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the logout image.
Position of Right Sidepart image (hover) in CSS Sprites image
Coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the right-side hover image.
Position of Right Sidepart image in CSS Sprites image
Coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the right-side image.
Position of Warning image in CSS Sprites image
Coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the warning image.

Web Applications Hometab settings

Portal access connections include an optional hometab, which provides buttons and links for working with portal access and a URL bar. You can customize and configure the hometab with the following options.
Name
Value
Description
Data entry 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.
Specifies the color of the background that appears behind the data entry fields on the hometab.
Data entry left and right border 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.
Specifies the color of the borders for the data entry area.
Data entry text 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.
Specifies the text color for data entry fields.
Font size (px)
pixel value (for example,
14px
)
Specifies the font size on the hometab.
Link 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.
Specifies the link text color on the hometab.
Link color (hover)
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.
Specifies the color for links when the mouse hovers over them.
Position of Background image (hover) in CSS Sprites image
coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the background image that appears when the mouse hovers.
Position of Background image in CSS Sprites image
coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the background image.
Position of divider image in CSS Sprites image
coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the divider image.
Position of home image in CSS Sprites image
coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the Home image.
Position of Left Sidepart image in CSS Sprites image
coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the left side image.
Position of Logout image in CSS Sprites image
coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the logout image.
Position of Open-In-New-Window image (hover) in CSS Sprites image
coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the "open in new window" image, when the mouse hovers over it.
Position of Open-In-New-Window image in CSS Sprites image
coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the "open in new window" image.
Position of Reduced toolbar image (hover) in CSS Sprites image
coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the minimized toolbar image, when the mouse hovers over it.
Position of Reduced toolbar image in CSS Sprites image
coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the minimized toolbar image.
Position of Right Sidepart image in CSS Sprites image
coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the right side image.
Position of Shrink image (hover) in CSS Sprites image
coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the shrink image, when the mouse hovers over it.
Position of Shrink image in CSS Sprites image
coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the shrink image.
Position of Transparent background image in CSS Sprites image
coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the warning image.
Position of Transparent sidepart image in CSS Sprites image
coordinates in px (-left, -top)
Specifies the offset from the left and top margin of the CSS Sprites image for the transparent side image.
Set of elements to be displayed
comma-separated list
This is a comma-separated list of all the elements displayed on the hometab. The hometab is arranged in the order in which you specify these elements. Elements can be used more than once. The default specification is
shrink,divider,home,url,logout
.
You can specify the following elements for the home tab:
shrink
Specifies the hometab shrink element.
divider
Specifies a hometab field separator element.
url
Specifies the hometab URL box element.
home
Specifies the home link and text element.
logout
Specifies the logout link and image element.

Full webtop settings

You can configure the appearance of the full webtop with these settings.
Name
Value
Description
Header message icon
Image
Specifies the image for the header message icon on the full webtop. To change the image, click the image popout button at the right of the field, then click
Replace
. Select an image file to replace the image file. Note that you can add files to the Customization tool in the image browser.
Help window logo
Image
Specifies the image that a webtop user can click to open the webtop online help. To change the image, click the image popout button at the right of the field, then click
Replace
. Select an image file to replace the image file. Note that you can add files to the Customization tool in the image browser.
Toolbar - go icon
Image
Specifies the image that a user clicks to go to a site from the webtop toolbar. To change the image, click the image popout button at the right of the field, then click
Replace
. Select an image file to replace the image file. Note that you can add files to the Customization tool in the image browser.
Toolbar - help icon
Image
Specifies the image that a user clicks to open the help from the webtop toolbar. To change the image, click the image popout button at the right of the field, then click
Replace
. Select an image file to replace the image file. Note that you can add files to the Customization tool in the image browser.

Full webtop popup window setting

You can add the company logo to the full webtop with this setting.
Name
Value
Description
Company logo
Image
Specifies the image for the company logo on the full webtop. To change the image, click the image popout button at the right of the field, then click
Replace
. Select an image file to replace the image file. Note that you can add files to the Customization tool in the image browser.
Show Statistics Table
on
or
off
Specifies whether to display make a table with connection statistics available for display on the full webtop.
Tray Icon Set
null
,
F5
, or
Generic
Specifies the icon to display in the tray.

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
.