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
Customize CSS for Sapphire template
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
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,
You can add below styles to your src/main/webapp/resources/sass/overrides/_theme_styles.scss file for overriding theme.
1.
Code: Select all
body .ui-datatable thead th.ui-filter-column {
padding: 1rem;
}
Code: Select all
body .ui-datatable .ui-datatable-header {
text-align: right;
}
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
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
Sapphire Theme 5.0.0
PrimeFace (Elite) 12.0.3
Mojarra JSF 2.3.14.SP04 & OmniFaces 3.11.2
PrimeFace (Elite) 12.0.3
Mojarra JSF 2.3.14.SP04 & OmniFaces 3.11.2
-
- Information
-
Who is online
Users browsing this forum: No registered users and 6 guests