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 !
how to change paginator background color
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
If you have layout+theme,
I think you can change less variables related to paginator or datatable on theme-variables.less file;
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;
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;
...
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>
Github Profile: https://github.com/mertsincan
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">
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">
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Should be;
Code: Select all
.abc-datatable .ui-paginator {
margin: 0px;
padding: 0px !important;
background-color: #F5B52C;
border-radius: 1px;
}
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I think the issue is resolved.
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest