Change Pager color when using Pageable with Kendo Grid

[Anna]

@(Html.Kendo().Grid<ViewModel>(Model)<br>
    .Name("UserGrid")<br>
    .Columns(columns =><br>
    {
        columns.Bound(p => p.Name);
        columns.Bound(p => p.Status);
    columns.Bound(p => p.Id);<br>                })<br>                .Pageable(pager => pager.PageSizes(new[] { 10, 20, 50, 100 }))<br>                .Sortable(sortable => sortable<br>                    .AllowUnsort(true)<br>                    .SortMode(GridSortMode.MultipleColumn)<br>                    .ShowIndexes(true))<br>                .Filterable()<br>                )

[Anna]

Sorry for the format this is my first post here.
I am having troubles with changing the color of the pager -> The pagenumber when paging is used. Is there a way to easily change its color? I could not find a solution for my problem. The default color is blue which does not at all fit the to the rest of the page.
I don't think my code is relevant but beneath is basically my code.


 

@(Html.Kendo().Grid<ViewModel>(Model)

 .Name("UserGrid")

 .Columns(columns =>

  {

    columns.Bound(p => p.Name);

    columns.Bound(p => p.Status);

    columns.Bound(p => p.Id);

   })

  .Pageable(pager => pager.PageSizes(new[] { 10, 20, 50, 100 }))

  .Sortable(sortable => sortable

    .AllowUnsort(true)

    .SortMode(GridSortMode.MultipleColumn)

    .ShowIndexes(true)) 

  .Filterable()

)

 

Thanks in advance,

Anna

[Ivan Danchev]

Hi Anna,

You can do that with CSS. Here's a CSS rule that shows how to change selected page number background-color, border-color and color:

<style>
	.k-pager-numbers .k-link.k-state-selected {
		border-color: lightgreen;
		color: #fff;
		background-color: lightgreen;
	}
</style>

The result is the following: screenshot.

Give this a try after replacing the colors with the ones you want and let us know whether it works as expected.

Regards,
Ivan Danchev
Progress Telerik