Change colour of one element in the box

Org Chart
1

Dear Team,

We have four fields in the box: one is of "Tooltip link" type, others are - "Text".
Is it possible to change colour (font size or any other text parameters) for one of the three text elements using JavaScript?

Example:

  1. Department (Tooltip link)
  2. Position (Text)
  3. Employee name (Text)
  4. Company (Text)

We would like to have position name in bold and red colour, other text fields - black text colour.

Regards,
Ilia

2

Hi @isychev ,
Yes, this is quite easy to set up with some additional CSS rules.
Note that my example below uses the Box template, but the
Tooltip template has the same exact syntax.

  1. Please switch to the "HTML mode" of the tooltip template. Add any additional class to the property you need. For example, I add a custom class to the department field

    image
    image847×539 108 KB

  2. No specify the CSS rule for the new class:
    image

  3. The "Department" field now has a different styling:
    image

3

Hi @v.uspenskii,

Thank you! Can the requirement be achieved using only JavaScript (i.e. without switching to HTML mode in Box Template)?

Regards,
Ilia

4

@isychev ,
This is doable, though less easily than with HTML template.
You can use the following jQuery script to get to the necessary element:

renderer.onBoxRendered(function(event, box, itemData){
    box.$elem.find('.pl-item-fields div:nth-child(3)').css({'color':'green'})
   
});

, where :nth-child() should hold the position of the element you want to change styling for (starting with 1).
For example, the code above produces the following result:
image