Using iTop

Creating your iTop

iTop Customization

"How to" examples

User Interface

Automation & Ticket management

Portal Customization

Highlight status in Console

Prerequisite: You must be familiar with the Syntax used in Tutorials and have already created an extension and for this specific Tutorial you must also be familiar with CSS code.

Change the background color of a status depending on its state
CSS, Look & feel
min version:
From iTop 3.0, you can set colors to enum values in XML

In this Tutorial, using the markup HTML, we will show you how to highlight in the Console the status of a Ticket, with different colors, based on the status value.

For this, you need to write some CSS which need to be embedded in an iTop extension module. We assume that you are familiar with CSS code. Below an example of such CSS, which change the display for status is state 'closed', 'rejected' and 'accepted'

/* Define a few colors */
$status-default-color: #757575 !default;
$status-default-bg-color: #DEDEDE !default;
$status-accepted-color: #FFFFFF !default;
$status-accepted-bg-color: #2F855A !default;
$status-closed-color: #757575 !default;
$status-closed-bg-color: #DEDEDE !default;
/* Define a reusable set of properties */
        margin-right: 0.5rem;
        content: "";
        font-family: "Font Awesome 5 Free";
        font-weight: bold;
/* In any object-details screen, if there is an enum field called 'status' */
                        vertical-align: baseline;
                .field_value{   /* Modify the display of the value */
                        display: inline-block;
                        padding: 0.25rem 0.6rem;
                        color: $status-default-color;
                        background-color: $status-default-bg-color;
                        border-radius: .25rem;
                /* if the value is 'accepted' use some colors */
                                color: $status-accepted-color;
                                background-color: $status-accepted-bg-color;
                                /* and add a font awesome icon in front of the label */
                                        @extend %status-icon;
                                        content: "\f4fc";  /* code of the font */
                /* if the value is 'rejected' or 'closed' use other colors */
                                color: $status-closed-color;
                                background-color: $status-closed-bg-color;
                                font-weight: bold;

Onboard CSS with Theme

In order to be sure that your CSS is used by iTop, you need to add it to the iTop theme

If you have define multiple Theme, maybe you will need to alter them also
        <theme id="light-grey">
              <stylesheet id="my-module" _delta="define">my-module/asset/css/console.scss</stylesheet>

Of course, you can expend this to define colors for every values of the status. You can make this for any enum, not only the status. You can restrict this behavior to Ticket classes…

As this highlighting is dependent on the values, adding values to an enum, may require to add some lines to your CSS file

Highlight in Portal

Onboard CSS in PHP

Because the Theme are not working in the Portals in iTop 2.7, you cannot use the XML configuration to tell iTop when to upload the CSS for the portal. So we will use another mean.

In the or any .php file of your module. Using the new extension logic, lets put it under


And here is the code to copy:

use iPortalUIExtension;
use RequestStatusBeautifierPortal;
use Symfony\Component\DependencyInjection\Container;
use utils;
/* AbsractPortalUIExtension implements iPortalUIExtension with no behavior */
class MyModulePortalUIExtension extends AbsractPortalUIExtension
    const MODULE_CODE = 'my-module';
    public function GetCSSFiles(Container $oContainer)
        $sModuleCSSFolderRelPath = 'env-'.utils::GetCurrentEnvironment().'/my-module/asset/css/';
        $sModuleCSSFolderAbsPath = utils::GetAbsoluteModulePath(static::MODULE_CODE).'asset/css/';
        $sAdditionalSCSSFileRelPath = $sModuleCSSFolderRelPath.'portal-additional.scss';
        $sAdditionalSCSSFileAbsPath = $sModuleCSSFolderAbsPath.'portal-additional.scss';
        $aCSSFiles = array(
        // Checking if additional CSS is already compiled
        if (!file_exists($sAdditionalSCSSFileAbsPath) && (is_writable($sModuleCSSFolderAbsPath)))
            // Get additional SCSS
            $sAdditionalSCSS = '@import "../'.$sModuleCSSFolderRelPath.'variables.scss";'."\n";
            $sAdditionalSCSS .= RequestStatusBeautifierPortal::GetAdditionalSCSS();
            file_put_contents($sAdditionalSCSSFileAbsPath, $sAdditionalSCSS);
            $aCSSFiles[] = utils::GetAbsoluteUrlAppRoot().utils::GetCSSFromSASS($sAdditionalSCSSFileRelPath);
        return $aCSSFiles;

You can nearly copy-paste this code, changing the:

  • class name
  • module_code
  • name and path of the .scss files

Do not forget to add this Hook file name in the model
        __FILE__, // Path to the current file, all other file names are relative to the directory containing this file
                'datamodel' => array(

latest/customization/markup.txt · Last modified: 2024/06/20 17:28 (external edit)
Back to top
Contact us