[How To] Override the style of control

[Alexander Bulei]

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 :
  
  1. You need set the JQDynaTree.Css property to some class (we want mark this control)
     
     delphi code

     JQDynaTree.Css:= 'my-custom-dynatree';

     
     
  2. 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.