# How To Style Grid with Theme?

**URL:** <https://forum.servoy.com/t/how-to-style-grid-with-theme/20361>\
**Category:** Questions\
**Created:** [November 11, 2020, 1:11am UTC](https://forum.servoy.com/t/how-to-style-grid-with-theme/20361 "2020-11-11T01:11:47Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![john1598360627](https://avatars.discourse-cdn.com/v4/letter/j/439d5e/32.png) [@john1598360627](https://forum.servoy.com/u/john1598360627)\
**Post date:** [November 11, 2020, 1:11am UTC](https://forum.servoy.com/t/how-to-style-grid-with-theme/20361/1 "2020-11-11T01:11:47Z")

</div>

What is the intended way of styling the NG Grid?

By default the NG Grid has a ‘ag-theme-bootstrap’ style class. Is it possible to make a modification of this theme? Or is there documentation somewhere that a template of this theme I can create myself?

For example there is this website,  
[http://ui-grid.info/customizer/](http://ui-grid.info/customizer/)

however when applied to the NG Grid in Servoy it just breaks.

Unless there is something I’m missing I just don’t know how to make a general theme (like ‘ag-theme-bootstrap’).

---

<div class="post-metadata">

**Author:** ![sdevlin](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/sdevlin/32/4488_2.png) [@sdevlin](https://forum.servoy.com/u/sdevlin)\
**Post date:** [November 12, 2020, 9:09pm UTC](https://forum.servoy.com/t/how-to-style-grid-with-theme/20361/2 "2020-11-12T21:09:16Z")

</div>

Hi John,

No Servoy’s NG-Grid is _not_ based on the angular UI Grid you have cited.

I recommend that you first try the theme-roller built-in editor (see screenshot) and just change properties.

However if you really want to re-theme the grid, it would take some css/less work, but of course you could make your own complete ng-grid theme.

For example, look at what is shipped in the theme roller:  
[https://github.com/Servoy/svyThemeRolle … less#L1469](https://github.com/Servoy/svyThemeRoller/blob/master/svyThemeRoller/medias/theme-servoy.less#L1469)

An example of this is the **ag-theme-servoy** class you can see in the [Sample Solution](https://github.com/Servoy/svySampleSolution)

Best,  
Sean

 ![theme-editor.JPG](https://canada1.discourse-cdn.com/flex010/uploads/servoy/original/2X/4/4aa31e54bcaec1df80b6da3af037c2b21386bd4b.jpeg)