Customize CSS for Sapphire template

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
synaptic
Posts: 22
Joined: 30 Jan 2019, 16:59

19 Aug 2021, 17:48

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
Sapphire Theme 5.0.0
PrimeFace (Elite) 12.0.3
Mojarra JSF 2.3.14.SP04 & OmniFaces 3.11.2

siris
Posts: 322
Joined: 29 Jul 2019, 13:57

20 Aug 2021, 06:53

Hi,
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;
}
2.

Code: Select all

body .ui-datatable .ui-datatable-header {
	text-align: right;
}
Padding and text-align only for example.

Best Regards,

synaptic
Posts: 22
Joined: 30 Jan 2019, 16:59

20 Aug 2021, 21:56

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
Sapphire Theme 5.0.0
PrimeFace (Elite) 12.0.3
Mojarra JSF 2.3.14.SP04 & OmniFaces 3.11.2

siris
Posts: 322
Joined: 29 Jul 2019, 13:57

21 Aug 2021, 16:42

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,

Post Reply

Return to “Sapphire - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest