# NG Ti: Different styles to different (db)treeview components

**URL:** <https://forum.servoy.com/t/ng-ti-different-styles-to-different-db-treeview-components/20846>\
**Category:** Questions\
**Created:** [August 31, 2022, 8:33am UTC](https://forum.servoy.com/t/ng-ti-different-styles-to-different-db-treeview-components/20846 "2022-08-31T08:33:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![huber](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/huber/32/5042_2.png) [@huber](https://forum.servoy.com/u/huber)\
**Post date:** [August 31, 2022, 8:33am UTC](https://forum.servoy.com/t/ng-ti-different-styles-to-different-db-treeview-components/20846/1 "2022-08-31T08:33:46Z")

</div>

To apply different styles to different (db)treeview components [servoyextra-dbtreeview], in NG Classic I can style the component by using the name property.

For example, property name is set to menu, then the style

```auto
[name = menu] .dbtreeview ul.fancytree-container {
	background-color: #f5fbfe;
}

```

is only applied to dbtreeviews having set the property name to menu.

This does not work anymore for NG Titanium. Does someone know how to use different styles in NG Ti for the dbtreeview components? Any hint is appreciated.

---

<div class="post-metadata">

**Author:** ![mboegem](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/mboegem/32/4399_2.png) [@mboegem](https://forum.servoy.com/u/mboegem)\
**Post date:** [August 31, 2022, 11:08am UTC](https://forum.servoy.com/t/ng-ti-different-styles-to-different-db-treeview-components/20846/2 "2022-08-31T11:08:27Z")

</div>

Hi Robert,

A while ago, you’ve asked about styling of the TiNG treeview component.  
From that, I know that the underlying component is different and therefor also the DOM/classes of the component.

Easiest way is to use the browser’s inspector and see what the target is in this component.

---

<div class="post-metadata">

**Author:** ![huber](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/huber/32/5042_2.png) [@huber](https://forum.servoy.com/u/huber)\
**Post date:** [August 31, 2022, 1:21pm UTC](https://forum.servoy.com/t/ng-ti-different-styles-to-different-db-treeview-components/20846/3 "2022-08-31T13:21:30Z")

</div>

Hi Marc

I did that and can style the treeview component. But on different forms I have to style them differently. The browser’s inspector is no help in finding an answer to that, at least I didn’t find it.

Regards,

---

<div class="post-metadata">

**Author:** ![mboegem](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/mboegem/32/4399_2.png) [@mboegem](https://forum.servoy.com/u/mboegem)\
**Post date:** [September 1, 2022, 11:07am UTC](https://forum.servoy.com/t/ng-ti-different-styles-to-different-db-treeview-components/20846/4 "2022-09-01T11:07:44Z")

</div>

Hi Robert,

I can see what you’re trying to achieve.  
The generic solution is kind of simple.  
You can nest form-specific styling in a form style class.  
Something like this:

```auto
.menu-tree {
   .dbtreeview ul.fancytree-container {
      background-color: #f5fbfe;
   }
}

```

Then you will add/set ‘menu-tree’ as the styleclass of the particular form.

I can imagine that you have some base styling for the different treeviews, which can be global styling (no nesting) or nested in a separate block, referencing multiple form-styles

```auto
.menu-tree,
.another-tree,
.3rd-tree {
   /** base styling */
}

```

Hope this helps

note: of course you still need to replace the fancy-tree style class with the TiNG equivalent. ![;-)]( "Wink")