Page 1 of 1
how to change paginator background color
Posted: 14 Aug 2016, 09:04
by shinigami
Hi all,
I can change the background color of the datatable header box. However, as we can enable the paginator but current paginator is blue. How can i change the paginator color ? Many thanks !
Re: how to change paginator background color
Posted: 16 Aug 2016, 12:06
by mert.sincan
If you have layout+theme,
I think you can change less variables related to paginator or datatable on theme-variables.less file;
Code: Select all
/** paginator **/
@paginator-bg-color: #0277BD;
@paginator-element-bg-color-focus: #0288D1;
@paginator-element-color-focus: #FFFFFF;
....
/* datatable */
@datatable-border-color: #E0E0E0;
@datatable-bg-color: #FFFFFF;
@datatable-color: #546E7A;
...
Similar issue;
http://forum.primefaces.org/viewtopic.php?f=28&t=43687
Customization Theme and Layout with Less;
https://www.dropbox.com/s/gnfiq39hfx37r ... s.avi?dl=0
If you have only theme, you need to override paginator or datatable css. Exp;
Code: Select all
<style type="text/css">
.ui-datatable .ui-datatable-header {
background-color: red;
}
.ui-datatable .ui-paginator {
background-color: yellow;
}
</style>
Re: how to change paginator background color
Posted: 17 Aug 2016, 05:51
by shinigami
thank you !
Re: how to change paginator background color
Posted: 17 Aug 2016, 06:05
by shinigami
Thank you for your support.
I have tried to add the theme.css and also put that styleClass in the html file. However, seems like it is not working and still displaying the default blue color.....
/* paginator */
.abc-datatable.ui-paginator {
margin: 0px;
padding: 0px !important;
background-color: #F5B52C;
border-radius: 1px;
}
and then i will have the below code in my html :
<p-dataTable [value]="notes" [rows]="2" [paginator]="true"
selectionMode="single" [(selection)]="selectedNote" (onRowSelect)="onNoteSelect($event)" [responsive]="true" styleClass="abc-datatable" [editable]="true">
Re: how to change paginator background color
Posted: 22 Aug 2016, 15:56
by cagatay.civici
Should be;
Code: Select all
.abc-datatable .ui-paginator {
margin: 0px;
padding: 0px !important;
background-color: #F5B52C;
border-radius: 1px;
}
Re: how to change paginator background color
Posted: 17 Sep 2018, 12:03
by mert.sincan
I think the issue is resolved.