Manual Chapter :
Personalizing Webtop Appearance Settings in
General View
Applies To:
Show Versions
BIG-IP APM
- 14.1.0, 14.0.0
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.
- On the Main tab, click .The Customization tool appears in General Customization view, displayingForm Factor: Full/Mobile Browsersettings.
- In the left pane, expand the folders and navigate to .
- Customize the settings for each individual element by clicking the element and changing the displayed settings.
- After you customize settings, click theSaveicon 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:
|
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
. 
