Prime Community Forum

How to customize CSS for all "p:dataTable"s using styleClass and its elements like header, or column, etc while using Sapphire?

Say I have file custom1-layout.css
.my-datatable-column-filterby {
padding: inherit;
}

than in the XHTML:
<p:dataTable>
<p:column filterStyleClass="my-datatable-column-filterby"
...

For example:
1.how do I modify using styleClass the padding of p:column filterBy field?
2.how do I modify using styleClass the header of entire table?

appreciate the help

Hi,
You can add below styles to your src/main/webapp/resources/sass/overrides/_theme_styles.scss file for overriding theme.
1.
2.
Padding and text-align only for example.

Best Regards,

hello,

Is it possible to overwrite theme not from SASS code, but directly from CSS?
If I do override from src/main/webapp/resources/sass/overrides/_theme_styles.scss file (this is what you suggested), than I need to re-compile(SASS compiler become must) entire Sapphire and than re-deploy it under my project, etc. Too much hassle.

Is it possible under my project from CSS directly to override Sapphire layout ?
Say I have already in my app entire Sapphire under src/main/resources/sapphire-layout/ directory,
and now from src/main/resources/mycustom1-layout/css/... I want to override ui-datatable, ui-datatable-header, etc ?

thanks

Hi,

You can do it that way too. If you want, you can even override by adding it to the bottom of your theme.css file. All of them is up to you.

Best Regards,