Sidebar

Using iTop

Creating your iTop

iTop Customization

"How to" examples
DataModel

User Interface

Automation & Ticket management

Portal Customization

How to create a new theme

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

learning:
Change the layout of iTop console
level:
Medium
domains:
XML, CSS
min version:
3.0.0
To customize theme of a 2.7.x iTop, be careful all the variables were different

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.

Change few colors

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

Change more colors

Main variables

3.0 SCSS Variable Usage
ibo-color-primary-XXX used in most place were you see orange in a standard iTop
ibo-hyperlink-color used for text which are hyperlinks, such as menu entries, external keys
ibo-hyperlink-color--on-hover Text color when going over a breadcrumb or hyperlink entry
ibo-color-secondary-XXX fieldset legend background, table header text, frame border of edit container
ibo-color-secondary-XXX frame background of edit container (object and transition)
ibo-navigation-menu--body--background-color West pans (Menus)
ibo-top-bar--background-color North pans (top bar)
ibo-navigation-menu--action--background-color--on-hover Background color, when going over a group menu
ibo-tab-container--tab-header--background-color--on-hover Background color, when going over a tab
  • 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
Some new variables… …and their usage
ibo-tab-container--tab-container--min-height min height of a tab in scrollable mode
ibo-tab-container--tab-container--last--min-height height of the last container in scrollable mode
Add some blank at the bottom to make it obvious that you are at the bottom
and allow the tab title to be selected, while you are on it

Variable values

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;

Stylesheets

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>

Enums

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

Create a new theme

To force recompilation of the theme, after Setup or Toolkit, delete /env-production/branding/old-scholl/main.css To see the effects of a theme change, empty the browser cache (Ctrl-F5)

old-school theme

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

Test instances themes

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>

Migrate to 3.0 themes

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

Themes names

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>

SCSS files

Old 2.7 variables are defined in the file /css/css-variables.scss.
In a 3.0 theme you must either include /css/backoffice/main.scss or define the variables present in this file, otherwise the setup will crash

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>

Variables names mapping between 2.7 and 3.0

Direct matches

2.7 variable 3.0 variable
hyperlink-color ibo-hyperlink-color
breadcrumb-text-highlight-color ibo-hyperlink-color--on-hover
frame-background-color ibo-navigation-menu--body--background-color
frame-background-color ibo-top-bar--background-color
hover-background-color ibo-navigation-menu--action--background-color--on-hover
hover-background-color ibo-tab-container--tab-header--background-color--on-hover

iTop 3.0 -XXX variables

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 :

2.7 variable 3.0 list of variables
brand-primary ibo-color-primary-XXX
complement-color ibo-color-secondary-XXX
complement-light ibo-color-secondary-XXX

XXX are :

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

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

A little more...

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;
latest/customization/theme.txt · Last modified: 2024/09/10 10:25 (external edit)
Back to top
Contact us