With advanced customization, it is possible to change almost anything if you
are familiar with HTML, CSS, and JavaScript. UI templates, consisting of HTML and PHP files, and
CSS files are all available for edit directly from the Advanced Customization view. The available
advanced customization files differ depending on whether the policy was created with the
Customization Type
set to
Modern
and
Standard
.
About advanced customization for modern policies
Advanced customization for access profiles and per-request policies created
with the
Customization Type
of
Modern
consists of
scripts and styles loaded from several sources. Customers may add external scripts and styles,
and they can be specified in the General Customization view Common section. All pages use the
four files: two user-common.js and user-common.css from Advanced Customization of Common and two
user-pagetype.js and user-pagetype.css. External scripts and user-common.js, user-common.css are
loaded for every page (with few exceptions) and user-page.js, user-page.css are unique for every
page.
The following figure shows how advanced customization uses the external files and scripts you
provide along with files that affect all pages and specific pages.
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">
.
Customization files for policies and webtops
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
and per request policies in the Advanced Customization view. The files differ depending on
whether the policy was created with the
Customization Type
set to
Modern
or
Standard
.
Modern
Name
Description
user-common.css
Per Profile/Customization Group set file intended for UI
total conversions and common additions that sets the style for all pages.
user-common.js
Per Profile/Customization Group set file intended for UI
total conversions and common additions. It is a JavaScript file that executes
JavaScript for all pages.
Standard
Name
Description
footer.inc
The include file that specifies the footer text
line.
apm_mobile_ppc.css
Styles for old Windows mobile device.
apm_edge.css
File contains all CSS for BIG-IP Edge Client® pages.
F5 recommends
that you do not edit this file.
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.
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.
Access profile Logout .inc files
You can customize the following Logout files for access
profiles and per request policies 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
and per request policies 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
and per request policies 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 file for access profiles
and per request policies 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 Deny page .inc files
You can customize the following files for access profiles
and per request policies in the Advanced Customization view. They are the same as for
Logout.
Standard
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.
desktopClass.js.inc
Main JavaScript file for webtop.
webtop_popup.css
Pop-up file CSS.
webtop_help.inc
Help file for webtop.
sna_container_ui.js.inc
UI for Standalone Network Access container.
sapptun.js.inc
Messages in a separate file for cases such as application
tunnel failed to start, being blocked, installation screen, and start not
supported.
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 - Standard policy
Customized message page with image - Standard policy
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.