Hi, I created custom skin for my grid. Headers of Grid bound columns display correctly, but headers of GridTemplateColumn and GridEditCommandColumn not. css in attached file.
Thanks in advance.
Lev.
======================CSS===========================
/*global*/
.RadGrid_Report {
border: 1px solid #8ba0bc;
background: #fff;
/*font: normal 12px "Segoe UI", Arial, Helvetica, sans-serif;*/
font-family: "Lucida Sans";
color: black !important;
line-height: 16px; }
.RadGrid_Report .rgMasterTable, .RadGrid_Report .rgDetailTable, .RadGrid_Report .rgGroupPanel table, .RadGrid_Report .rgCommandRow table, .RadGrid_Report .rgEditForm table, .RadGrid_Report .rgPager table {
/*font: normal 18px "Segoe UI", Arial, Helvetica, sans-serif;*/
line-height: 16px;
color: black !important;
font-size: 11pt !important;
}
.GridToolTip_Report {
font: normal 12px "Segoe UI", Arial, Helvetica, sans-serif;
line-height: 16px; }
.RadGrid_Report .rgHeader:first-child, .RadGrid_Report th.rgResizeCol:first-child, .RadGrid_Report .rgFilterRow > td:first-child, .RadGrid_Report .rgRow > td:first-child, .RadGrid_Report .rgAltRow > td:first-child {
border-left-width: 0;
padding-left: 8px; }
.RadGrid_Report .rgSave, .RadGrid_Report .rgAdd, .RadGrid_Report .rgRefresh, .RadGrid_Report .rgEdit, .RadGrid_Report .rgDel, .RadGrid_Report .rgFilter, .RadGrid_Report .rgPagePrev, .RadGrid_Report .rgPageNext, .RadGrid_Report .rgPageFirst, .RadGrid_Report .rgPageLast, .RadGrid_Report .rgExpand, .RadGrid_Report .rgCollapse, .RadGrid_Report .rgSortAsc, .RadGrid_Report .rgSortDesc, .RadGrid_Report .rgUpdate, .RadGrid_Report .rgCancel, .RadGrid_Report .rgUngroup, .RadGrid_Report .rgExpXLS, .RadGrid_Report .rgExpDOC, .RadGrid_Report .rgExpPDF, .RadGrid_Report .rgExpCSV {
background-image: url('Grid/sprite.png'); }
* html .RadGrid_Report .rgAdd,
* html .RadGrid_Report .rgRefresh,
* html .RadGrid_Report .rgEdit,
* html .RadGrid_Report .rgDel,
* html .RadGrid_Report .rgFilter,
* html .RadGrid_Report .rgPagePrev,
* html .RadGrid_Report .rgPageNext,
* html .RadGrid_Report .rgPageFirst,
* html .RadGrid_Report .rgPageLast,
* html .RadGrid_Report .rgExpand,
* html .RadGrid_Report .rgCollapse,
* html .RadGrid_Report .rgSortAsc,
* html .RadGrid_Report .rgSortDesc,
* html .RadGrid_Report .rgUpdate,
* html .RadGrid_Report .rgCancel,
* html .RadGrid_Report .rgUngroup,
* html .RadGrid_Report .rgExpXLS,
* html .RadGrid_Report .rgExpDOC,
* html .RadGrid_Report .rgExpPDF,
* html .RadGrid_Report .rgExpCSV,
* html .RadGrid_Report .rgHeaderDiv,
* html .RadGrid_Report .rgHeader,
* html .RadGrid_Report th.rgResizeCol,
* html .RadGrid_Report .rgSelectedRow,
* html .RadGrid_Report .rgSelectedRow.rgHoveredRow,
* html .RadGrid_Report .rgActiveRow,
* html .RadGrid_Report .rgHoveredRow,
* html .RadGrid_Report .rgFooterDiv,
* html .RadGrid_Report .rgFooter,
* html .RadGrid_Report .rgPager,
* html .RadGrid_Report .rgPager .rgPagerButton,
* html .RadGrid_Report .rgNumPart a:hover,
* html .RadGrid_Report .rgNumPart a:hover span,
* html .RadGrid_Report .rgNumPart a.rgCurrentPage,
* html .RadGrid_Report .rgNumPart a.rgCurrentPage span,
* html .GridReorderTop_Report,
* html .GridReorderBottom_Report,
* html .RadGrid_Report .rgGroupItem,
* html .RadGrid_Report .rgCommandRow {
background-image: url('Grid/sprite.gif'); }
/*header*/
.RadGrid_Report .rgHeaderDiv {
background: #d6e5f3 0 -8050px repeat-x url('Grid/sprite.png'); }
.rgTwoLines .rgHeaderDiv {
background-position: 0 -7550px; }
.RadGrid_Report .rgHeader, .RadGrid_Report th.rgResizeCol, .RadGrid_Report .rgHeaderWrapper
{
background-color: #113d67;
color: #fff;
border-bottom: 2px solid #999999;
border-left: 1px solid #555555;
border-right: 1px solid #555555;
border-top: 1px solid #555555;
font-family: Lucida Sans;
font-size: 11pt;
}
.RadGrid_Report .rgHeaderDiv {
border-right-color: #9babc2; }
.RadGrid_Report .rgMultiHeaderRow th.rgHeader, .RadGrid_Report .rgMultiHeaderRow th.rgResizeCol {
border: solid #8ba0bc;
border-width: 0 0 1px 1px;
background: #bdcbde 0 -2300px repeat-x url('Grid/sprite.png');
}
.RadGrid_Report th.rgSorted {
border-bottom-color: #c28a30;
background-color: #fff27e;
background-position: 0 -2600px; }
.RadGrid_Report .rgHeader, .RadGrid_Report th.rgSorted
{
font-family: Lucida Sans;
font-size: 11pt;
}
.RadGrid_Report .rgHeader a, .RadGrid_Report th.rgSorted a
{
color: #ffffff;
font-weight: bold;
}
.RadGrid_Report th.rgSorted a
{
color: #000000;
font-weight: bold;
}
.RadGrid_Report .rgRow td, .RadGrid_Report .rgAltRow td, .RadGrid_Report .rgEditRow td, .RadGrid_Report .rgFooter td {
border-style: solid;
border-width: 0 0 1px 1px;
}
.RadGrid_Report .rgRow td, .RadGrid_Report .rgAltRow td {
border-color: #555555;
}
.RadGrid_Report .rgRow .rgSorted, .RadGrid_Report .rgAltRow .rgSorted {
background-color: #ecf2f9; }
.RadGrid_Report .rgSelectedRow .rgSorted, .RadGrid_Report .rgActiveRow .rgSorted, .RadGrid_Report .rgHoveredRow .rgSorted, .RadGrid_Report .rgEditRow .rgSorted {
background-color: transparent; }
.RadGrid_Report .rgRow a, .RadGrid_Report .rgAltRow a, .RadGrid_Report .rgEditRow a, .RadGrid_Report .rgFooter a, .RadGrid_Report .rgEditForm a {
color: #384e73; }
.RadGrid_Report .rgMasterTable .rgSelectedCell {
background: #f8d05c 0 -3900px repeat-x url('Grid/sprite.png'); }
.RadGrid_Report .rgSelectedRow
{
background: #f8d05c 0 -3900px repeat-x url('Grid/sprite.png');
}
.RadGrid_Report .rgSelectedRow > td {
background-position: 0 100%;
background-repeat: repeat-x; }
.RadGrid_Report .rgSelectedRow.rgHoveredRow {
background: #fcebb9 0 -3200px repeat-x url('Grid/sprite.png'); }
.RadGrid_Report .rgSelectedRow.rgHoveredRow td {
background: #d8e4bc; }
/*rows*/
* + html .RadGrid_Report .rgSelectedRow .rgSorted, * html .RadGrid_Report .rgSelectedRow .rgSorted {
background-color: #ffcb60; }
.RadGrid_Report .rgRow:hover
{
background: #d8e4bc;
}
.RadGrid_Report .rgAltRow:hover
{
background: #d8e4bc;
}
.RadGrid_Report .rgMasterTable .rgActiveCell, .RadGrid_Report .rgActiveRow, .RadGrid_Report .rgHoveredRow {
background: #d8e4bc; }
* + html .RadGrid_Report .rgActiveRow .rgSorted, * + html .RadGrid_Report .rgHoveredRow .rgSorted {
background-color: #ecf4ff; }
* html .RadGrid_Report .rgActiveRow .rgSorted, * html .RadGrid_Report .rgHoveredRow .rgSorted {
background-color: #ecf4ff; }
.RadGrid_Report .rgEditRow {
background: #ebebeb; }
* + html .RadGrid_Report .rgEditRow .rgSorted, * html .RadGrid_Report .rgEditRow .rgSorted {
background-color: #ffe5ad; }
.RadGrid_Report .rgSelectedRow td, .RadGrid_Report .rgActiveRow td, .RadGrid_Report .rgHoveredRow td, .RadGrid_Report .rgEditRow td {
padding-left: 8px; }
.RadGrid_Report .rgSelectedRow td {
border-bottom-color: #7ba0cd;
}
.RadGrid_Report .rgActiveRow td, .RadGrid_Report .rgHoveredRow td, .RadGrid_Report .rgEditRow td {
border-bottom-color: #d0d7e5; }
.RadGrid_Report .rgDrag {
background-image: url('Grid/rgDrag.gif'); }
.RadGrid_Report .rgFooterDiv, .RadGrid_Report .rgFooter, .RadGrid_Report .rgFooterWrapper {
background: #bbcee4 0 -6500px repeat-x url('Grid/sprite.png'); }
.RadGrid_Report .rgFooter td, .RadGrid_Report .rgFooterWrapper {
border-width: 1px 0 0;
border-color: #8ba0bc #fff #fff;
padding-left: 8px; }
.RadGrid_Report .rgPager .rgStatus {
border: 1px solid;
border-width: 1px 1px 0 0;
border-color: #8ba0bc; }
.RadGrid_Report .rgStatus div {
background-image: url('Common/loading_small.gif'); }
.RadGrid_Report .rgPager {
background: #b4c5d9 0 -6999px repeat-x url('Grid/sprite.png');
color: #384e73; }
.RadGrid_Report td.rgPagerCell {
border-top: 1px solid #8ba0bc;
border-left: 1px solid #f5faff; }
.RadGrid_Report .rgPageFirst {
margin: 0 3px 0 0;
background-position: 0 -550px; }
.RadGrid_Report .rgPageFirst:hover {
background-position: 0 -600px; }
.RadGrid_Report .rgPagePrev {
margin: 0 3px 0 0;
background-position: 0 -700px; }
.RadGrid_Report .rgPagePrev:hover {
background-position: 0 -750px; }
.RadGrid_Report .rgPageNext {
margin: 0 0 0 3px;
background-position: 0 -850px; }
.RadGrid_Report .rgPageNext:hover {
background-position: 0 -900px; }
.RadGrid_Report .rgPageLast {
margin: 0 0 0 3px;
background-position: 0 -1000px; }
.RadGrid_Report .rgPageLast:hover {
background-position: 0 -1050px; }
.RadGrid_Report .rgPager .rgPagerButton {
border-color: #7793b9;
background: #e8f1fc repeat-x 0 -1550px url('Grid/sprite.png');
color: #00156e;
font: normal 12px "Segoe UI", Arial, Helvetica, sans-serif;
line-height: 12px; }
.RadGrid_Report .rgNumPart a {
color: #384e73; }
.RadGrid_Report .rgNumPart a:hover, .RadGrid_Report .rgNumPart a.rgCurrentPage {
background: no-repeat url('Grid/sprite.png'); }
.RadGrid_Report .rgNumPart a:hover span, .RadGrid_Report .rgNumPart a.rgCurrentPage span {
background: no-repeat url('Grid/sprite.png'); }
.RadGrid_Report .rgNumPart a:hover {
background-position: 100% -1250px;
color: #1e395b; }
.RadGrid_Report .rgNumPart a:hover span {
background-position: 0 -1150px; }
.RadGrid_Report .rgNumPart a.rgCurrentPage {
background-position: 100% -1450px;
color: #384e73; }
.RadGrid_Report .rgNumPart a.rgCurrentPage:hover {
background-position: 100% -1450px;
color: #384e73; }
.RadGrid_Report .rgNumPart a.rgCurrentPage span, .RadGrid_Report .rgNumPart a.rgCurrentPage:hover span {
background-position: 0 -1350px; }
.RadGrid_Report .rgHeader .rgSortAsc {
background-position: 3px -147px;
height: 10px; }
.RadGrid_Report .rgHeader .rgSortDesc {
background-position: 3px -197px;
height: 10px; }
/*footer*/
/*status*/
/*pager*/
/*sorting, reordering*/
.GridReorderTop_Report {
height: 12px;
background: 0 0 no-repeat url('Grid/sprite.png'); }
.GridReorderBottom_Report {
height: 12px;
background: 0 0 no-repeat url('Grid/sprite.png');
background-position: 0 -50px; }
/*filtering*/
.RadGrid_Report .rgFilterRow {
background: #113d67; }
.RadGrid_Report .rgFilterRow td {
border-style: solid;
border-color: #8ba0bc;
border-width: 0 0 1px 1px; }
.RadGrid_Report .rgFilter {
background-position: 0 -300px; }
.RadGrid_Report .rgFilter:hover {
background-position: 0 -350px; }
.RadGrid_Report .rgFilterActive {
background-position: 0 -400px; }
.RadGrid_Report .rgFilterActive:hover {
background-position: 0 -400px; }
.RadGrid_Report .rgFilterBox {
border-color: #9babc2;
font: normal 12px "Segoe UI", Arial, Helvetica, sans-serif;
color: #000; }
/*filter context menu*/
.RadMenu_Report .rgHCMClear, .RadMenu_Report .rgHCMFilter {
border-color: #a7bedb #7d98bd #a3bad8;
background: #e8f1fc center -23px repeat-x url('FormDecorator/ButtonSprites.gif');
color: #00156e;
font-family: "segoe ui",arial,sans-serif; }
.RadMenu_Report .rgHCMClear:hover, .RadMenu_Report .rgHCMFilter:hover {
border-color: #d8ca95 #b9a073 #c6ba9d;
background-position: center -67px;
background-color: #ffe18a;
color: #000; }
/*context menu*/
.GridContextMenu_Report .rmLeftImage {
background-image: url('../Common/Grid/contextMenu.gif'); }
.GridContextMenu_Report .rgHCMSortAsc .rmLeftImage {
background-position: 0 0; }
.GridContextMenu_Report .rgHCMSortDesc .rmLeftImage {
background-position: 0 -40px; }
.GridContextMenu_Report .rgHCMUnsort .rmLeftImage {
background-position: 0 -80px; }
.GridContextMenu_Report .rgHCMGroup .rmLeftImage {
background-position: 0 -120px; }
.GridContextMenu_Report .rgHCMUngroup .rmLeftImage {
background-position: 0 -160px; }
.GridContextMenu_Report .rgHCMCols .rmLeftImage {
background-position: 0 -200px; }
.GridContextMenu_Report .rgHCMFilter .rmLeftImage {
background-position: 0 -240px; }
.GridContextMenu_Report .rgHCMUnfilter .rmLeftImage {
background-position: 0 -280px; }
/*grouping*/
.RadGrid_Report .rgGroupPanel {
border: 0 solid #8ba0bc;
border-bottom-width: 1px;
background: white; }
.RadGrid_Report .rgGroupPanel td {
border: 0;
padding: 3px 4px;
vertical-align: middle; }
.RadGrid_Report .rgGroupPanel td td {
padding: 0; }
.RadGrid_Report .rgGroupPanel .rgSortAsc {
background-position: 4px -144px; }
.RadGrid_Report .rgGroupPanel .rgSortDesc {
background-position: 4px -194px; }
.RadGrid_Report .rgUngroup {
background-position: 0 -7500px; }
.RadGrid_Report .rgGroupItem {
border: 1px solid #7793b9;
background: #e8f1fc repeat-x 0 -1550px url('Grid/sprite.png');
color: #00156e; }
.RadGrid_Report .rgGroupHeader {
background: #dae7f5;
font-size: 1.1em;
line-height: 21px;
color: black; }
.RadGrid_Report .rgGroupHeader td {
border-bottom: 1px solid #dadcdd;
padding-left: 8px; }
.RadGrid_Report td.rgGroupCol {
/*background: #dae7f5;*/
border-color: #dae7f5; }
.RadGrid_Report .RadGrid_Report {
background: #dae7f5;
border-color: #dae7f5; }
.RadGrid_Report td.rgExpandCol {
background: #dae7f5;
border-color: #dae7f5; }
.RadGrid_Report .rgGroupHeader .rgExpand {
background-position: 5px -495px; }
.RadGrid_Report .rgGroupHeader .rgCollapse {
background-position: 3px -93px; }
.RadGrid_Report .rgEditForm {
border-bottom: 1px solid #8ba0bc; }
.RadGrid_Report .rgUpdate {
background-position: 0 -1800px; }
.RadGrid_Report .rgCancel {
background-position: 0 -1850px; }
.RadGrid_Report .rgCommandRow .rgCancel {
background-position: 3px -1877px; }
.RadGrid_Report .rgDetailTable {
border-color: #688caf; }
.RadGrid_Report .rgExpand {
background-position: 5px -496px; }
.RadGrid_Report .rgCollapse {
background-position: 3px -94px; }
.RadGrid_Report .rgCommandRow {
background: #bdcbde 0 -2100px repeat-x url('Grid/sprite.png');
color: #333; }
.RadGrid_Report .rgCommandCell {
border: 0;
padding: 0; }
.RadGrid_Report thead .rgCommandCell {
border-bottom: 1px solid #8ba0bc; }
.RadGrid_Report .rgCommandTable td {
border: 0;
padding: 2px 7px; }
.RadGrid_Report .rgCommandRow a {
color: #242424;
text-decoration: none; }
.RadGrid_Report .rgAdd {
margin-right: 3px;
background-position: 0 -1650px; }
.RadGrid_Report .rgSave {
background-position: 3px -1825px; }
.RadGrid_Report .rgRefresh {
margin-right: 3px;
background-position: 0 -1600px; }
.RadGrid_Report .rgEdit {
background-position: 0 -1700px; }
.RadGrid_Report .rgDel {
background-position: 0 -1750px; }
.RadGrid_Report .rgExpXLS, .RadGrid_Report .rgExpDOC, .RadGrid_Report .rgExpPDF, .RadGrid_Report .rgExpCSV {
background-image: url('../Common/Grid/export.gif'); }
.RadGrid_Report .rgExpXLS {
background-position: 0 0; }
.RadGrid_Report .rgExpDOC {
background-position: 0 -50px; }
.RadGrid_Report .rgExpPDF {
background-position: 0 -100px; }
.RadGrid_Report .rgExpCSV {
background-position: 0 -150px; }
/*editing*/
/*hierarchy*/
/*command row*/
/*multirow select*/
.rgCellSelectorArea_Report, .GridRowSelector_Report {
background: #00156e; }
/*row drag n drop*/
.GridItemDropIndicator_Report {
border-top: 1px dashed #00156e; }
/*tooltip*/
.GridToolTip_Report {
border: 1px solid #6187b8;
padding: 3px;
background: #d7e3f2;
color: #333; }
/*rtl*/
.RadGridRTL_Report .rgHeader:first-child, .RadGridRTL_Report th.rgResizeCol:first-child, .RadGridRTL_Report .rgFilterRow > td:first-child, .RadGridRTL_Report .rgRow > td:first-child, .RadGridRTL_Report .rgAltRow > td:first-child {
border-left-width: 1px;
padding-left: 7px; }
.RadGridRTL_Report .rgPageFirst {
background-position: 0 -1000px; }
.RadGridRTL_Report .rgPageFirst:hover {
background-position: 0 -1050px; }
.RadGridRTL_Report .rgPagePrev {
margin: 0 0 0 3px;
background-position: 0 -850px; }
.RadGridRTL_Report .rgPagePrev:hover {
background-position: 0 -900px; }
.RadGridRTL_Report .rgPageNext {
margin: 0 3px 0 0;
background-position: 0 -700px; }
.RadGridRTL_Report .rgPageNext:hover {
background-position: 0 -750px; }
.RadGridRTL_Report .rgPageLast {
background-position: 0 -550px; }
.RadGridRTL_Report .rgPageLast:hover {
background-position: 0 -600px; }
.RadGridRTL_Report .rgGroupHeader .rgExpand {
background-position: -20px -495px; }
.RadGridRTL_Report .rgExpand {
background-position: -20px -496px; }
.RadGridRTL_Report .rgGroupHeader .rgCollapse {
background-position: -20px -93px; }
/*
body * {
font-family: "Lucida Sans" ;
color: black;
}
*/
1 Answer, 1 is accepted
How do you created your custom skin? Did you use the new and recommended Theme Builder or the outdated and unsupported Visual Style Builder?
My advice is to create a new skin via the Theme Builder and after importing the generated css files into the page with RadGrid to set its RenderMode property to Lightweight.
If the problem still persists, please provide a simple runnable project where we can observe the appearance problem so that we can provide further assistance.
Best regards,
Rumen
Progress Telerik