Manual Chapter : Personalizing Webtop Appearance Settings in Advanced View

Applies To:

Show Versions Show Versions

BIG-IP APM

  • 11.5.10, 11.5.9, 11.5.8, 11.5.7, 11.5.6, 11.5.5, 11.5.4, 11.5.3, 11.5.2, 11.5.1
Manual Chapter

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 Policy > Customization. The Customization tool appears, in Basic Customization view.
  2. From the View list, select Advanced Customization. The Customization tool switches to Advanced (tree) view.
  3. In Advanced Customization view, from the Form Factor menu at the top of the Customization tool, select Full/Mobile Browser.
  4. Under Form Factor: Full/Mobile Browser select the Branding tab.
  5. Expand the folders in the Customization tool to customize settings.
  6. Navigate to Customization Settings > Webtops > webtop_name.
  7. Customize the settings for each individual element by clicking on the element and changing the displayed settings.
  8. 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-IPAccess 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.

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.