Kendo legacy theme's problems - css

Question

This is a self-answered question
I'd like to use Kendo legacy themes for my app, since default themes are extremely ugly. I chose Office 2007 theme. I've included the following files:
<link href="~/Content/kendo/legacy/telerik.common.css" rel="stylesheet" />
<link href="~/Content/kendo/legacy/telerik.office2007.min.css" rel="stylesheet" />
I came across several problems with this themes that I'm not able to get ride of them and any help is appreciated.
Aligning buttons. Custom buttons are higher in the grid than the Grid's buttons.
Paging. Current page's number is shown in the corner. Also pagination's buttons are reverse, and page number's box is too big.
Multi select's wheel doesn't stop, even after loading items!
And finally, window's minimize button isn't visible.
This is the CSS I have used for buttons:
.k-grid .k-button{
width: 10px;
min-width: 10px !important;
}
.k-grid-custom,
.k-grid-custom:hover{
background-image: url('/Content/Images/Icon/icon.png');
height: 20px;
background-position: center;
background-repeat: no-repeat;
}
.k-edit{
background-image: url('/Content/Images/Icon/Edit.png');
background-position: 0 0 ;
}

Answer 1

Well, I worked around the multiselect's problem with robbing some of CSS from kendo.common.css.
.k-multiselect-wrap {
position: relative;
border-width: 0;
border-style: solid;
border-radius: 4px;
border-color: #c5c5c5;
background-color: #FFF;
min-height: 2.04em;
}
.k-multiselect-wrap .k-input {
background-color: transparent;
height: 1.31em;
line-height: 1.31em;
padding: .18em 0;
text-indent: .33em;
border: 0;
margin: 1px 0 0;
float: left;
}
.k-multiselect-wrap li {
margin: 1px 0 1px 1px;
padding: .1em 1.6em .1em .4em;
line-height: 1.5em;
float: left;
position: relative;
}
.k-autocomplete .k-loading, .k-multiselect .k-loading {
position: absolute;
right: 3px;
bottom: 4px;
}
.k-multiselect .k-loading-hidden {
visibility: hidden;
}
.k-multiselect-wrap .k-select {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding: .1em .2em;
}
You can hide current page's number:
.k-pager-numbers .k-current-page {
display: none;
}
Page numbers' size:
.k-pager-wrap .k-dropdown {
width: 4.500em;
}
For pagination's arrows, if you're using left-to-right you won't have any problem. In case you're using right-to-left, k-rtl, replace following CSS in telerik.common.css, line #230:
.k-i-seek-w { background-position: -48px -192px; }
.k-i-arrow-w { background-position: -32px -192px; }
.k-i-arrow-e { background-position: -16px -192px; }
.k-i-seek-e { background-position: 0 -192px; }
.k-state-disabled .k-i-seek-w { background-position: -48px -208px; }
.k-state-disabled .k-i-arrow-w { background-position: -32px -208px; }
.k-state-disabled .k-i-arrow-e { background-position: -16px -208px; }
.k-state-disabled .k-i-seek-e { background-position: 0 -208px; }
.k-state-hover .k-i-seek-w { background-position: -48px -224px; }
.k-state-hover .k-i-arrow-w { background-position: -32px -224px; }
.k-state-hover .k-i-arrow-e { background-position: -16px -224px; }
.k-state-hover .k-i-seek-e { background-position: 0 -224px; }
For the minimize button in Kendo Window, it seems they forgot to add the CSS!
.k-i-minimize {background-position: -32px -368px; }
Use the following CSS to align custom buttons with grid's buttons.
.k-grid .k-button {
vertical-align: bottom;
}