Accessing Theme Details

You access the details of a Theme by clicking its Theme Name on the Themes page.

The Details panel for that Theme is displayed, enabling you to view the cascading style sheets (CSS) and other elements which define the Theme.

The Details panel has the following tabs:

CSS: Determines the look and feel of the X‑Platform elements and controls. For details about some of the important classes included in the CSS, refer to CSS Classes, below.
Note
Older Themes that are based on JQuery will also display and use a stylesheet named theme.css. While the X-Designer still supports this stylesheet, it cannot be used for creating or editing new Themes.
Logo: Enables you to upload a Logo for use in the selected Theme.

For details on editing a Theme, click here.

X‑Platform CSS Classes

The following sections describe some of the important classes that are included in the X‑Platform CSS.

.jaa-full-mode-container

This class contains the settings that determine the size of the Web Self Service application window when the application is presented in Full Display mode (not popover mode). In the following example, the application window occupies the entire screen:

.jaa-full-mode-container {
       width:100%;
       height: 100%;
}

.jma-has-breadcrumb

This class contains the settings that control the presentation of the breadcrumbs trail. In addition to the positioning of the trail itself, specific settings determine the look and feel of:

The Home icon (representing the first step of the Flow).
The separator icon.
The dots that are displayed to indicate that the trail is truncated.
The popup that is presented to show hidden breadcrumbs.

Here is how these elements appear in runtime:

.jma-has-breadcrumb .ui-content {
    padding-top: 40px !important;
}
.jma-breadcrumb-container {
    padding-top: 5px;
    padding-bottom: 5px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    top: 45px;
    left: 0;
    overflow-x: auto;
    overflow-y: hidden;
}
.jma-breadcrumb-home {
    background-image: url('./images/home-icon.png');
    width: 20px;
    height: 20px;
    background-size: contain;
    display: inline-block;
    background-repeat: no-repeat;
    margin-left: 3px;
}
.jma-breadcrumb-separator {
    background-image: url('./images/separator.gif');
    width: 20px;
    height: 20px;
    background-size: contain;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
}
.jma-breadcrumb-dots {
    z-index: 1001;
}
.jma-breadcrumb-dots,
.jma-breadcrumb-element {
    display: inline-block;
    height: 20px;
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    -o-transform: translateY(-20%);
    transform: translateY(-20%);
    color: #0E91D6;
    margin-top: 10px;
}
.jma-breadcrumb-popup-element:active,
.jma-breadcrumb-popup-element:hover {
    background-color: #DBEAF9;
}
.jma-breadcrumb-popup {
    background-color: #ECECEC;
    padding: 5px;
    border: 2px solid #ddd;
    box-shadow: -5px -5px 5px #6f6f6f;
    top: 105px;
    left: 15px;
    position: fixed;
}
.jma-breadcrumb-popup-elements {
    max-height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-x: hidden;
}
.jma-breadcrumb-popup:after {
    position: absolute;
    content: "";
    top: -10px;
    left: 40px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ECECEC;
}
.jma-breadcrumb-popup:before {
    position: absolute;
    content: "";
    top: -12px;
    left: 38px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #ddd;
}
.jma-breadcrumb-popup-element {
    color: #0E91D6;
    margin: 5px 10px;
}

Changing Default Contact Us Icons

By default, X‑Platform supplies the icons that appear on the Contact Us page when relevant customer assistance features are enabled (Email, Call and Call Return).

If you want to replace the default icons with your own icons, use the structures presented below.

Web Self Service

For the Web Self Service application, use the following structure in the X‑Platform CSS. This structure is valid for all modern browsers.

.jaa-icon-call {
       background-image: url('/agent-app/images/call-icon.png') !important;
}

.jaa-icon-callback {
       background-image: url('/agent-app/images/callback-icon.png') !important;
}

.jaa-icon-mailto {
       background-image: url('/agent-app/images/email-icon.png') !important;
}

Mobile Web App

For the Mobile Web application, use the following structure in the X‑Platform CSS:

.jma-contactus-email-button {
    background-image :  url('images/email-icon.png') !important;
    background-repeat: no-repeat !important;
}

.jma-contactus-call-button {
    background-image :  url('images/call-icon.png') !important;
    background-repeat: no-repeat !important;
}

.jma-contactus-callback-button {
    background-image :  url('images/callback-icon.png') !important;
    background-repeat: no-repeat !important;
}

Customizing Themes Using the themeUrl Parameter

By default, the Theme used in the Mobile Self Service application is one of the swatches in the jma-theme.css file, located in the client’s installation directory. When required, you can customize the jma-theme.css file using Mobile ThemeRoller, and then place the file in the location of your choice. The themeUrl parameter is then used to point to the location of the modified jma-theme.css file. If this parameter is not passed, the jma-theme.css file provided with the client installation is used.

Note: When modifying the jma-theme.css file, do not change the name of the file. When changing the location of the file, make sure to copy the images folder from the original client’s location to the new location of the css file.

In the following examples, the f swatch from a jma-theme.css file located in the http://MyThemeServer:8080/myThemeFolder URL is used. Note that the name of the css file is omitted, since it is assumed that the file name will be jma-theme.css.

Direct Flow Link Example

http://10.90.18.72:8080/selfService?interaction=1374387336331-6601d54db1bd76faac36 f277
c9213ffe4358e1-20d4
&appkey=524bd189f7a42c49c5dd601a&accountId=12345678&theme=f&
themeUrl=http://MyThemeServer:8080/myThemeFolder">

Flow List Link Example

http://10.90.18.72:8080/selfService/coverApp/index.html?appkey=524bd189f7a42c49 c5dd601a
&accountId=12345678&theme=f&themeUrl=http://MyThemeServer:8080
/myThemeFolder

In this section:

Uniphore Customer Portal