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 aragorn
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: 15 Aug 2018, 11:31
by trumpP
Go to
main directory / styles / your theme / theme / css and open main.css
Place the following code in main.css . This will effect pagination button all over your website.

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
background-color: your color ; //background color of buttons. Blue by default
border-color: your color; // color or borders. Also blue by default
color: your color; // text color of buttons which is white by default
cursor:pointer;
z-index:2;
}

Re: how to change paginator background color

Posted: 17 Sep 2018, 12:03
by aragorn
I think the issue is resolved.