Prerequisite: You must be familiar with the Syntax used in Tutorials and have already created an extension.

On top on the existing default themes, it is possible to:

• change a few colors to align it to your company color codes.
• or if you have CSS skills, create you own theme to change radically the look of your iTop console,

As usual with customizing iTop, it requires an extension, containing XML and maybe CSS files as well.

itop_design

  <branding>
    <themes>
      <theme id="fullmoon">
        <variables>
          <variable id="ibo-hyperlink-color" _delta="define">purple</variable>
        </variables>
      </theme>
    </themes>
  </branding>

• All the iTop 3.0 variables are defined in mutiple files under <iTop>/css/backoffice/*
  • ibo- means that's it is a new stuff (variable or class), ibo stands for Itop BackOffice therefore they are not available in the end-user portal
  • ibo-vendor- means that it's a variable used within vendor (third-party lib.) provided SCSS rules
  • ibo-input-text--padding-x is a variable you will find under <iTop>/css/backoffice/input/_input-text.scss

Create an XML entry for each variable you want to change, with its new value.

• You can set any numbers of variables.
• If you define a variable id which does not correspond to any variables in any scss files, it will be ignored.
• The variable value can be:
  • another variable like $ibo-color-transparent, $ibo-body-text-color, … - The variable must be defined above
  • colors :
    • color name: purple
    • hex color code: #F6F6F6
    • RGB: rgb(123, 123, 132)
    • RGBA: rgba(123, 123,123, 0.5)
    • HSL: hsl(123, 50%, 50%)
    • HSLA: hsla(123, 50%, 50%, 0.23)
  • text
  • number, eg. box-radius: 0
  • a scss function: hue-rotate(-139deg) or lighten($brand-primary, 15%)
  • …

You can also define them through a SCSS file containing a list of variables, since iTop 3.0 you need to add xsi:type=“variable” in such case to redefine a variable using another existing variable.

itop_design | branding | themes

<theme id="light-grey">
   <imports>
      <import id="my-css-variables" xsi:type="variable" _delta="define">my-module/css/my-css-variables.scss</import>
   </imports>
</theme>

my-css-variables.scss

$ibo-body-text-color: #000000;
$ibo-body-background-color: $ibo-color-white-200;

You can define your own stylesheets files and your own scss file within your module and specify them in the theme. These files can contain mixins and helpers or style definition an we recommend importing them as follow.
Assuming your SCSS files are located in the extension under <my-module>/css/ then the path to set in the XML is:

itop_design | branding | themes

<theme id="fullmoon">
   <imports>
      <import id="my-helpers" xsi:type="utility" _delta="define">my-module/css/my-helpers.scss</import>
   </imports>
   <stylesheets>
      <stylesheet id="my-style" _delta="define">my-module/css/my-style.scss</stylesheet>
   </stylesheets>
</theme>

With Datamodel 3.0, you can Highlight enum values, independently of any themes

Create in XML a new theme for example old-school which modify scss variables and add new css rules. For this you will have to write scss files within an iTop extension.

• You must separate the rules from the variables redefinition in different source files.
• For variables you can redefine them either in a file under the import tag or directly under a variable tag

itop_design

  <branding>
    <themes>
      <theme id="old-school" _delta="define">
        <variables>
        </variables>
        <imports>
          <import id="old-school-scss-variables" xsi:type="variables">combodo-theme-old-school/scss/scss-variables.scss</import>
        </imports>
        <stylesheets>
          <stylesheet id="backoffice">../css/backoffice/main.scss</stylesheet>
          <stylesheet id="old-school">combodo-theme-old-school/scss/rules.scss</stylesheet>
        </stylesheets>
      </theme>
    </themes>
  </branding>

• Note the use of xsi:type=“variables” when importing scss which must only contains “variables”
• If you have CSS rules, specify them under the stylesheet tag
• You must specify the standard scss stylesheet ../css/backoffice/main.scss, unless you rewrite all of it, and rather in first position, for your own scss to overwrite the default one.

rules.scss

.ibo-fieldset-legend {
        color: $ibo-color-grey-600;
        font-size: small;
        width:unset;
        border-bottom:0;
        margin-bottom:0;
        padding: 4px 4px 0 4px;
        margin-left: -4px;
}
 
.ibo-fieldset {
        border: 1px solid $ibo-color-grey-400 !important;
        padding: 10px 10px;
        border-radius: 6px;
        margin-top: 18px;
}

Result

Here is the XML of the test-red iTop built-in themes:

Add a colored banner at the top with a text message. It adds a new scss file for this.

For iTop 2.7

itop_design | branding | themes

      <theme id="test-red" _delta="define">
        <variables>
          <variable id="backoffice-environment-banner-background-color">#C53030</variable>
          <variable id="backoffice-environment-banner-text-color">#F7FAFC</variable>
          <variable id="backoffice-environment-banner-text-content">
             "THIS IS A TEST INSTANCE"
          </variable>
        </variables>
        <imports>
          <import id="css-variables">../css/css-variables.scss</import>
        </imports>
        <stylesheets>
          <stylesheet id="jqueryui">../css/ui-lightness/jqueryui.scss</stylesheet>
          <stylesheet id="main">../css/light-grey.scss</stylesheet>
          <!-- Here we add another stylesheet -->
          <stylesheet id="environment-banner">../css/backoffice-environment-banner.scss</stylesheet>
        </stylesheets>
      </theme>

For iTop 3.0 onwards

itop_design | branding | themes

      <theme id="test-red" _delta="define">
        <variables>
          <variable id="ibo-page-banner--background-color">$ibo-color-red-600</variable>
          <variable id="ibo-page-banner--text-color">$ibo-color-red-100</variable>
          <variable id="ibo-page-banner--text-content">"THIS IS A TEST INSTANCE"</variable>
        </variables>
        <imports>
        </imports>
        <stylesheets>
          <stylesheet id="fullmoon">../css/backoffice/main.scss</stylesheet>
          <stylesheet id="environment-banner">../css/backoffice/themes/page-banner.scss</stylesheet>
        </stylesheets>
      </theme>

In the 2.7 version, all this was a “work in progress”. Now with version 3.0 we have totally reorganized the variables.

You have a 2.7.x iTop version and you have customized light-grey :

itop_design | branding | themes

      <theme id="light-grey" _delta="force">
        ...
      </theme>

For iTop 3.0 onward, customize both fullmoon and darkmoon themes :

itop_design | branding | themes

      <theme id="fullmoon" _delta="force">
        ...
      </theme>
      <theme id="darkmoon" _delta="force">
        ...
      </theme>

For example this code in a 2.7 theme :

        <stylesheets>
          <stylesheet id="jqueryui">../css/ui-lightness/jqueryui.scss</stylesheet>
          <stylesheet id="main">../css/light-grey.scss</stylesheet>
          <!-- Here we add another stylesheet -->
          <stylesheet id="environment-banner">../css/backoffice-environment-banner.scss</stylesheet>
        </stylesheets>

Must be replaced in 3.0 by :

        <stylesheets>
          <stylesheet id="fullmoon">../css/backoffice/main.scss</stylesheet>
          <stylesheet id="environment-banner">../css/backoffice/themes/page-banner.scss</stylesheet>
        </stylesheets>

In 3.0 some variables are used with some variations. It means that in 2.7 you may declare only one color in one variable, and in 3.0 you'll have to set mtuliple variables with color variation.

Here are the main variables concerned :

XXX are :

• range from 100 to 900 : 100, 200, 300, .. 900
• 950

So for each “-XXX” we get 10 variables.

To use an existing iTop color code, check the existing values within a 3.0+ iTop with the browser development tool. Then transform it following one of those 2 possible syntax:

• $ibo-lifecycle-success-state-primary-color'
• var(--ibo-lifecycle-success-state-primary-color)

The advantage of using those existing colors, is that a theme creation or modification would apply to your setting/new classes, so you keep consistency within your iTop.

Some default mapping showing where the primary colors are used:

related to primary_color

$ibo-quick-create--icon--color: $ibo-color-primary-600 !default;
$ibo-quick-create--icon--color--on-hover: $ibo-color-primary-700 !default;
$ibo-quick-create--icon--color--on-active: $ibo-color-primary-800 !default;
 
$ibo-global-search--icon--color: $ibo-color-primary-600 !default;
$ibo-global-search--icon--color--on-hover: $ibo-color-primary-700 !default;
$ibo-global-search--icon--color--on-active: $ibo-color-primary-800 !default;
 
$ibo-hyperlink-color: $ibo-color-primary-700 !default;
$ibo-hyperlink-color--on-hover: $ibo-color-primary-800 !default;
$ibo-hyperlink-color--on-active: $ibo-color-primary-900 !default;
 
$ibo-keyboard-shortcut--input--is-focus--color: $ibo-color-primary-800 !default;
$ibo-keyboard-shortcut--input--is-focus--border-color: $ibo-color-primary-600 !default;
 
$ibo-datatable--row--background-color--is-hover: $ibo-color-primary-200 !default;
$ibo-datatable--row--background-color--is-selected: $ibo-color-primary-300 !default;
 
$ibo-vendors-datatables--page-length-selector--border-color--on-focus: $ibo-color-primary-600 !default;
$ibo-vendors-jquery-treeview--treecontrol--hover: $ibo-color-primary-600 !default;
 
$ibo-activity-panel--add-caselog-entry-button--background-color: $ibo-color-primary-600 !default;
$ibo-activity-panel--add-caselog-entry-button--background-color--on-hover: $ibo-color-primary-500 !default;
$ibo-activity-panel--add-caselog-entry-button--background-color--is-active: $ibo-color-primary-700 !default;
 
$ibo-svg-illustration--fill: $ibo-color-primary-500 !default;