Hello. In this video, I will show you how you can style your application and using using CSS. How you can use CSS to make some colorings changing the phone making style for this application, so, this is the page which we need to make some change is styling your PDF application actually you have three types of selectors, you can apply you will change for all EDF component or you can apply some change in some specific components or you can change the old application fonts, all these kind of things I will show you how to make some color and how to make some changing some fonts and so on. To start making some change Customize your skin. You can go to in the web and here you will find here three that config Here you will find the skin family. It is all top version one.

So what we have here it is all top version one. For example if you want to go for fusion effects, this is a bit old. Just like this one right again. Here you can control what is the skin family you want to work with. So by default is Ulta for tools you see it is Ulta skin family usually fix for the VGA version. So once you change the family of the skin, you should find your application.

Pick the skin family as you can see Here is Alta and this is like a 12 cc's all skin family is change it Okay. So now let us create our own skin but it will accidentally alter version so to do that you have to create XML document you can come from gutter here and you can to search for XML and you can say point XML document. So I will create a new XML file here this file should name as three need that ash skins three that ash skins XML was it here here? You will just throw it to family or skin name and what is the skinny mole extent and what is the CCS foil boss okay Just straight here, straight away. This is here you can name your skin for example my skin and here you will say what is his accident? If you want to extend a fusion?

No, I need to extend alto version one because this is sorry. Here it is, should be up version one is the default version alter version one. So here is I will extend out to version one and my CSS file will be my skin to CSS so we have to create this my skin to CSS here Enza because it is no if you want to add sub folder like CSS like this. Okay, so now it is like This it means my skin should be in the same boat here is our content. So I will create a CSS file and I will call it my CSS and it should be in the public HTML folder in the root here. So this is my CSS which the trends can read will read from okay.

But to tell it a publication use my skin you should take your skin name and put it here, skin family. Also we don't need to can commence line. So, if application will pick the skinned family from Turin during that conflict here, he will find my skin. So you should define this my skin so you can find pile core threaded skins and you can say this is my skin. This is Skin family. It is accident alter version one and this is my CSS file.

Now our PDF application is ready to be customized. If I now run this if application now it should be the same because the CSS file has nothing. So if you're on my component page it should be back to alter UI not this because I change it. I say my skin should be excellent alpha version one should be alpha version one. As it is so extended the main one. Here, this is our main alter a skin I need to make some change for this to know what is What is the selector you should write in your CSS to make some change?

Let us initially change the whole font. So to know what is the selector you can read, you can come right here. You can read you can google it if skin selectors okay. You will find here's the old selectors for skins Okay, you can you work with any of this any any of this? If not, it will affect all in a fabrication. Regarding go regardless of what is component, this diff application, like for example is a form this is search for font Okay.

Here's the font. Okay, it is default font. So if if you right here it is default font here and you see, font, size, maybe a font family if you want to change the font family to be maybe Times New Roman, font size, maybe large just to have a look how it looks like. Okay, so let's see application. Okay, the change in CS is actually you can just refresh the pitch, but let me run just for this time after that I will just refresh the page. So this is a default font or a diff application.

It should be this is a default one. I am make some changes, I will expect some a change of the fonts. Let's have a look. See how the fonts become much bigger than this. So you control the whole forms of your EDF application. If you want to make some change of this having actual into one of my customers that he says his font is really small it to be bigger I increase the font size for all the diff application Okay, so let's still make some change maybe in a column header like this.

So we can search for column B or we can say e f corner because it starts with EF core. If we say if column, header cell, for example. Here it is take this and they see for all eight column header cell sets a color to be green and make this font size maybe 12 mixin pixum. Let's just refresh our page. As you can see here is a header cell become green of the table, okay. For example here in this table some customers say why is this shadow coming in the mouse or I want to remove this because it is maybe a bit confusing.

I need to change to disable this car here, some array, some predefined here You write this in your CSS. So as a hover highlight row, it is false for the table. So now, instead of you seeing this, you should not be able to see this anymore. If he's a mouse go through over the table, as you can see now, this gun this over. If you want to make some customization of a specific component, like for example, you have here to call to two buttons, you need to add some CSS in this bottom and you want to keep this as it is, is this case, you can add some prefix is a selector itself. For example, this is a table it means in all tables, in application but if you say.if you say here, dot yeah for Dummies.

Bu T was over. It means it will work on Li was table was has this style name. So now if you refresh again this you will find this back again this whole video is back again. But if you take this theme and select the table and in the style loss stiff loss and you set this name, it means this CSS will apply only on this table. Any other table in your application will not take effect. So let's try to refresh this again.

Okay, this is not working for like this. Maybe something good On his table, we are in this correct this department. Okay, let's try to stop. We can try to see it as well in the bottom for example, I have some predefined title so bottom, just my symbol here if you add this style here, it's over here. It looks not working like this. Okay?

So for example, this is a We can remove this PMP it is not working it's some selectors, but for the bottom for example, I give a name called bottom link to. So, here we need to remove this table. So, here now right now, the All button should not take in here you can see all button as it is, but if you take this specific the for this bottom state class it means I need only this photon to take this effect. So, you will be able to see this will now become has effect most overland resonate and this is will be as as it is one more time selection of the road itself. You can you can have a lot of other Lazarus literally can get it, but this is just an example, this is don't have selected row from the table some change. So, you can put it here in a way is this application is you can they will lose this application and you will find all this content in the application itself.

So, now if I refresh this and see is a table selection see now become change the selected row, this is a table selection in all application is changed. So, this is how you can configure assist is configured the style. You have here a lot of selectors for all ATF component you can try to to try to test how it will work for all if component dialog everything you will find it here. This is how You can make some comfy stylizations changing fonts changing coloring at slide only in one component also this one is not. This is a PDF stone. See you next time