Change child style in tree structure

Ignition
,
1

Hello everyone,

I want to change the style per element in the tree component. does anyone know if this is possible?

my case:

image
image627×786 53.6 KB

I want to change the style of the yellow marked child in my tree structure to underline the text and make the text blue so it looks like a hyperlink.

thanks in advance

2

I tried adding color : blue to Grandchild 2 in the default items of the Tree component and got message,

items[0].items[0].items[1].color: is not defined in the schema and additional properties are not allowed

I'd say the answer is 'no'.

3

yep i got the same error message when i added “style” to the grandchild

unfortunate that I can not change it this way

4

You want only the yellow line or every 3th line?

5

every third but its build in a script so if I figure out how to do one, I guess it will work for all

6

Will it always be ? If so some css can solve this

- item
    -1
    -2
    -3
- item
    -1
    -2
    -3
7

yes it will always be 3rd rule. can you explain how you came to the picture case?

8

You can inject this css into a styles backgroundimage (make sure the name matches the psc-Name

} .psc-underline3thTreeElement div[data-item-path$="/2"] .text-scroll { color: blue; text-decoration: underline; }{

image
image1166×722 63.5 KB

2 Likes
9

got it working!!! thank you very much

1 Like
10

Graag gedaan :wink:

12

Hi @victordcq ,how do you know the css code of the component and then apply the changes?

13

To find the selectors, use the dev tools in a browser (ctrl + shit + i).
There's an element tab that allows you to browse the DOM, and a little icon that allows you to select a specific element to find it in the tree (or press ctrl + shit + c):
image

for example, if I want to target the reply button of your comment:

image
image1051×352 26.7 KB

image

Now I know I can target the element with id="post_12" to make sure I'm in the scope of your message, then I can target the button with class reply:
#post_12 button.reply

To apply css to it, you go to your css stylesheet (since 8.1.21 I believe ?) then add something like this:

#post_12 button.reply {
  property: value;
}
2 Likes
14

thank you @pascal.fragnoud , very clear :slight_smile:
Do you think it is possible to have two icons in the tree component item ?

15

css doesn't add elements to the DOM, it changes their appearance.
So if there are settings for only one icon... you'll only get one icon.

You could use some js injection through the markdown component to add an icon element, but frankly... I wouldn't do that for an icon.

16

I see, the solution could be to modify the component with JDK

17

you can add content with css, using content in a :before or :after. you could then add a background icons to it
in the example i do use js-injection, but only because it has te be dynamic according to the dropdown. you can make it fixed too depending on what its for.

like you could target every 3th element of a tree too, like in the original question