Pagination button colors

[Oliver]

Quick question.  I see you can change the colors and fonts in RadGrid using VSB, but how do you change just pagination buttons at the bottom?  I just want to do a simple color change so the page buttons match the button colors on my site.  Also, is there anything you can do other than get in the code when VSB won't accept CSS changes?  I've tried to change the header font several times and it just won't accept it.  Thanks in advance!

[Shinu]

Hello Oliver,


Add the css on page to change the appearance of buttons in pager.

style:

<style type="text/css">
    .rgPager, .rgPager a
    {
        color: Red !important;
    }
</style>

And the blog post "How To Override Styles in a RadControl for ASP.NET AJAX' Embedded Skin"  is explains the same.


-Shinu.

[Oliver]

Thanks but that didn't work.  I added this code but all it did was change the background color and font color behind the page numbers, not change the color of the actual buttons.

.rgPager, .rgPager a
        {
            color: Red;
            background-color:Yellow;
        }

I want to change the actual button color for the previous/next buttons as well as the combobox/button which specifies items per page.  Right now they're a lavender color in the Web 2.0 color scheme.  How would I make them yellow instead?  And how do I assign a new color for their hover effects?

Thanks

[Oliver]

There are images for the paging buttons but I thought telerik used sprites with embedded CSS which could be modified?  I don't want to change the image but I do want to change the color displayed.

PagingFirst.gif
PagingLast.gif
PagingNext.gif
PagingPrevious.gif

[Dimo]

Hi Oliver,

You can change RadGrid buttons' colors only by editing the sprite image manually OR by using the "Colorize" or "Shift colors" tools of the VSB.

Here are some resources and videos about the Visual Style Builder:

http://www.telerik.com/help/aspnet-ajax/createcustomskin.html

>> I've tried to change the header font several times and it just won't accept it.

This can happen if the specified font style is overridden by some other CSS rule with higher specificity or by a CSS rule targeted at a lower element in the DOM tree. For example if you set font-size:12px for <table>s, this will be overridden by font-size:14px for <td>s. Such problems are easily tracked with Firebug.

Greetings,
Dimo
the Telerik team

[Oliver]

Thanks Dimo.  The "colorize" or "shift color" tools really don't work for this.  So I change the two colors for this sprite file and that's it?  Won't that screw up anything else that references this image?  Thx

[Dimo]

Hello Oliver,

I did not understand why you can't use the Colorize option, but anyway, if you edit the sprite image correctly (i.e. edit only the part with the pager buttons) and save it by preserving the transparent background, everything will be OK.

Kind regards,
Dimo
the Telerik team