Changing the look and feel of the Elvis 5 Basic Web Client

Important: The Basic Web client has been deprecated since Elvis 5.9 and superseded by the Brand portal. Users of the Basic Web client in Elvis 5.9 to 5.14 are advised to use the Brand portal in favor of the Basic Web client. From Elvis 5.15, the Basic Web client has been disabled and fully replaced by the Pro client and the Brand portal. The functionality that is available in these two applications fully replaces that of the Basic Web client. Please note that due to various security issues that exist within the Basic Web client, we recommend to no longer use it. Should you decide to still want to use the Basic Web client in Elvis 5.15 or higher, it can be enabled by setting the following option to true in the cluster-config.properties.txt file: basicWebClient.enabled=true

The Basic Web Client offers the possibility to change the look and feel to match your organization. You can do this by using plug-ins. The skinning plug-in has a few configuration options explained in this article.

To do the skinning, you should have some basic knowledge of CSS and HTML.

Plug-in structure

A skin plug-in configuration consists of two parts, configuring the settings and applying some CSS styles.

A plug-in folder for a skin has the following files and structure:

> plug-in_folder

> styles.css

> webaccess.config.xml

> index.html

The settings can be found in webaccess.config.xml. The CSS filename is styles.css. There's usually also an index.html that contains a short description of the plug-in, users will not see the contents of this file.

We have set up a sample plug-in folder that you can use as base for your skin plug-in:

blank_skinning_plug-in.zip

Settings

To describe the skin plug-in, the configuration file should contain the element skin, it provides two configuration options related to skinning. These options determine when the skin should be applied. There are two examples below.

A skinning plug-in marked as default:

<webaccess public="true">
    <skin default="true"/>
</webaccess>

A skinning plug-in applied to described domains (you can set one domain or a several domains, comma separated). This way you can use multiple skins on one Elvis server. This is useful when several of your customers are accessing the same server but you wont to provide each one of them with their own look and feel.

<webaccess public="true">
    <skin domains="cosmos.mydomain.com, another.mydomain.com"/>
</webaccess>

In most situations only one domain is linked to the Elvis server, so the first example is preferred.

CSS

Before writing any styles you should know the HTML structure of the web client. The web client is build up from a set of components. Each component has their own HTML container and an appropriate CSS style.

The plug-in styles will override the default ones. Below is a list of the web client's components:

• login page
• login form

• landing page
• landing search form

• results page
• top bar
• folder browser
• filter bar (kinds, tags)
• results container (assets)

• detail page
• detail asset box
• asset information box

You should keep one rule in mind while styling components to make sure the basic client does not "break". Apply styles for the needed selector only, avoiding styling for global selectors to prevent any unexpected situations.

The web client uses SVG images, but for better compatibility it also uses PNG or JPG images as fallback. In our examples you'll find how to apply an image for a selector.

Examples

We have illustrated the possibilities of CSS skinning with a sample plug-in. The following examples are all from this skinning sample plug-in. To test the plug-in, just unzip the archive into your "plug-in/active" directory and restart the server:

cosmos_skinning_plug-in.zip

Lets change the background of the login page:

.page-box.login {
    /* login page */
    background: #03000d url("img/login-bg.jpg") no-repeat center center;
}

As you can see images should be put in separate folder to keep your plug-in organized (we used img, but you can use whatever name you want).

Now let's make changes to the login form.

The selector .login-widget corresponds to main container of the login component. As you can see, the container has only styles that provide the position of the component:

.login-widget {
    /* login widget */
}

Then .login-widget .login-form-box corresponds to the login form. This container has background, color and other visual styles, so this is a good place to override some CSS rules:

.login-widget .login-form-box {
    /* login form */
    background-color: rgba(142, 20, 193, 0.2);
    -webkit-box-shadow: 0 0 5px #8e14c1;
    -moz-box-shadow: 0 0 5px #8e14c1;
    box-shadow: 0 0 5px #8e14c1;
}

.svg .login-widget .login-form-box .input-box .text.i-user .dijitInputContainer::after {
    /* svg icon */
    background-image: url("img/icon-user.svg");
}

.svg .login-widget .login-form-box .input-box .text.i-lock .dijitInputContainer::after {
    /* svg icon */
    background-image: url("img/icon-lock.svg");
}

As you can see, the above example also changes two icons, but since most part of browsers support SVG images we've changed only that ones. The different in the selector is that .svg is applied at the beginning of the selector. Remove that to also modify the fallback images.

Selectors

You can find all available selectors in the blank plug-in sample file.

Document history

• 6 October 2016: Added statement that the Basic Web client has been disabled since Elvis 5.15.