Sidebar

Using iTop

Creating your iTop

iTop Customization

"How to" examples
DataModel

User Interface

Automation & Ticket management

Portal Customization

:: Version 3.2.0 ::

Changing left menu colors

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

learning:
Change the colors of the Console left menu in the **fullmoon** theme
level:
Beginer
domains:
XML
min version:
3.0.0

It is possible with the ITSM Designer (or an XML extension) to change the colors used to display the left menus in the iTop Console, to align it to your company color codes.

This picture describe which part of the menu is controlled by which variable:

User Menu

XML

Insert this code in an extension

itop_design / branding / themes /theme@fullmoon
<variables>
<!-- Main menu (icon uses the same color as the text) -->
    <variable id="ibo-navigation-menu--body--background-color" _delta="define">$ibo-color-white-100</variable>
    <variable id="ibo-navigation-menu--body--text-color" _delta="define">$ibo-color-blue-800</variable>
 
<!-- Main menu on-hover (background & text) -->
    <variable id="ibo-navigation-menu--action--background-color--on-hover" _delta="define">$ibo-color-blue-100</variable>
    <variable id="ibo-navigation-menu--action--text-color--on-hover" _delta="define">$ibo-color-blue-700</variable>
 
<!-- Main menu on-active (icon & text) -->
    <variable id="$ibo-navigation-menu--menu-group-title--text-color--is-active" _delta="define">$ibo-color-blue-700</variable>
    <variable id="$ibo-navigation-menu--menu-group-icon--text-color--is-active" _delta="define">$ibo-color-blue-500</variable>
 
<!-- Sub-menu (text menu-group, numbers & hover background) -->
    <variable id="ibo-navigation-menu--menu-node--background-color" _delta="define">$ibo-color-blue-100</variable>
    <variable id="ibo-navigation-menu--menu-node--text-color" _delta="define">$ibo-color-blue-900</variable>
 
<!-- Bottom menu (below user icon) -->          
    <variable id="ibo-navigation-menu--bottom-part--background-color" _delta="define">$ibo-color-grey-100</variable>
    <variable id="ibo-navigation-menu--user--text-color" _delta="define">$ibo-color-blue-800</variable>
    <variable id="ibo-navigation-menu--user-organization--text-color" _delta="define">$ibo-color-blue-600</variable>
</variables>
 
<!-- No visible effect ??? -->
<variables>
    <variable id="ibo-navigation-menu--action-icon--text-color--on-hover" _delta="define">$ibo-color-red-300</variable>
    <variable id="ibo-navigation-menu--user-picture--background-color" _delta="define">$ibo-color-cyan-300</variable>
    <variable id="ibo-navigation-menu--action--background-color--on-active" _delta="define">$ibo-color-orange-300</variable>
</variables>

or paste this in the ITSM Designer

3_2_0/customization/change-menu-colors.txt ยท Last modified: 2024/06/20 17:28 (external edit)
Back to top
Contact us