I am using outsystems table widget.
The requirement is that I want all the headers of the table in different colours, and I have tried the style property options for that.
It worked in any of my personal application but in the project due to the Theme CSS it is not accepting those styles and the theme colour is over righting it.
can anyone suggest me the best way to do this??
Hello Quadir.k
You can apply below CSS for n number of headers of the table.
Like if you have 3 headers. write this in your CSS editor.
table th:nth-child(1)
{
background-color: #8EA9DB !important;
}
table th:nth-child(2)
background-color: #8EA96B !important;
table th:nth-child(3)
background-color: #8EA99B !important;
If it still doesn't work may be you have to over right the Theme CSS, so copy that CSS in your CSS editor and comment that peice of CSS which is affecting your changes.
If you need any further help feel free to ask or can share the OML if possible.
Thanks & Regards
Anees
Hello Mohd,
thanks for helping but this only worked on some screens and not on others. may be due to the additional CSS or what? and i can't share the OML it belongs to a project.
@Mohd Anees Mansoori ,
using !important should be avoided unless no other options are available.
Not sure what !important would solve here anyway, i don't seem to need it, it is already a higher specificity than the original outsystems ui selector of .table-header .th.
@Quadir.K ,
the cleanest would probably be to give each header cell a class representing the color you want them in (is that an option for you, or do you want this to automagically happen for all your headers?)
Then in your CSS, just pick up the existing css used by Outsystems UI (as Mohd suggested, you can use chrome dev tools to find this) and complement them with you extra class, giving you higher specificity than the default styling.
something like this :
.table-header th.header-blue{ background-color: paleturquoise; } .table-header th.header-green{ background-color: palegreen; } table th:nth-child(3){ background-color: orange; }
You'll need somehow to share with us when it is working and when not, with a demo or screenprints, simply 'may be due to additional CSS or what?' is not enough for us to help.
Do you know how to use chrome dev tools ? That will help you understand what CSS rule 'wins' for any particular element on your page, and help you decide what to do about it.
Dorine