colour change Radgrid pagination button

[Ramesh]

Hi Team,

Can we able to change the colour of pagination button (next, prev next , prev etc..) ?

Regards,

Ramesh.

 

[Vessy]

Hi Ramesh,

From the attached image I can see that you are using the Grid in Classic rendering. The pagination buttons in this mode are rendered via icons(background images), so you will need to create and set a custom icon for each button in order to change its color. For example, the first page button's icon can be changed with the following style:

.RadGrid input.rgPageFirst {
    background-image: url(customIcon.png);
    background-position: 0;
}

If you decide to switch to Lightweight rendering, where the buttons are rendered via font icons, you can change only the background color of the buttons keeping the icons like follows:

div.RadGrid .rgPagerCell .rgPagerButton,
div.RadGrid .rgPagerCell .rgActionButton {
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
    border-color: #687dc1;
    color: #fff;
    background-color: #ff0000;
    background-image: none;/*linear-gradient(#8d9dd2,#5762a3 50%,#3c4d8f 50%,#687dc1);*/
}

For further customization, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

Regards,
Vessy
Progress Telerik