Virtual Capture Style Guide

Product Guide Overview

The Virtual Capture channel utilizes the Bootstrap Framework which provides institutions advanced styling capabilities to customize an applicant’s experience. This guide provides an overview of the most popular elements that can be styled (such as button color and navigation bar font size) as well as examples.

Less CSS is used to customize the Virtual Capture site. A technical resource with knowledge of HTML and CSS should be responsible for making these changes for a financial institution.

Target Audience

IT Resource: This guide provides an IT resource an overview of how to customize the style of the Virtual Capture website. This guide assumes the reader has knowledge of HTML and CSS.

Getting Started

To dynamically customize the style of the Virtual Capture channel a .less file must be used. The title of the file must be custom.variables.less and it must be saved at the below file location:

DMZ Services\Akcelerant.Origination.Web.DMZ\custom\css

Styling Formula

The format required to update an element of the web application is:

@VariableName: Value;

Component

Description

Indicates the following text as a variable.

VariableName

Indicates the name of the variable being modified such as the company Brand, a Button or a Table.

Value

The value that the variable is being set to.

Adding a space prior to the property value is recommended to increase readability.

;

Indicate the end of the statement by using a semicolon.

For example, to change the primary brand color using a hexademical color, the formula would be @brand-primary: #046010;

Common Customization

This section reviews the most common style customizations that can be made through the custom.variables.less file. In addition to the common customizations in this section, see a list of all the available less variables at http://getbootstrap.com/customize/#less-variables-section.

All less variables in the above link are available to be used in the custom.variables.less file; however, not all of them may be used in Virtual Capture.

Primary Color of Virtual Capture Site

To change the Primary color of the Virtual Capture site the @brand-primary variable is used. For example, changing the Virtual Capture primary color to a shade of green can be accomplished through the below:

@brand-primary: #046010;

Changing the primary brand color makes alterations throughout the entire Virtual Capture site. This changes items such as primary buttons background and the text on primary links that are not currently selected.

Navigation Bar

The navigation bar can be modified by using two variables (nav-link and navbar-inverse) as well as many different attributes. The navbar-inverse variable affects the top Virtual Capture navigation bar and the nav-link variable affects the Product Sub-Category buttons. The most notable attributes are:

Variable and full
-hover-bg @nav-link-hover-bg	Changes toe color when the mouse is hovering over a Product Sub-Category.
-bg @navbar-inverse-link-color	Changes the background color of the top navigation bar.
-color @navbar-inverse-link-color	Changes the font color in the top navigation bar.
-active-color @navbar-inverse-link-active-color	Changes the font color of a navigation bar link after it has been selected.
-hover-color @navbar-inverse-link-hover-color	Changes the font color of the navigation bar links when hovering over them.

Buttons

There are multiple buttons that can be edited throughout the Virtual Capture channel. When a button’s style is modified, the below aspects of the button are affected:

Button Display - How the button appears by default.
On Hover - How the button appears when the mouse is hovering over it.
On Focus - How the button appears while being clicked.
On Active - How the button appears after it has been clicked.
Disabled - How the button appears when it is disabled.

Primary Buttons

Primary buttons are the main button displayed on a screen or panel such as the Apply Now button that displays when selecting a product to apply for.

If the Primary brand color has been changed, the primary buttons also change. That can be overridden by specifying changes to the button itself.

@btn-primary is the variable used to control the primary buttons. Common modifications made to primary buttons are:

Attribute and Full Format	Description
-color @btn-primary-color	Changes the color of the text within primary buttons. The default color of primary buttons is white.
-bg @btn-primary-bg	Changes the background color of the primary buttons. The default background color is the Brand's primary color.
-border @btn-primary-border	Changes the border color of the primary buttons.

Default Buttons

Default buttons are displayed on a screen or panel such as the Save, Previous and Print buttons that display when selecting a product to apply for.

@btn-default is the variable used to control the default buttons. Common modifications made to default buttons are:

Attribute and Full Format	Description
-color @btn-default-color	Changes the color fo the text within default buttons.
-bg @btn-default-bg	Changes the background color of the default buttons.
-border @btn-default-border	Changes the border color of the default buttons.

All buttons can be controlled using the @btn variable. A common alteration made to all buttons is adjusting the font weight @btn-font-weight to define the thickness of characters. The font weight is set through values incremented by hundreds such as 100, 200, 400 and 700. Normal font is considered 400 in weight whereas bold is 700 (@btn-font-weight: 700).

Panels

Panels can be customized to change the look and feel of the Virtual Capture channel. The @panel-default variable modifies all panels throughout Virtual Capture.

There are three default panel attributes that can be changed through the use of the custom.variables.less file.

Attribute and Full Format	Description
-border @panel-default-border	Changes the border color of a panel.
-heading-bg @panel-default-heading-bg	Changes the background color of a panel.
-text @panel-default-text	Changes the color of the text within the panel.

Input Fields

In addition to customizing the text and background within a panel, fields that are used to collect date can be modified as well. Using the @input variable can change the attributes of an input field.

Input fields that are read-only and drop-down lists are also altered when the @input variable is used.

Attribute and Full Format	Description
-border @input-border	Changes the border of the input box.
-bg @input-bg	Changes the background color of an input field.
-bg-disabled @input-bg-disabled	Changes the background color of fields that are disabled such as read-only fields.
-color input-color	Changes the color of the text that is entered into the field.

Simple Grids

Simple grids are panels within screens that use tables to display data such as the Application Listing panel available through the User link in the navigation bar.

Attribute and Full Format	Description
-border-color @table-border-color	Changes the border color of the simple grid.
-header-bg @table-header-bg	Changes the background color of the simple grid's header.
-header-color @table-header-color	Changes the color of the text in the header.

Appendix: Revision History

Version	Date	Description of Change	Release/Update
1.0	06/25/2015	Creation of the Style Guide	15.01.00