Silk skin on Pager

[Jon]

Hi All,

Using the silk skin on a grid I notice that the page buttons use the grey style of hover.  On radbuttons you can tell them to use the primary style (which ironically seems to be the secondary style as it is not default), which shows a nice blue highlight.  Is there a way to get this blue highlight on the page buttons - it provides a nice uplift to an otherwise grey page.

Regards

Jon

[Galin]

Hi Jon,

In order to style the pager button as a primary button you can use the following CSS rules

div.RadGrid_Silk .rgPager .rgPagerButton {
    background-color: #54cbe0;
    background-image: -moz-linear-gradient(center top, #54cbe0 0px, #189fb7 100%);
    border: 0 none;
    color: white;
    height: 28px;
}

div.RadGrid_Silk .rgPager .rgPagerButton:hover {
    background-color: #00a9c7;
    background-image: -moz-linear-gradient(center top, #00a9c7 0px, #007d93 100%);
}

I hope this helps.

Regards,
Galin
Telerik

 

 

[Jon]

Hi Galin,

Thanks for that however it doesn't work.  Looking at the CSS inspector it seems to be a different set of css needed?  The buttons I'm meaning are the start, previous, numbers, next and end selectors...

Looking forward to seeing the altered css as I think it will look great once the blue is introduced :)

Regards

Jon

[Galin]

Hello Jon,

In this case you cannot achieve this only with CSS in all browsers. Otherwise you should override the sprite image. Please use the following CSS rule and the attached image to this post

div.RadGrid_Silk .rgFilter,
div.RadGrid_Silk .rgPageFirst,
div.RadGrid_Silk .rgPagePrev,
div.RadGrid_Silk .rgPageNext,
div.RadGrid_Silk .rgPageLast {
    background-image: url("grid_sprite.png");
}

I hope this helps.

Regards,
Galin
Telerik

 

 

[Jon]

Galin that looks great !  Many thanks for that.

The little accents of colour on the page really help with the Silk skin.  

Best Regards

Jon