Search results

Style and Appearance in JavaScript (ES5) Pager control

09 Jun 2021 / 1 minute to read

To modify the Pager appearance, you need to override the default CSS of Pager. Please find the CSS structure that can be used to modify the Pager appearance. Also, you have an option to create your own custom theme for all the JavaScript controls using our Theme Studio.

Customizing the Pager

Use the below CSS to customize the Pager root element.

Copied to clipboard
.e-pager {
    background-color: #deecf9;
}

Customizing the Pager container element

Use the below CSS to customize the pager container element.

Copied to clipboard
.e-pager .e-pagercontainer {
    background-color: #deecf9;
}

Customizing the Pager navigation elements

Customize the pager navigation elements, using the below selector.

Copied to clipboard
.e-pager .e-prevpagedisabled,
.e-pager .e-prevpage,
.e-pager .e-nextpage,
.e-pager .e-nextpagedisabled,
.e-pager .e-lastpagedisabled,
.e-pager .e-lastpage,
.e-pager .e-firstpage,
.e-pager .e-firstpagedisabled {
    background-color: #deecf9;
}

Use the below CSS to customize the pager current page numeric link elements.

Copied to clipboard
.e-pager .e-numericitem {
    border-radius: initial;
}

Customizing the Pager current page numeric element

Using this CSS, you can customize the pager current page numeric item.

Copied to clipboard
.e-pager .e-currentitem {
    background-color: #0078d7;
}