This is a migrated thread and some comments may be shown as answers.

Silk skin on Pager

4 Answers 90 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 05 Sep 2014, 11:29 AM
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

4 Answers, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 10 Sep 2014, 11:19 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jon
Top achievements
Rank 1
answered on 10 Sep 2014, 05:28 PM
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
0
Accepted
Galin
Telerik team
answered on 15 Sep 2014, 04:23 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jon
Top achievements
Rank 1
answered on 16 Sep 2014, 07:57 AM
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
Tags
Grid
Asked by
Jon
Top achievements
Rank 1
Answers by
Galin
Telerik team
Jon
Top achievements
Rank 1
Share this question
or