how to change paginator background color

Post Reply
shinigami
Posts: 15
Joined: 27 Mar 2014, 16:26

14 Aug 2016, 09:04

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 !

User avatar
aragorn
Posts: 3283
Joined: 29 Jun 2013, 12:38

16 Aug 2016, 12:06

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>

shinigami
Posts: 15
Joined: 27 Mar 2014, 16:26

17 Aug 2016, 05:51

thank you !

shinigami
Posts: 15
Joined: 27 Mar 2014, 16:26

17 Aug 2016, 06:05

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">

cagatay.civici
Prime
Posts: 18017
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

22 Aug 2016, 15:56

Should be;

Code: Select all

.abc-datatable .ui-paginator {
   margin: 0px;
   padding: 0px !important;
   background-color: #F5B52C;
   border-radius: 1px;
}

trumpP
Posts: 20
Joined: 11 Aug 2018, 11:20
Contact:

15 Aug 2018, 11:31

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;
}

User avatar
aragorn
Posts: 3283
Joined: 29 Jun 2013, 12:38

17 Sep 2018, 12:03

I think the issue is resolved.

Post Reply

Return to “Rio”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest