CGDevTools Forum

Posted: **08 Apr 2014 12:33**

In this tutorial we show you how change or override the css style of control.

Difficulty: Average - require css knowledge

First, you need create the custom (your) css file and load to application.

[Q] How i can load css file to my application?
[A] Use the ContentFiles property.

Below, we show you the living example:

Component: JQDynaTree

What is required :
- Set the background
- Change the border
- Change the font-size

To do:

1. Search / Check the css class to override:

- Press F12 to open developer console in browser, and then :

02-06-2016 17-50-00.jpg

2. Override this class, but here we have 2 options:

Override only for this control :

You need set the JQDynaTree.Css property to some class (we want mark this control)

delphi code
```
JQDynaTree.Css:= 'my-custom-dynatree';
```

In css:
css code

.my-custom-dynatree ul.dynatree-container {
  background-color: transparent !important;
  border: 1px solid red !important;
  font-size: 12px !important;
}

Override for all controls of that type (in this case all JQDynaTree's controls) :

css code

ul.dynatree-container {
  background-color: transparent !important;
  border: 1px solid red !important;
  font-size: 12px !important;
}

That's all

Best Regards.

CGDevTools Forum

[How To] Override the style of control

[How To] Override the style of control