Send Feedback
Skip to content

Custom Logo

This page describes how to replace the default KX Dashboards logo with a custom logo.

Set Up

To set up a KX Dashboards environment with custom styling, create a style.css file in your SVN project repository. This file should follow from the trunk/branch path as follows:

dashboard-theme/theme/***/style.css

Note

Package is installed alongside the native HTML5 KX Dashboards install. On every KX Dashboards release, re-install the logo package.

Style the logo using the following CSS selector:

div#appdiv .quick-base.login-dialog .logo

Background

The CSS background property can be used to replace the logo with a loginTitle.svg image, assuming the image file is a sibling of style.css:

background: transparent url("login_logo.svg") no-repeat 1px 10px;

otherwise:

url("../images/login_logo.svg")

Screenshot

thus:

div#appdiv .quick-base.login-dialog .logo {
 background: transparent url("login_logo.svg") no-repeat 1px 10px;
}

Note

Ensure the replacement logo uses a transparent background and has dimensions which fit within the login dialog; for example, 250 x 50px.

Screenshot

Login Background and Font Color

Changes can also be made to logo and font color using CSS. Use the selector:

div#appdiv .quick-base.login-dialog.ui-front

Color can be changed using hexadecimal color codes. See W3 Schools for reference.

background-color: #00203c;

giving:

div#appdiv .quick-base.login-dialog.ui-front {
   background-color:#00203c;
}

Screenshot

To change User and Password to a gray color matching the logo:

div#appdiv .quick-base.login-dialog.ui-front {
   background-color:#00203c;
   color:#a2a2a2;
}

Login Button

To change the login button style to match font and image:

div#appdiv .quick-base.login-dialog.ui-front button.ui-button {
   background: #012e56;
   color:#a2a2a2;
}

Screenshot

To change the default logo next to the Administrator dropdown menu top-right:

div#appdiv .main-toolbar .logo,
div#appdiv .toolbar .logo {
   background: transparent url("top_logo.svg") no-repeat 3px 2px;
}

Different selectors are used for Editor/Preview and Quickview:

div#appdiv .main-toolbar .logo
div#appdiv .toolbar .logo

Screenshot

In the above example, the "Example logo for KX" image uses a transparent background with a dimension of 195 × 22 px.

The About Dialog

Changes to the About dialog (available from the Administrator dropdown) can be made using:

div#appdiv .quick-base.dashboard-name-prompt > .splash{
    background: transparent url("about_alt.png") no-repeat 3px 2px;
}

Screenshot

The text 4.1.0D1 describes the KX Dashboards version and is not part of the background image.

Changes to the style of this text can be made using:

div#appdiv .quick-base.dashboard-name-prompt > .splash > .version{
    color: #8a8a8a;                                 /* text color */
    font-family: 'Times New Roman', Times, serif;   /* font name used */
    font-size: 2em;                                 /* text size */
}

Screenshot