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 class="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.
• Enter read-only mode with the keystroke esc.
• Force, quit, and save your changes with the keystrokes :wq!.

CSS Selectors

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

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;
}

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

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

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.