Customize and brand Digital Access

The parts of Smart ID Digital Access component that end-users can access can be branded, in order to achieve a corporate look-and-feel. Branding and customization can be performed on different levels, ranging from replacing the logotype in the application portal to customizing the appearance of the entire application access procedure: from the software token used for web authentication, through log in pages, and the portal itself.

Prerequisites

In Digital Access Admin there is a “Browse” button that leads to a file browser with all files that builds up the portal (the access-point/built-in-files/wwwroot/ folder and sub-folders structure). Copy the files that shall be changed to access-point/custom-files/wwwroot/ within the same file structure before branding starts.

Do not change the original files The reason for this is that changes will be lost when upgrading the system.

Files placed in the …/custom-files/wwwroot/wa folder and sub-folders structure override corresponding files in …/built-in-files/wwwroot/wa folder and sub-folders structure.

What parts can be customized?

These parts of Digital Access component can be branded and customized:

What you can do	How to do it	File name
Customize colors and fonts in log in pages.	Edit the style sheet for log in pages.	/wa/css/main.css
Customize texts or buttons in log in pages.	Edit individual template files.	Refer to sections below.
Change the logotype in the portal.	Replace the logotype used.	nexus_logo_desktop.svg etc
Customize colors and fonts in the portal.	Edit the application portal style sheet.	themeroller.css and overrides.css

Step by step instructions

Log in to Digital Access Admin

Log in to Digital Access Admin with an administrator account.

Change branding texts

In the ...branding folder, all texts specific to Digital Access component are collected. These texts can be customized.

In Digital Access Admin, click Browse.
Make sure that all files that should be changed in the access-point/built-in-files/wwwroot/branding directory have been copied to access-point/custom-files/wwwroot/branding.
Modify the appropriate texts in the files described in the table below.
Click Publish to publish the configuration.

Files	Description
authAD.txt	Heading for the Active Directory login page. Appears on every Active Directory template. Note that the other authentication methods are defined by their Display Name and do not need a branding text file.
authselect.txt	Heading for the “Select Authentication Method” page.
authweb.txt	Name of Digital Access component Web when referred in javascript dialogs explaining how to accept the Digital Access component Web ActiveX or java applet.
company.txt	Name of the company. Appears in the application portal.
company_about_url.txt	URL leading to information about the company.
company_contact_url.txt	URL leading to contact information.
copyright.txt	Copyright notice.
portal.txt	Name of the application portal. Appears on the application portal and it’s help page.
product.txt	Name of the product. Appears on the title of each page. *product.txt* also provide the text to HTML `<title>` tag.

Customize text or buttons in log in pages

To customize texts and buttons in individual log in pages, there are template files that must be edited. These template files are located in different folders.

Customizing template files requires adequate HTML proficiency.

In Digital Access Admin, click Browse.
Copy the template files from the folder structure in /access-point/built-in-files/wwwroot/wa to the corresponding folder structure in /custom-files/.
Edit any template file that needs to be changed.
Click Publish to publish the customized file.

These are the template files located in access-point/built-in-files/wwwroot/wa.

File name	Description	User variables
_auto_reauthmessage	Page displayed when the user has to log off and re-authentication is required.
_chooseAuthmech	Page displayed when authentication method is to be selected.	name displayname
_closedown_message	Page displayed when user is timed out from the Access Point.
_deleteLogonCred	Page displayed when password database has been cleared.
_error	Error message displayed to the user.	errmsg
_InternalAuthentication	The Internal Authentication form.	ssodomain ssohost iuid idom
_logoutPage	Page displayed when user has logged off.
_no_session	Page displayed when a session has timed out.
_popup_msg	Page used to display a popup message to the user.	location errmsg
_reauthmessage	Time-out message displayed to user.
_refresh_top	Page displayed when a user needs to refresh the browser.
_securitywarning	Page displayed for security warnings.	errmsg
_TimedoutPage	Page displayed when a user is temporarily locked until a specific time out occurs (currently concerns only SecurID).	auth_timeout
302	Page displayed to redirect the user when a page has moved.	location
302_top	Page displayed to redirect the user when a page has moved.	location
400	Page displayed subsequent to a bad request.
401E	Page displayed subsequent to external authentication failure due to mismatching credentials, if the authentication method on the device is set to Basic authentication.	authmech location
401I	Page displayed subsequent to an internal authentication failure due to mismatching credentials, if the authentication method on the device is set to Basic authentication.
401WIL	Displayed when a user fails to log on using Windows Integrated Login.
403	Page displayed when a client requests a forbidden resource, that is, Access Control denies the resource to be accessed.	eprot ehost uri
404	Page displayed when a requested file on the Access Point does not exist.	eprot ehost file
405	Page displayed when a HTTP-method which is not allowed has been used in a client request.	eprot ehost uri method allow
500	Page displayed when a server error occurs.	errmsg
TestLogonLoginPage	Log in page for TestLogon, that is, when a user requests http://127.0.0.1:19146/ wa/auth?authmech=TestLogon on the local computer where the Access Point is installed.

