:: Version 2.7.0 ::

Portal: How to change a brick icon

In this How to, we change the “New request” icon from a conversation bubble to a paper plane.

name:
How to change a brick icon
type:
How To
audience:
Administrator, Integrator, Developer
level:
Intermediate
duration:
30min
keyword:
Portal, Customization
iTop version:
2.7.0

Prerequisites

What you will need to:

  • Know how to make an iTop extension and upgrade your system,
  • Have an iTop system with the demo data and the enhanced portal installed,
  • Have access to an account with enough rights to connect to the portal (usually this means having the Portal User profile).

Aim of this tutorial

In this tutorial, you will learn how to:

  • Change the icon of the “New request” brick

 Before changing the icon

Step by step instructions

Creating the extension

First, we need to create an iTop extension that will alter the portal XML configuration to change the icon of the brick. Check the Extension modules part from the customization guide (iTop Customization) if necessary.

  1. Name the extension as sample-portal-change-brick-icon.
  2. Remove the main.sample-portal-change-brick-icon.php file as we won't need any PHP code.
  3. Remove the *.dict.sample-portal-change-brick-icon.php files as we won't need any translations.

You should have the following structure:  Module structure

Changing the portal configuration

Now that we have the extension, we just need to make an XML delta and change the portal configuration to define which icon we want. Open the datamodel.sample-portal-change-brick-icon.xml file and paste the following code:

datamodel.sample-portal-change-brick-icon.xml
<?xml version="1.0" encoding="UTF-8"?>
<itop_design xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.7">
  <module_designs>
    <module_design id="itop-portal">
      <bricks>
        <brick id="services">
          <decoration_class>
            <default _delta="force">fas fa-paper-plane fa-2x fa-fw</default>
          </decoration_class>
        </brick>
      </bricks>
    </module_design>
  </module_designs>
</itop_design>

This redefines the services (a.k.a “New request”) brick icon with ours. The important parts are:

  • fas fa-paper-plane The icon classes to be found on the FontAwesome v5 website (free category only).
  • fa-2x Makes sure the icon has the same size as the others in the navigation menu.
  • fa-fw Makes sure the icon will be centered like the others in the navigation menu.

Upgrading the system

Finally run an upgrade of your iTop system with the new extension option checked and access the portal. You should see the new New request icon changed by our paper plan.

 Et voilà !

Downloads

You can find this extension on our GitHub here 👌

2_7_0/customization/portal_howto_changebrickicon.txt · Last modified: 2020/04/15 15:23 (external edit)
Back to top
Contact us