[Solved] Grid - Custom Skin Problems

[Peter]

Hi,

I've created my own skin for a RadGrid with RowHover based on the office 2007 visuals. I have modified it slightly so when you hover over a row which has been selected it doesn't change colour and when the row is selected it's color changes instantly. I've now ran into problems when sorting. I can't seem to get the cell which has been sorted and selected the same colour as the row selected. This only happens when I hover over the row selected and not the cell which is being sorted.

The CSS code I've been looking at modifing is:

*+html .RadGrid_MySkin .rgActiveRow .rgSorted,
*+html .RadGrid_MySkin .rgHoveredRow .rgSorted{background-color:#ecf4ff}
* html .RadGrid_MySkin .rgActiveRow .rgSorted,
* html .RadGrid_MySkin .rgHoveredRow .rgSorted{background-color:#ecf4ff}

Though I can't seem to come up with anything to fix the problem.

I've attached a screenshot of the problem and my CSS code.

/*Telerik RadGrid MySkin Skin*/

/*global*/

.RadGrid_MySkin
{
    border:1px solid #688caf;
    background:#fff;
    color:#333;
}

.RadGrid_MySkin,
.RadGrid_MySkin .rgMasterTable,
.RadGrid_MySkin .rgDetailTable,
.RadGrid_MySkin .rgGroupPanel table,
.RadGrid_MySkin .rgCommandRow table,
.RadGrid_MySkin .rgEditForm table,
.RadGrid_MySkin .rgPager table,
.GridToolTip_MySkin
{
    font:12px/16px "segoe ui",arial,sans-serif;
}

.RadGrid_MySkin .rgMasterTable,
.RadGrid_MySkin .rgDetailTable
{
    border-collapse:separate;
}

.RadGrid_MySkin .rgRow,
.RadGrid_MySkin .rgAltRow,
.RadGrid_MySkin .rgHeader,
.RadGrid_MySkin .rgResizeCol,
.RadGrid_MySkin .rgPager,
.RadGrid_MySkin .rgGroupPanel,
.RadGrid_MySkin .rgGroupHeader
{
    cursor:default;
}

.RadGrid_MySkin input[type="image"]
{
    cursor:pointer;
}

.RadGrid_MySkin .rgRow td,
.RadGrid_MySkin .rgAltRow td,
.RadGrid_MySkin .rgEditRow td,
.RadGrid_MySkin .rgFooter td,
.RadGrid_MySkin .rgFilterRow td,
.RadGrid_MySkin .rgHeader,
.RadGrid_MySkin .rgResizeCol,
.RadGrid_MySkin .rgGroupHeader td
{
    padding-left:7px;
    padding-right:7px;
}

.RadGrid_MySkin .rgClipCells .rgHeader,
.RadGrid_MySkin .rgClipCells .rgRow>td,
.RadGrid_MySkin .rgClipCells .rgAltRow>td
{
    overflow:hidden;
}

.RadGrid_MySkin .rgHeader:first-child,
.RadGrid_MySkin th.rgResizeCol:first-child,
.RadGrid_MySkin .rgFilterRow>td:first-child,
.RadGrid_MySkin .rgRow>td:first-child,
.RadGrid_MySkin .rgAltRow>td:first-child
{
    border-left:0;
    padding-left:8px;
}

.RadGrid_MySkin .rgAdd,
.RadGrid_MySkin .rgRefresh,
.RadGrid_MySkin .rgEdit,
.RadGrid_MySkin .rgDel,
.RadGrid_MySkin .rgFilter,
.RadGrid_MySkin .rgPagePrev,
.RadGrid_MySkin .rgPageNext,
.RadGrid_MySkin .rgPageFirst,
.RadGrid_MySkin .rgPageLast,
.RadGrid_MySkin .rgExpand,
.RadGrid_MySkin .rgCollapse,
.RadGrid_MySkin .rgSortAsc,
.RadGrid_MySkin .rgSortDesc,
.RadGrid_MySkin .rgUpdate,
.RadGrid_MySkin .rgCancel,
.RadGrid_MySkin .rgUngroup
{
    width:16px;
    height:16px;
    border:0;
    margin:0;
    padding:0;
    background-color:transparent;
    background-image:url('Grid/sprite.gif');
    background-repeat:no-repeat;
    vertical-align:middle;
    font-size:1px;
    cursor:pointer;
}

.RadGrid_MySkin .rgGroupItem input,
.RadGrid_MySkin .rgCommandRow img,
.RadGrid_MySkin .rgHeader input,
.RadGrid_MySkin .rgFilterRow img,
.RadGrid_MySkin .rgFilterRow input,
.RadGrid_MySkin .rgPager img
{
    vertical-align:middle;
}

/*header*/

.RadGrid_MySkin .rgHeaderDiv
{
    background:#d6e5f3 0 -5900px repeat-x url('Grid/sprite.gif');
}
.rgTwoLines .rgHeaderDiv
{
    background-position:0 -6200px;
}

.rgNoScrollImage .rgHeaderDiv
{
    background-image:none;
}

.RadGrid_MySkin .rgHeader,
.RadGrid_MySkin th.rgResizeCol
{
    border:solid #5d8cc9;
    border-width:0 0 1px 1px;
    padding-top:5px;
    padding-bottom:4px;
    background:0 -2300px repeat-x #c3d8f1 url('Grid/sprite.gif');
    text-align:left;
    font-weight:normal;
}

.RadGrid_MySkin th.rgSorted
{
    border-bottom-color:#ff9b35;
    background-color:#ffca5e;
    background-position:0 -2600px;
}

.RadGrid_MySkin .rgHeader,
.RadGrid_MySkin .rgHeader a
{
    color:#00156e;
    text-decoration:none;
}

.RadGrid_MySkin th.rgSorted,
.RadGrid_MySkin th.rgSorted a
{
    color:#000;
}

.RadGrid_MySkin .rgCheck
{
    height:15px;
    margin:0;
    padding:0;
}

/*rows*/

.RadGrid_MySkin .rgRow td,
.RadGrid_MySkin .rgAltRow td,
.RadGrid_MySkin .rgEditRow td,
.RadGrid_MySkin .rgFooter td
{
    border:1px solid;
    border-top:0;
    border-right:0;
    padding-top:4px;
    padding-bottom:3px;
}

.RadGrid_MySkin .rgRow td,
.RadGrid_MySkin .rgAltRow td
{
    border-color:#d0d7e5;
}

.RadGrid_MySkin .rgRow .rgSorted,
.RadGrid_MySkin .rgAltRow .rgSorted
{
    background-color:#f2f2f2;
}

.RadGrid_MySkin .rgSelectedRow .rgSorted,
.RadGrid_MySkin .rgActiveRow .rgSorted,
.RadGrid_MySkin .rgHoveredRow .rgSorted,
.RadGrid_MySkin .rgEditRow .rgSorted
{
    background-color:transparent;
}

.RadGrid_MySkin .rgRow a,
.RadGrid_MySkin .rgAltRow a,
.RadGrid_MySkin .rgEditRow a,
.RadGrid_MySkin .rgFooter a,
.RadGrid_MySkin .rgEditForm a
{
    color:#00156e;
}

.RadGrid_MySkin .rgSelectedRow
{
    background:#ffcb60 0 -3900px repeat-x url('Grid/sprite.gif');
}
*+html .RadGrid_MySkin .rgSelectedRow .rgSorted{background-color:#ffcb60}
* html .RadGrid_MySkin .rgSelectedRow .rgSorted{background-color:#ffcb60}

.RadGrid_MySkin .rgActiveRow,
.RadGrid_MySkin .rgHoveredRow
{
    background:#ecf4ff;
}
*+html .RadGrid_MySkin .rgActiveRow .rgSorted,
*+html .RadGrid_MySkin .rgHoveredRow .rgSorted{background-color:#ecf4ff}
* html .RadGrid_MySkin .rgActiveRow .rgSorted,
* html .RadGrid_MySkin .rgHoveredRow .rgSorted{background-color:#ecf4ff}

.RadGrid_MySkin .rgEditRow
{
    background:#ffe5ad;
}
*+html .RadGrid_MySkin .rgEditRow .rgSorted{background-color:#ffe5ad}
* html .RadGrid_MySkin .rgEditRow .rgSorted{background-color:#ffe5ad}

.RadGrid_MySkin .rgSelectedRow td,
.RadGrid_MySkin .rgActiveRow td,
.RadGrid_MySkin .rgHoveredRow td,
.RadGrid_MySkin .rgEditRow td
{

}

.RadGrid_MySkin .rgSelectedRow td
{
    border-bottom-color:#ff9b35;
}


.RadGrid_MySkin .rgSelectedRow:hover
{
    background:#ffcb60 0 -3900px repeat-x url('Grid/sprite.gif');
}
*+html .RadGrid_MySkin .rgSelectedRow:hover .rgSorted:hover{background-color:#ffcb60}
* html .RadGrid_MySkin .rgSelectedRow:hover .rgSorted:hover{background-color:#ffcb60}

.RadGrid_MySkin .rgSelectedRow:hover td,
{

}

.RadGrid_MySkin .rgSelectedRow:hover td
{
    border-bottom-color:#ffcb60;
}



.RadGrid_MySkin .rgActiveRow td,
.RadGrid_MySkin .rgHoveredRow td,
.RadGrid_MySkin .rgEditRow td
{
    border-bottom-color:#d0d7e5;
}

/*footer*/

.RadGrid_MySkin .rgFooterDiv,
.RadGrid_MySkin .rgFooter
{
    background:#9ab5db 0 -6500px repeat-x url('Grid/sprite.gif');
}

.RadGrid_MySkin .rgFooter td
{
    border-width:1px 0;
    border-color:#567db0 #fff #fff;
    padding-left:8px;
}

/*status*/

.RadGrid_MySkin .rgPager .rgStatus
{
    width:35px;
    border:0;
    border-top:1px solid #5d8cc9;
    border-right:1px solid #9cb9dc;
    border-color:#5d8cc9 #9cb9dc;
    padding:3px;
}

.RadGrid_MySkin .rgStatus div
{
    width:24px;
    height:24px;
    overflow:hidden;
    border:0;
    margin:0 auto;
    padding:0;
    background:transparent center center no-repeat url('Common/loading_small.gif');
    text-indent:-2222px;
}

/*pager*/

.RadGrid_MySkin .rgPager
{
    background:#ecf3fc 0 -7000px repeat-x url('Grid/sprite.gif');
}

.RadGrid_MySkin .rgPager td
{
    padding:0;
}

.RadGrid_MySkin .rgPager .rgPagerCell
{
    border:0;
    border-top:1px solid #5d8cc9;
    border-left:1px solid #fff;
    padding:5px 0;
}

.RadGrid_MySkin .rgWrap
{
    float:left;
    padding:0 10px;
    line-height:22px;
    white-space:nowrap;
}

.RadGrid_MySkin .rgArrPart1
{
    padding-right:0;
}

.RadGrid_MySkin .rgArrPart2
{
    padding-left:0;
}

.RadGrid_MySkin .rgInfoPart
{
    float:right;
    color:#333;
}

.RadGrid_MySkin .rgInfoPart strong
{
    font-weight:normal;
    color:#000;
}

.RadGrid_MySkin .rgArrPart1 img,
.RadGrid_MySkin .rgArrPart2 img
{
    margin:0 8px;
}

.RadGrid_MySkin .rgPageFirst,
.RadGrid_MySkin .rgPagePrev,
.RadGrid_MySkin .rgPageNext,
.RadGrid_MySkin .rgPageLast
{
    width:17px;
    height:22px;
    vertical-align:top;
}

.RadGrid_MySkin .NextPrev .rgPageFirst,
.RadGrid_MySkin .NextPrev .rgPagePrev,
.RadGrid_MySkin .NextPrev .rgPageNext,
.RadGrid_MySkin .NextPrev .rgPageLast
{
    vertical-align:middle;
}

.RadGrid_MySkin .rgPageFirst
{
    margin:0 3px 0 0;
    background-position:0 -548px;
}
.RadGrid_MySkin .rgPageFirst:hover
{
    background-position:0 -598px;
}
.RadGrid_MySkin .rgPagePrev
{
    margin:0 3px 0 0;
    background-position:0 -698px;
}
.RadGrid_MySkin .rgPagePrev:hover
{
    background-position:0 -748px;
}
.RadGrid_MySkin .rgPageNext
{
    margin:0 0 0 3px;
    background-position:0 -848px;
}
.RadGrid_MySkin .rgPageNext:hover
{
    background-position:0 -898px;
}
.RadGrid_MySkin .rgPageLast
{
    margin:0 0 0 3px;
    background-position:0 -998px;
}
.RadGrid_MySkin .rgPageLast:hover
{
    background-position:0 -1048px;
}

.RadGrid_MySkin .rgPagerButton
{
    height:22px;
    border:1px solid #7793b9;
    margin:0 14px 0 0;
    padding:0 4px 2px;
    background:#e8f1fc repeat-x 0 -1550px url('Grid/sprite.gif');
    color:#00156e;
    font:12px/12px "segoe ui",arial,sans-serif;
    vertical-align:middle;
    cursor:pointer;
}

.RadGrid_MySkin .rgNumPart
{
    padding:0;
}

.RadGrid_MySkin .NumericPages .rgNumPart
{
    padding:0 10px;
}

.RadGrid_MySkin .rgNumPart a:hover,
.RadGrid_MySkin .rgNumPart a:hover span,
.RadGrid_MySkin .rgNumPart a.rgCurrentPage,
.RadGrid_MySkin .rgNumPart a.rgCurrentPage span
{
    background:no-repeat url('Grid/sprite.gif');
}

.RadGrid_MySkin .rgNumPart a
{
    float:left;
    line-height:22px;
    margin:0;
    padding:0 5px 0 0;
    color:#00156e;
    text-decoration:none;
}

.RadGrid_MySkin .rgNumPart span
{
    float:left;
    padding:0 0 0 5px;
}

.RadGrid_MySkin .rgNumPart a:hover
{
    background-position:100% -1250px;
}

.RadGrid_MySkin .rgNumPart a:hover span
{
    background-position:0 -1150px;
    cursor:pointer;
}

.RadGrid_MySkin .rgNumPart a.rgCurrentPage,
.RadGrid_MySkin .rgNumPart a.rgCurrentPage:hover
{
    background-position:100% -1450px;
    cursor:default;
}

.RadGrid_MySkin .rgNumPart a.rgCurrentPage span,
.RadGrid_MySkin .rgNumPart a.rgCurrentPage:hover span
{
    background-position:0 -1350px;
    cursor:default;
}

.RadGrid_MySkin .NextPrevNumericAndAdvanced .rgAdvPart
{
    float:none;
    text-align:center;
}

.RadGrid_MySkin .rgPager .RadSlider
{
    float:left;
    margin:0 10px 0 0;
}

.RadGrid_MySkin .rgPager .rgPagerLabel,
.RadGrid_MySkin .rgPager .RadComboBox,
.RadGrid_MySkin .rgPager .RadInput_MySkin
{
    margin:0 4px 0 0;
    vertical-align:middle;
}

*+html .RadGrid_MySkin .rgPager .RadComboBox{margin-top:-1px;}
* html .RadGrid_MySkin .rgPager .RadComboBox{margin-top:-1px;padding:1px 0;}

.RadGrid_MySkin .rgPagerTextBox
{
    text-align:center;
}

/*sorting, reordering*/

.RadGrid_MySkin .rgHeader .rgSortAsc
{
    background-position:3px -147px;
    height:10px;
}

.RadGrid_MySkin .rgHeader .rgSortDesc
{
    background-position:3px -96px;
    height:10px;
}

.GridReorderTop_MySkin,
.GridReorderBottom_MySkin
{
    width:9px !important;
    height:9px !important;
    margin-left:-5px;
    background:0 0 no-repeat url('Grid/sprite.gif');
}

.GridReorderBottom_MySkin
{
    background-position:0 -50px;
}

/*filtering*/

.RadGrid_MySkin .rgFilterRow
{
    background:#d6e5f3;
}

.RadGrid_MySkin .rgFilterRow td
{
    padding-top:5px;
    padding-bottom:6px;
    border:solid #9eb6ce;
    border-width:0 0 1px 1px;
}

.RadGrid_MySkin .rgFilter
{
    width:22px;
    height:22px;
    margin:0 0 0 2px;
    background-position:0 -300px;
}

.RadGrid_MySkin .rgFilter:hover
{
    background-position:0 -350px;
}

.RadGrid_MySkin .rgFilterActive,
.RadGrid_MySkin .rgFilterActive:hover
{
    background-position:0 -400px;
}

.RadGrid_MySkin .rgFilterBox
{
    border:1px solid #abc1de;
    padding:2px 1px 3px;
    font:12px "segoe ui",arial,sans-serif;
    color:#000;
    vertical-align:middle;
}

/*grouping*/

.RadGrid_MySkin .rgGroupPanel
{
    height:24px;
    border:0;
    border-bottom:1px solid #688caf;
    background:#ecf3fc;
}

.RadGrid_MySkin .rgGroupPanel td
{
    border:0;
    padding:3px 4px;
    vertical-align:middle;
}

.RadGrid_MySkin .rgGroupPanel td td
{
    padding:0;
}

.RadGrid_MySkin .rgGroupPanel .rgSortAsc
{
    background-position:4px -144px;
}

.RadGrid_MySkin .rgGroupPanel .rgSortDesc
{
    background-position:4px -94px;
}

.RadGrid_MySkin .rgUngroup
{
    background-position:0 -7500px;
}

.RadGrid_MySkin .rgGroupItem
{
    border:1px solid #4b78ca;
    padding:0 2px 1px 3px;
    background:#e6ebf5 0 -1900px repeat-x url('Grid/sprite.gif');
    color:#00156e;
    line-height:20px;
    font-weight:normal;
    vertical-align:middle;
}

.RadGrid_MySkin .rgGroupHeader
{
    background:#d7e6f7;
    font-size:1.1em;
    line-height:21px;
    color:#567db0;
}

.RadGrid_MySkin .rgGroupHeader td
{
    border-top:1px solid #fcfcfd;
    border-bottom:1px solid #6f92b3;
    padding:0 7px 0 8px;
}

.RadGrid_MySkin td.rgGroupCol,
.RadGrid_MySkin td.rgExpandCol
{
    background:#d7e6f7 none;
    border-color:#d7e6f7;
}

.RadGrid_MySkin .rgGroupHeader .rgExpand
{
    background-position:5px -495px;
}

.RadGrid_MySkin .rgGroupHeader .rgCollapse
{
    background-position:3px -93px;
}

.RadGrid_MySkin .rgGroupHeader td p
{
    display:inline;
    margin:0;
    padding:0 10px;
}

.RadGrid_MySkin .rgGroupHeader td div div
{
    top:-0.8em;
    padding:0 10px;
}

.RadGrid_MySkin .rgGroupHeader td div div div
{
    top:0;
    padding:0;
    border:0;
}

/*editing*/

.RadGrid_MySkin .rgEditForm
{
    border-bottom:1px solid #d0d7e5;
}

.RadGrid_MySkin .rgUpdate
{
    background-position:0 -1800px;
}

.RadGrid_MySkin .rgCancel
{
    background-position:2px -1848px;
}

/*hierarchy*/

.RadGrid_MySkin .rgDetailTable
{
    border:1px solid #688caf;
    border-right:0;
}

.RadGrid_MySkin .rgExpand
{
    background-position:5px -496px;
}

.RadGrid_MySkin .rgCollapse
{
    background-position:3px -94px;
}

/*command row*/

.RadGrid_MySkin .rgCommandRow
{
    background:#d6e6f4 0 -2099px repeat-x url('Grid/sprite.gif');
    color:#333;
}

.RadGrid_MySkin .rgCommandCell
{
    border:0;
    padding:0;
}

.RadGrid_MySkin thead .rgCommandCell
{
    border-bottom:1px solid #688caf;
}

.RadGrid_MySkin tfoot .rgCommandCell
{
    border-top:1px solid #688caf;
}

.RadGrid_MySkin .rgCommandTable td
{
    border:0;
    padding:3px 7px 4px;
}

.RadGrid_MySkin .rgCommandTable
{
    border:1px solid #f6f7f9;
}

.RadGrid_MySkin .rgCommandRow a
{
    color:#00156e;
    text-decoration:none;
}

.RadGrid_MySkin .rgAdd
{
    margin-right:3px;
    background-position:0 -1650px;
}

.RadGrid_MySkin .rgRefresh
{
    margin-right:3px;
    background-position:0 -1600px;
}

.RadGrid_MySkin .rgEdit
{
    background-position:0 -1700px;
}

.RadGrid_MySkin .rgDel
{
    background-position:0 -1750px;
}

/*multirow select*/

.GridRowSelector_MySkin
{
    background:#00156e;
}

/*row drag n drop*/

.GridItemDropIndicator_MySkin
{
    border-top:1px dashed #00156e;
}

/*tooltip*/

.GridToolTip_MySkin
{
    border:1px solid #6187b8;
    padding:3px;
    background:#d7e3f2;
    color:#333;
}

/*rtl*/

.RadGridRTL_MySkin .rgHeader,
.RadGridRTL_MySkin .rgResizeCol
{
    text-align:right;
}

.RadGridRTL_MySkin .rgHeader:first-child,
.RadGridRTL_MySkin th.rgResizeCol:first-child,
.RadGridRTL_MySkin .rgFilterRow>td:first-child,
.RadGridRTL_MySkin .rgRow>td:first-child,
.RadGridRTL_MySkin .rgAltRow>td:first-child
{
    border-left:1px solid;
    padding-left:7px;
}

.RadGridRTL_MySkin .rgPager .rgStatus
{
    border-right:0;
    border-left-width:1px;
}

.RadGridRTL_MySkin .rgWrap
{
    float:right;
}

.RadGridRTL_MySkin .rgInfoPart
{
    float:left;
}

.RadGridRTL_MySkin .rgNumPart
{
    width:220px;
}

.RadGridRTL_MySkin .rgNumPart a
{
    float:right;
}

.RadGridRTL_MySkin .rgDetailTable
{
    border-right:1px solid;
    border-left:0;
}

[Dimo]

Hi Peter,

Please replace

*+html .RadGrid_MySkin .rgSelectedRow:hover .rgSorted:hover{background-color:#ffcb60}
* html .RadGrid_MySkin .rgSelectedRow:hover .rgSorted:hover{background-color:#ffcb60}

with

*+html .RadGrid_MySkin .rgSelectedRow:hover .rgSorted{background-color:#ffcb60}
* html .RadGrid_MySkin .rgSelectedRow:hover .rgSorted{background-color:#ffcb60}


Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Peter]

Thank you, that works great.