References → Customize Incorta with CSS

About Cascading Style Sheets (CSS)

Web developers and designers define styles for their websites and web applications using Cascading Style Sheets (CSS). CSS is a human readable format that defines the style of text, objects, and layout variations. Web browsers such as Chrome, Safari, Microsoft Edge, and Mozilla FireFox support various style sheet properties and related property values.

CSS consists of a selector in the Document Object Model (DOM) of a web page and a style declaration. A selector can be an HTML element such as <h1> or an element attribute value such as id="banner" or className="header-nav". A style declaration consists of one or more key-value pairs, the key being a supported property and the value being supported value. A basic example of a key-pair is the following:

Copy
color: red

The key is color. The value is red.

Generally speaking, you can define CSS styles in three ways:

• Inline with an HTML tag element

Copy
<p style="color: red; text-align: center;">

• Internal to the web page within a <style></style> tag element

Copy
<style type="text/css">
p {
  color: red;
  text-align: center;
}
</style>

• External to web page as defined in the href attribute of a <link> tag element

Copy
<link rel="stylesheet" href="/css/custom-new.css">

You can learn more about CSS at https://developer.mozilla.org/en-US/docs/Web/CSS.

About using a custom external style sheet

An external style sheet is a .css file that defines the look and feel for an entire website or web application. All webpages in the website or application reference the .css file within a <link> tag element.

Incorta supports using an external style sheet CSS file with a built-in, predefined reference to custom-new.css.

Within the web application itself, Incorta references the custom-new.css external style sheet file:

Copy
<link rel="stylesheet" href="/css/custom-new.css">

In the custom-new.css file, you can define styles for the following:

• Sign in page background image
• Sign in page form logo
• Navigation bar in the Analytics Service, including:
  • logo
  • background color

You can also add text in the style sheet to appear next to the logo in the Navigation bar of the analytics service.

Deploy a custom external style Sheets

In this release, the custom-new.css file does not exist. A Web Developer familiar with CSS will need to define the styles for custom-new.css file.

A System Administrator with root access to the hosts with Incorta Nodes that run an Analytics Service will need to either create or copy the custom-new.css file. In certain cases, the System Administrator will need to copy any referenced image files (.gif,.jpg, .png, or .svg) to the <INSTALLATION_PATH>/IncortaNode/runtime/webapps/ROOT/css/ directory. A System Administrator will need, in most cases, to be able to Secure Copy (scp) the image files.

In addition, a CMC Administrator must restart all Analytics Services in the Incorta cluster.

Create the custom-new.css files

• For each Incorta Node running an Analytics Service in the Incorta cluster, a System Administrator with root access to the hosts must secure shell in to each host.
• As the incorta user, navigate to the css directory.
  

Copy
sudo su incorta
INSTALLATION_PATH='/home/incorta/IncortaAnalytics/IncortaNode/runtime/webapps/ROOT/css'
cd $INSTALLATION_PATH
vim custom-new.css

* Enter insert mode with the keystroke `i`. * Either copy the contents of an existing file from a Web Developer or add you change directly to the file with vim using the various available [CSS Selectors](#css-selectors). * Enter read-only mode with the keystroke `esc`. * Force, quit, and save your changes with the keystrokes `:wq!`.

CSS Selectors

Selector

Description

.inc-login

Sign in page background image You can customize the image that displays on the sign in page background. You must specify a valid url for the background-image property. If local to the host, you must copy the image file to the following directory: <INCORTA_NODE_INSTALLATION_PATH>/IncortaNode/runtime/webapps/ROOT/css/ Here is an example that will change the Sign in page background image to my_sign_in_page_background_image.svg:

Copy
.inc-login {
   background-image: url("my_sign_in_page_background_image.svg") !important;
   background-repeat: no-repeat;
   background-size: cover;
}

Selector

Description

.inc-login__container-header

Sign in page form logo You can customize the logo that displays on the form on the sign in page, including the background color. You must specify a valid url to the logo file for the background property. If local to the host, you must copy the image file to the following directory: <INCORTA_NODE_INSTALLATION_PATH>/IncortaNode/runtime/webapps/ROOT/css/ Here is an example that will change the Sign in page form logo to my_sign_in_page_form_logo.svg:

Copy
.inc-login__container-header {
  height: 100px;
  background: url(my_sign_in_page_form_logo.svg);
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: red !important;
}

Selector	Description
.header-nav .header-logo	Navigation bar logo You can customize the Navigation bar logo. You must specify a valid url to the logo file for the content property. If local to the host, you must copy the image file to the following directory: <INCORTA_NODE_INSTALLATION_PATH>/IncortaNode/runtime/webapps/ROOT/css/ Here is an example that will change the Navigation bar logo to my_navigation_bar_logo.png:

Copy
.header-nav .header-logo span {
  content: url(my_navigation_bar_logo.png);
}

Selector	Description
header.header-nav	Navigation bar background color You can customize the Navigation bar background color. You must specify a valid color value for the background-color property. Here is an example that will change the Navigation bar background to red:

Copy
header.header-nav {
    background-color: red !important;
}

Selector	Description
.header-nav .header-logo	Navigation bar custom text You can add text to the right of the logo file. You must specify a text value for the content property. Here is an example that will show UAT to the right off the Navigation bar logo:

Copy
.header-nav .header-logo:after {
  content:'UAT' !important;
  padding-top: 15px;
  color: #FFFFF;
}

Restart the Analytics Services in the CMC

Here are the steps to restart the Analytics Services in an Incorta cluster from the Cluster Management Console (CMC).

• As the CMC Administrator, sign in to the CMC.
• In the Navigation bar, select Clusters.
• In the cluster list, select a Cluster name.
• Select the Services tab.
• In the list of services, select a service of the Analytics type.
• In Service details, in the footer, select Restart.
• In the Action menu, select Refresh.
• After the service restarts, in the Summary section, for cluster, select the Cluster name.
• Select the Services tab, and select the next Analytics Service in the cluster to restart.
• Repeat these steps as necessary for all Analytics Services in the cluster.

Additional considerations

As most web browsers will create a cache file for a website's style sheet, you will need to clear your browser cache to see your custom-new.css changes.