These are the template files located in access-point/built-in-files/wwwroot/wa/authmech/base.

File Name	Description	User variables
GenericForm.html	Base Template for log in forms used in conjunction with Template Specifications of type “GenericForm”. The template specifications form the appearance of the log page for the authentication method by supplying the content of the user variables.	heading errmsg explanation message nolocalstoreText textText textValue readonlyText readonlyValue passwordText checkboxText checkboxValue tokenText oath-newdevice-link reset-password-lin
Dialog.html	Base template used in conjunction with template specifications of type “Dialog”.	heading errmsg explanation message buttonText
Applet.html	Base template used in conjunction with template specifications of type “Applet”.	heading errmsg buttonText
Json,html
SelfServiceForm.html
SelfServiceFormPIN.html
SelfServiceUserChallenge.html
SigningForm.html

Customize colors and fonts in log in pages

Stylesheets control colors and fonts in log in pages. Use your browser to inspect the log in page and locate where different elements are customized within the stylesheets (css files).

To customize the colors and fonts, use the files in this directory: built-in-files/wwwroot/wa/css.

In Digital Access Admin, click Browse.
Copy the css files from the folder structure in built-in-files/wwwroot/wa/css to the corresponding folder structure in /custom-files/.
Edit the files.
Click Publish to publish the customized file.

Change graphics in log in pages

Name the image nexus_logo_desktop.png (in PNG format). Other naming will require HTML code editing.

In Digital Access Admin, click Browse.
Navigate to the folder access-point/custom-files/wwwroot/wa.
If no img folder exists, enter img next to Create Empty and click Directory to create a new folder called img.
Navigate to the img folder.
Create folder called nex.
Navigate to the nex folder.
Click Choose File and navigate to the folder where the image you will use is located.
Select the applicable image and click Open. The path to the selected image is displayed in the field next to the Choose File button.
Click Upload to place your image in the nex folder.
Create other branded images there with the same names as those in built-in-files/wwwroot/wa/img.
Close the Administration interface browser window.
Click Publish to publish the configuration.

Customize colors and fonts in portal

