With advanced customization, it is possible to change almost anything with a certain knowledge
of HTML, CSS, and JavaScript. UI templates, which consist of HTML and PHP files, and CSS files,
are available for edit directly from the Advanced Customization view.
About customization variables
Customization variables are special symbols, such as %[
variable_name
], in a
UI template. A customization variable is a placeholder for actual customization and localization
values. When a UI page is generated from a UI template, customization variables are replaced with
actual values.
Customization uses the same UI templates for all languages. Therefore,
we recommend that when you customize UI templates, you reuse customization variables for localized
texts. Otherwise, you risk creating localization conflicts.
About PHP code
Customization uses PHP code inside UI templates.
F5 recommends that when you customize UI templates, you do not delete or
modify PHP code.
About CSS code
In the hierarchy of the advanced customization user interface, all CSS code is located under
Access Profile
Common
. The folder contains various versions of the Access Policy Manager (APM®) CSS code with names such as
apm_mobile.css
and
apm_full.css
. When displaying
generated UI pages, APM picks the correct
.css
file for the client (mobile
browser, full browser, BIG-IPEdge Client®).
If you create a UI template that partially or completely replaces the default structure
provided by F5, F5 recommends that you do not change existing CSS definitions but add your own with different
names (IDs). Otherwise, you run the risk that other non-customized pages will be misrendered.
To replace a main table with your div, on the logon page for example, replace
<table id="main_table" class="logon_page">
with your
<table
id="cust-main" class="cust-logn-page">
.
Coding recommendations
With advanced customization, you can partially or completely replace the default structure for
pages. To avoid unexpected problems however, follow these recommendations when editing
.css
and
.inc
files.
.css file
Do not change existing CSS definitions but add your own with different names (IDs).
Otherwise, you run the risk that other non-customized pages will be misrendered.
In your new code, reuse existing customization variables
(%[
variable_name
]) rather than creating new ones; doing so prevents
localization conflicts.
Do not change PHP code.
.inc file
In most cases, you can safely replace the code in .inc files.
Updating a .css file with additional code to customize a logon page table
The first line of the code for the existing logon page table is:
<table
id="main_table" class="logon_page">
. Retain that code and add code for a div or a table
that you want to use instead. For example, the code for a new table might start like this:
<table id="cust-main" class="cust-logn-page">
.
Access profile common .css and .inc files
You can customize the following files for access profiles in the Advanced
Customization view.
Name
Description
apm_full.css
File that contains all CSS for desktop browsers; also contains this PHP:
apmCssCustomizationReg
- array with variables that come from
general customization data.
parsedVersionMajor
and
parsedVersionMinor
-
versions of Mozilla, used to fix specific issues with CSS .
apm_mobile.css
File that contains all CSS for mobile browsers. If you want mobile pages to look
exactly the same as full browser pages, you can replace the contents of apm_mobile.css
contents with the contents of apm_full.css.
footer.inc
The include file that specifies the footer text line.
apm_edge.css
File contains all CSS for BIG-IP
Edge Client® pages.
F5 recommends that you do not edit this file.
javascript_disabled.inc
File that is included with every page and displayed only when the browser does
not support JavaScript.
header.inc
File that specifies the page header content for access profile pages on all
devices. The file includes this PHP:
viewport_data
– contents of meta name
id="viewport"
.
label_position
– position of labels against corresponding input
fields (see general customization Access Profile/Common/Layout Settings)
page_layout
– position of input cell (see Access
Profile/Common/Layout Settings)
page_image_default
– default image cell image (see Access
Profile/Common)
header_logo
– corporate logo
The file includes JavaScript:
setViewport()
– function that
changes scale basing on orientation.
apm_mobile_ppc.css
Styles for old Windows mobile device.
Access profile logout .inc files
You can customize the following files for access profiles in the Advanced
Customization view.
Name
Description
my.acl.inc
ACL denied page if user tries to access prohibited URL.
urlfilter_blocked.inc
Secure Web Gateway (SWG) access denied page if user tries to access prohibited URL.
access_notfound.inc
The HTML, JavaScript, and PHP code that presents a page when access is not
granted.
logout.inc
Default logout page.
Access profile logon .inc files
You can customize the following files for access profiles in the Advanced
Customization view.
Name
Description
logon.inc
Customization of logon page.
http_401.inc
Customization of HTTP 401 error (unauthorized) page.
view.inc
Customization of VMware View logon page.
Access profile decision box .inc files
You can customize the following files for access profiles in the Advanced
Customization view.
Name
Description
decision_box.inc
Specifies the layout for the HTML that appears in a decision box.
Access profile message box .inc files
You can customize the following files for access profiles in the Advanced
Customization view.
Name
Description
message_box.inc
Specifies the layout for the HTML that appears in a message box.
Access profile ending page .inc files
You can customize the following files for access profiles in the Advanced
Customization view.
Name
Description
my.acl.inc
ACL denied page if user tries to access prohibited URL.
urlfilter_blocked.inc
Secure Web Gateway (SWG) access denied page if user tries to access prohibited URL.
access_notfound.inc
The HTML, JavaScript, and PHP code that presents a page when access is not
granted.
logout.inc
Default logout page.
Webtop .css and .inc files
You can customize the following files for webtops in the Advanced Customization
view.
Name
Description
hometab.inc
Not applicable; file pop up.
webtop_popup.css
Pop up file CSS.
webtop_help.inc
Help file for webtop.
desktopClass.js.inc
Main JavaScript file for webtop.
About advanced customization images
In the General Customization view, each access profile, access profile page, and webtop
includes an Advanced Customization Images setting. The setting provides storage for up to ten
images that are then available for use in the Advanced Customization view. An image specified in
the setting is managed with the parent object; it is exported, imported, copied, or deleted along
with the parent object. It persists with the parent object through backup and upgrade procedures.
An image is specified as a name-value pair.
Name
Images names (image00 through image09) are fixed; they are only placeholders. An image name,
for example image00, does not correspond to a location on a page or to an image that is already
used in the UI. The numerals, 00, do not indicate order or precedence. The image name can used
as a variable in the code for a parent object in the Advanced Customization view. This code
specifies image00 as a variable:
<img
src="%[
image00
]"/>
.
Value
Image values provide file paths and the file names for image files. To use the image, the
value can be copied from the setting in the General Customization view into the code in the
Advanced Customization view. A default value
/public/images/my/tr.gif
indicates that a customized image has not been specified.
Advanced Customization Images settings for some customization objects
About best practices for advanced customization images
You can think of the Advanced Customization Images settings as libraries of images. Each
library has a scope: the object that manages the library can always use images from it; sometimes
child objects can also use images from the library of a parent object. Advanced Customization
Images settings offer a lot of flexibility. When deciding where to store images, consider how
much flexibility you need and whether using images from a parent object library provides adequate
control.
Access Profile Advanced Customization Images
If you store images in the Advanced Customization Images setting for an access profile, you
can use the images not only in the access profile code but also in the code for access policy
pages. The advantage of this approach is that if you need to update images, you only need to
change them in one setting. However, if you want to ensure that images on an access policy page
remain the same regardless of changes to images in the access profile Advanced Customization
Images setting, this might not be the approach you want to use.
Access Policy pages Advanced Customization Images
If you store images in the Advanced Customization Images setting for an access policy page,
you can use the images in the code for that page only. You can store the same images that are
stored at the access profile level, different images, a mix of both, or no images.
Webtop Advanced Customization Images
If you store images in the Advanced Customization Images for a webtop, you can use the
images in the code for that webtop only. However, general customization provides many settings
in which to specify icons; it might be simpler to use it.
Example: Adding an image to an access policy page
In this example, a custom image is stored in the Advanced Customization Images settings for one
of the access policy pages, a message box page. In the Advanced Customization view, the code for
the message box page is updated to add a custom image to the right side of the page.
Sample custom image
Default message page
Customized message page with image
This example includes tasks to complete in the General Customization view before
you update the code and code changes to make in the Advanced Customization view.
Uploading images for use in customization
You can add images for Access Policy Manager customization
with the image browser. You can then select and use these images by means of settings
within the Customization tool.
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.
On the menu bar, click
Image Browser
.
The image browser opens in a new screen.
Select the image filter method from the
Filter Messages
list.
Select
Default Images
to view the included default Access
Policy Manager images.
Select
User Uploaded Images
to view the custom uploaded images.
Add and remove images.
To add an image, click
Add Image
, select the image, and
click
Open
.
To remove an image, select the image in the image browser, and click
Delete Image
.
Storing images for advanced customization of a specific page
This example explains how to store a custom image for use in the advanced
customization of an access policy message page. To follow this example, you need an
access profile with an access policy that contains a Message Box action item.
Specify an image in the
Advanced Customization Images
setting for an object so that the image can be used in advanced customization of the
object.
From the General Customization view, expand the
Access
Profiles
folder.
Folders for each access profile display.
Expand the folder for an access profile.
Expand these folders
Access Policy
Message Pages
Message Box
.
Message Box is the default name for a message box item. You might see a
different name, or names if the access policy includes multiple message
boxes; expand one of them.
Settings for the message box access policy item display.
Click the
Advanced Customization Images
setting.
Image names and values display in the right pane.
Click the value for one of the images.
If not already updated for use in advanced customization, the value is
/public/images/my/tr.gif
.
A pulldown menu icon displays.
Click the pulldown menu icon and click
Replace
.
A popup screen displays images.
To choose an image, click it; then click
Change
.
The popup screen closes. A new value displays for the image.
Press Enter to finalize the change, and click
Save
.
Make a note of the image name; you need it when you perform advanced
customization.
You can use the image name as a variable in advanced customization of the
parent object only. A message box page is the parent object in this example.
The image is now available for use in advanced customization of the message box
item.
Updating message box code with a custom image
You need to have the value of the name of image available from the Advanced
Customization Images setting for the particular message box that you want to update.
You remove and replace the code that specifies the image to display so that a
customized image displays instead.
From the
View
list, select
Advanced
Customization
.
The advanced customization (tree) view displays.
Navigate to the message box item to be customized.
Expand the
Access Profiles
folder and expand the
folder for the access profile you want to customize.
Expand these folders
Access Policy
Message Pages
Message Box
.
Message Box is the default name for a message box item. You might
see a different name, or names if the access policy includes
multiple message boxes; expand one of them.
Settings for the message box access policy item
display.
Click
message_box.inc
.
Code displays in the Advanced Customization Editor.
Code that checks the page layout and specifies the image cell is
removed.
Before the last table row close tag (
</tr>
), insert this
line of code, replacing
nn
with the image number.
<td id="main_table_image_cell"><img src="%[image
nn
]"/></td>
In the Advanced Customization Editor area, click
Save
Draft
.
In the navigation tree,
message_box.inc
now
displays in italics.
On the menu bar, click
Save
.
In the navigation tree,
message_box.inc
is no
longer italicized. In the screen header, the
Apply Access
Policy
link displays.
In the screen header, click the
Apply Access Policy
link.
A screen displays the access profile list with the access profile you
have been editing selected.
Click the
Apply Access Policy
button.
You can now verify the result of this customization from a browser by trying to
access a virtual server in which this access profile is specified.
Example: Adding an image to a profile and a page
In this example, a custom image is stored in the Advanced Customization Images settings for an
access profile. Then, the value of the image is used in advanced customization of the access
profile page header. The header displays on all access policy pages, including the logon page.
Then, the value of the image is used in additional advanced customization of the access policy
logon page.
Sample custom image
Uploading images for use in customization
You can add images for Access Policy Manager customization
with the image browser. You can then select and use these images by means of settings
within the Customization tool.
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.
On the menu bar, click
Image Browser
.
The image browser opens in a new screen.
Select the image filter method from the
Filter Messages
list.
Select
Default Images
to view the included default Access
Policy Manager images.
Select
User Uploaded Images
to view the custom uploaded images.
Add and remove images.
To add an image, click
Add Image
, select the image, and
click
Open
.
To remove an image, select the image in the image browser, and click
Delete Image
.
Storing images
for advanced customization of policy pages
To follow this example, you need an
access profile with an access policy that contains a Logon Page action
item.
Specify an image in the
Advanced Customization
Images
setting for an access profile to use the image in
advanced customization of the access profile and any access policy
pages.
An image stored in the
Common
settings for an access profile can be used in the advanced
customization of any access policy page provided that you use the
image value instead of the image name to specify the
src
attribute for
the image.
From the General Customization view, expand the
Access
Profiles
folder.
Folders for each access profile display.
Expand the folder for an access profile.
Expand the
Common
folder.
A list of
settings displays.
Press Enter to finalize the change, and click
Save
.
Click the
Advanced Customization Images
setting.
Image names and values display in the right pane.
Click the value for one of the images.
If not already updated for use in advanced customization, the value is
/public/images/my/tr.gif
.
A pulldown menu icon displays.
Click the pulldown menu icon and click
Replace
.
A popup screen displays images.
To choose an image, click it; then click
Change
.
The popup screen closes. A new value displays for the image.
Press Enter to finalize the change, and click
Save
.
Click the value for the image
again; copy the value in the field and paste it into a text
file.
The value should be
something like this:
/public/images/customization/Common/
ProfileName
_general_ui/image
00_en
.png
. You need to know
the value when you perform advanced customization.
The image is now available for use in
advanced customization of the message box item.
Adding an image in the page header code
In this example, an image is added to the access profile page header. Make sure that
the value of the image is available exactly as specified in the
Advanced
Customization Images
setting for the particular access profile that you
want to update.
Add code to specify an image to display in the page header.
From the
View
list, select
Advanced
Customization
.
The advanced customization view displays.
In the navigation tree, expand the
Access Profiles
folder and expand the folder
for the access profile you want to customize.
Expand the
Common
folder.
Click
header.inc
.
Code displays in the Advanced Customization Editor area of the screen.
is no
longer italicized. In the screen header, the
Apply Access
Policy
link displays.
In the screen header, click the
Apply Access Policy
link.
A screen displays the access profile list with the access profile you
have been editing selected.
Click the
Apply Access Policy
button.
To verify the result, in the General or Advanced Customization view, click
Preview and navigate to and click any access policy page.
Logon page with customized page header
Adding an image in the logon page code
This example shows one way to change the image that is displayed on a logon page.
Have the value of the image available exactly as it is specified in the
Advanced Customization Images
setting for the parent access
profile.
Add code to specify an image to display after the logon page.
From the
View
list, select
Advanced
Customization
.
The advanced customization view displays.
Navigate to the logon page item to be customized.
Expand the
Access Profiles
folder and expand the
folder for the access profile you want to customize.
Expand these folders
Access Policy
Logon Pages
Logon Page
.
Logon Page is the default name for a logon page item. You might
see a different name, or names if the access policy includes
multiple logon pages; expand one of them.
Settings for the logon page access policy item
display.
Click
logon.inc
.
Code displays in the Advanced Customization Editor area of the screen.