Dear all,How can I achieve the table appearance illustrated below?
I think it has got to do with CSS style applied to table. Using the default table widget I managed to get this look :
Right now the gray line occurs only during mouse hover on particular line. However, I need to get that gray colored background every two consecutive lines (one white, one gray) and besides darker gray background for header rows. Notably, if every time mouse hover makes lines darker, then maybe hover affect needs to be deactivated too in case it will make it difficult to see the lines during mouse travel on it ?Many thanks for the help!
Hi Gulbala,
You can do that very easily with CSS.
First locate your Theme under Interface tab and double-click it to open:
Then, you can add the following snippet of CSS:
tr:nth-child(odd) td { background-color: grey;}
This will make the odd lines (first, third, etc.) have the background grey. You can apply the same to even lines if you want to apply your styles to those and of course, you can adapt the color you prefer.
This is an example of applying this CSS for the color red:
Kind Regards,João
Hi @João Marques ,That works like a charmI have also just changed table header colour too !
In the meantime I have tried to implement some CSS changes for CheckBox too in the Theme Style Sheet to replace checkbox's deactiveated colour as active so that it doesn't look so gray when published like here:
but it didn't work.Do you have any idea for this too?
Below is the CSS code for CheckBox widget I copied from Developer Tool Style Editor and that I modified before sections:
[data-checkbox]:before { display: table; width: 100%; height: 100%; content: ' '; opacity: 0; background-color: white; transition: opacity 200ms ease-in; } [data-checkbox]:checked:before { opacity: 1; } [data-checkbox]:checked:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; display: table; top: 3px; left: 3px; width: 10px; height: 6px; border-width: 0 0 2px 2px; border-style: solid; border-color: white; content: ' '; } [data-checkbox][disabled] { border-color: white; } [data-checkbox][disabled]:checked:before { background-color: #E9E9E9; } [data-checkbox][disabled]:checked:after { border-color: #A6A6A6; }
I suppose maybe this opacity issue :? Thank you !! :)
Checking and playing with it in Chrome Developer Tools is indeed the quickest way to understand classes being applied and what do you need to override to get the styles you need.
For the background-color of the checkbox, check the below image of the styles being applied and change it according to your use case:
Yes mission completed. Thank you ! :)