To customize colors and fonts in the portal, the tool jQuery Mobile Themeroller is used (http://jquerymobile.com/themeroller/).

Click the Import button at the Themeroller top main menu.
In the opened dialogue window paste your previously downloaded themeroller.css (first you need to copy the source code with CTRL+C or cmd+C).
Click the Import button in the dialogue window to upload the code to Themeroller.
Make the changes in colors etc and click Download to save the new theme.
Name the file themeroller.1.4.5.
A .zip file is generated with both themeroller.1.4.5.css and themeroller.1.4.5.min.css.
Only the minified version themeroller.1.4.5.min.css is used by the interface but keep a copy of the changed themeroller.1.4.5.css to use for future changes.
Click Download. Place both files in access-point/custom-files/wwwroot/wa/css.
Edit corresponding Themeroller Swatches to change properties for each section in the interface:

Swatch	Section
data-theme="a"	Background, header bar
data-theme=”b”	Log out button; Resource accordion buttons
data-theme=”c”	Support tab; Settings tab
data-theme=”d”	Tab menu bar
data-theme=”e”	Session popups buttons
data-theme=”f”	Session popups buttons

For design elements which are not part of the jQuery Mobile script, edit /built-in-files/wa/css/overrides.css and place the customized overrides.css file in access-point/custom-files/wwwroot/wa/css.

Replace logotype in portal

Name the logotype nexus_logo_desktop.svg (in SVG format). Other naming will require HTML code editing.

In Digital Access Admin, click Browse.
Navigate to the folder access-point/custom-files/wwwroot/wa.
If no img folder exists, enter img next to Create Empty and click Directory to create a new folder called img.
Navigate to the img folder.
Create folder called nex.
Navigate to the nex folder.
Click Choose File and navigate to the folder where the logotype you will use is located.
Select the applicable image and click Open. The path to the selected image is displayed in the field next to the Choose File button.
Click Upload to place your logotype in the img folder.
Close the Administration interface browser window.
Click Publish to publish the configuration.

Replace variables in template files

When an HTML/WML page is displayed to a user, user variables in the template file are replaced with corresponding content. See the table for more information.

User variables	Description
allow	Comma-separated list of allowed HTTP methods for the current host and URI.
auth_timeout	Number of seconds left of the period of time a user is locked from logging on to the Access Point (used in combination with SecurID log in).
authmech	Authentication method for an authenticated user.
authmech	Variable used in Template Specification that stands for the authentication method.
authtimeout	Number of seconds remaining before an authenticated user will be logged out. Used in the timeout warning page.
do	Variable used in Template Specification that stands for the authentication method.
ehost	External host name, i.e. the HTTP Host in the client request to the Access Point (for example mvpn.thesecurecompany.com). General variable that can be used in all templates.
eprot	External protocol, that is, the protocol between the client and the Access Point: HTTP or HTTPS. General variable that can be used in all templates.
errmsg	Error message from the Access Point.
explanation	Explanatory text in Template Specification.
final_timeout	Number of minutes remaining before the maximum lifetime of the current session is reached and the session will end.
heading	Main heading text in Template Specification.
idom	Variable for internal domain.
ihost	Internal host (alias) currently accessed by the user (not necessarily the same as the HTTP “Host” header in the Access Point request to the internal host).
input-heading	Heading text for an input field in Template Specification.
iprot	Internal protocol currently accessed by the user: HTTP or HTTPS.
iuid	Internal UserID (uid filtered through NameMapper.wascr). General variable that can be used in all templates.
iuri	Internal URI, in requested from Access Point to host.
location	A URI or a URL specifying where to redirect during log in.
maxSessionTimeout	Number of maximum minutes for a user session. The value is specified in the configuration.
message	Message from the Authentication Service.
method	HTTP method in a GET request.
ntdomain	NT domain name.
pin	PIN for authentication.
protocol	URL parameter used for the Access Client describing the protocol to be used by the tunnel: EESSP or SSL.
reauth_uid	User ID used in RADIUS pages.
redirect	URL parameter used for Access Client.
replyMsg	Variable in RADIUS pages.
servernumber	Log in challenge number from the Authentication Service.
title	Variable part of a Template Specification.
tunnelCipherIv	The Base64 encoded cipher IV. Parameter that is dynamically generated by the system.
tunnelCipherKey	The Base64 encoded cipher key. Parameter that is dynamically generated by the system.
upd	The value of the UPD cookie used for session handling in load balanced environment. Dynamically generated by the system.
uid	UserID for an authenticated user. General variable that can be used in all templates.
uri	URI requested from client to Access Point.
waak	Parameter configured in the Administrator. Used in session handling.
warningtimeout	Number of seconds remaining before a warning message or another log in page is displayed to the user.
wasid	The user WASID. Parameter configured in the Administrator, used in session handling.

Image formats

There are several versions of the images in the portal. There is one set of images for desktop (and tablet) and one set for mobile, and there is one version of each image in .PNG (used for low end browsers) and one in .SVG (used for high end browsers). Images are replaced or edited to customize the Digital Access component Web skin, the logotype or icons in the application portal, or graphics used in log in pages. When replacing images, use the same name, format and size as the original. See the table below for examples.

Digital Access component Web skin images down.jpg and up.jpg can be of either JPEG or GIF format. The image mask.gif must however be in GIF format (indexed palette). Also note that all three files must have the same dimension in pixels.

Directory location	File name	Description
…/built-in-files/wwwroot/wa/img/nex	nexus_logo_desktop.png nexus_logo_desktop.svg nexus_logo_mobile.svg	Logotype for the portal
…/built-in-files/wwwroot/wa/authmech/base/WebSkin.zip	mask.gif	The mask for (controls the position of) buttons and labels in Digital Access component Web
…/built-in-files/wwwroot/wa/authmech/base/WebSkin.zip	down.jpg	Digital Access component Web skin without background, with buttons depicted as pressed
…/built-in-files/wwwroot/wa/authmech/base/WebSkin.zip	up.jpg	Digital Access component Web skin with background, with buttons depicted as not pressed