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

Pagination button colors

6 Answers 348 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Oliver
Top achievements
Rank 1
Oliver asked on 11 Aug 2010, 12:49 AM
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!

6 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 11 Aug 2010, 07:45 AM
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.
0
Oliver
Top achievements
Rank 1
answered on 13 Aug 2010, 05:59 PM
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
0
Oliver
Top achievements
Rank 1
answered on 13 Aug 2010, 06:38 PM

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
0
Dimo
Telerik team
answered on 16 Aug 2010, 04:58 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Oliver
Top achievements
Rank 1
answered on 16 Aug 2010, 08:25 PM
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
0
Dimo
Telerik team
answered on 17 Aug 2010, 09:35 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Oliver
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Oliver
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or