Hi, so sometimes you would find a need to, or you would want to override the default styles or tailor the look and feel of your forms to align with your brand identity.
Or it could be just that you just want a specific thing to be pixel perfect.
Let's say if you would want to reduce the padding here or reduce the padding here, just to make it feel right.
So those kind of things are not possible via the usual when you edit a theme.
Although when you look at the themes, let's say this is a theme.
If I edit, we do provide certain options about changing the background color, changing the color in which the questions are shown.
But sometimes you would just want to.
make certain changes which are not possible with the default options which we provide here.
So in that case we provide an option to have custom CSS.
You can add your own custom CSS and inject that CSS to make, to have more control over the design elements in the form and have more flexibility as well.
So let's say in this form I'm not happy with the amount of padding which is present at the top and I would want to remove that.
So what I can do is like I should I would go to the theme which is assigned to this form or applied to this form and I'll scroll to the bottom and I'll have custom CSS.
Here what we can do is I can use the browser tools to see which element is adding the padding so let's say yeah so I can see this need of form EUI card is adding the padding at the top so I can just copy this from here and I can let's say I'll do padding top zero so that will make it move to the top and let's go here again and yeah let me save this and I can refresh it here So you can see the padding got removed and now the custom CSS got applied.
Let's check one more use case.
So let's say this is the branch story question for which it is a required field.
If I add something which is fine but let's say if I don't then the error is in red.
But I don't want it to be red.
I don't want this to be that much strain to the eyes.
So I can tone it down a bit.
Maybe I can give it to the same color as black.
So yeah, what I can do is like I can inspect this and I'll see which.
.
.
So this is the NETO form input error text style handler or NIDO form input error text.
So I think, yeah, I can use that.
Also, in case you find that this text editor is too small, you can always click on expand and then I can paste the CSS class and I can just mention color as black.
I'll save it and then refresh here.
Now you can, so this wasn't the correct class I believe.
Let's check again.
So this is the text.
Let's save, refresh, hopefully that will work.
Yeah, so you can see now that custom CSS got applied.
So this is the use case for custom CSS to have more fine-tuned control and more flexibility over the design elements in the form which are not possible via the default options.
Yeah, thank you.