Hi, I am trying to figure if it is possible to change the style of the paging buttons.
I using the Boostrap theme and it looks like that :
and I want to make it like this:
it is possible? which changes do I need to do on CSS?
1 Answer, 1 is accepted
Hello Daniel,
For such customization it is our recommendation to inspect the rendered DOM elements and use the added class names as selectors. Nevertheless, here is a CSS for changing the styles close to your requirement:
<style>
.k-pager-numbers .k-link, .k-pager-numbers .k-link:link {
color: #333;
background: none;
border: none;
}
.k-pager-numbers .k-link:focus{
box-shadow: none;
}
.k-pager-numbers .k-link.k-state-selected{
color: #30ace6;
font-weight: bold;
}And here is a link to the example:
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Iron
Greate Thanks.
can I ask for more 2 questions please:
1. is it possible to center only the numbers and the arrows?
2. I also struggle with the style of the GridColumnMenuFilter in order to achieve this appearance:
For centering the pager, you can try and set padding-left to the container:
.k-pager-wrap.k-pager.k-widget.k-grid-pager {
padding-left: 150px;
}
The ColumnMenu renders standard buttons and DropDownList, so you can inspect them outside of the Grid to see what class names are rendered in the elements. Then, you can use those class names as selectors to customize them with CSS. For example, the following selectors can be used for customizing the buttons:
.kendo-grid-filter-menu-container .k-button{
color: red;
}
.kendo-grid-filter-menu-container .k-button.k-primary{
color: red;
}The color is added just as an example.
The same principal (inspecting the elements) can be applied to every component that you want to customize (including the DropDownList)
Rank 1
Iron
Iron
With the latest version you can try the following approach for temporarily disable the closing of the columnMenu, so you can inspect the elements: