Hi,
I created a custom skin using the Telerik Skin Builder. The template i used was the built-in Transparent skin.
The custom skin worked fine on my local VS project.
However, I deployed the full project to my server & ran the application but some of the custom settings i created in my skin are simply not working in Internet Explorer 9.When testing locally, i was using IE9 too & it worked fine in that.
I've tried the server-deployed project in Firefox & the custom skin settings work fine.
The main setting which is obvious is that i changed the ragrid selected row color from a dark grey to a very light grey. However, on the server, when using IE9, the color reverts back to the dark grey selection.
I've checked my files are correct & i've registered the custom skin by using the link method:
Any ideas why this is happening?
I created a custom skin using the Telerik Skin Builder. The template i used was the built-in Transparent skin.
The custom skin worked fine on my local VS project.
However, I deployed the full project to my server & ran the application but some of the custom settings i created in my skin are simply not working in Internet Explorer 9.When testing locally, i was using IE9 too & it worked fine in that.
I've tried the server-deployed project in Firefox & the custom skin settings work fine.
The main setting which is obvious is that i changed the ragrid selected row color from a dark grey to a very light grey. However, on the server, when using IE9, the color reverts back to the dark grey selection.
I've checked my files are correct & i've registered the custom skin by using the link method:
<link href="General.css" rel="stylesheet" type="text/css" />
<link href="App_Themes/Trans/Grid.Trans.css" rel="stylesheet" type="text/css" />
Any ideas why this is happening?
6 Answers, 1 is accepted
0
Hello,
Most probably, some of the styles are not applied and that`s why you could not see the new style old dark grey selection.
Without any code/screenshot provided provided it is hard to tell what is reason for that behavior. To help you further we will need to send us your custom skin and a sample page where the issue is reproduced.
All the best,
Bozhidar
the Telerik team
Most probably, some of the styles are not applied and that`s why you could not see the new style old dark grey selection.
Without any code/screenshot provided provided it is hard to tell what is reason for that behavior. To help you further we will need to send us your custom skin and a sample page where the issue is reproduced.
All the best,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0

Shuja
Top achievements
Rank 1
answered on 08 Nov 2012, 10:21 AM
Hi Bozhidar,
Thanks for the reponse.My custom skin code is as follows:
I've also attached 2 screenshot files. 1 showing the correct selected row colour in the RadGrid & 1 showing the incorrect colour.
Please can you help with this issue as it is really messing me up now. As you can see from the screenshots, i've designed my whole interface on the light colours but this dark highlight is a real eye sore & i can't fix it!
Thanks for your help.
Shuja
Thanks for the reponse.My custom skin code is as follows:
/*Telerik RadGrid Transparent Skin*/
/*global*/
.RadGrid_Trans
{
border
:
1px
solid
#a4abb2
;
background
:
url
(
'Common/TransContent.png'
);
color
:
#3b3b3b
;
}
.RadGrid_Trans,
.RadGrid_Trans .rgMasterTable,
.RadGrid_Trans .rgDetailTable,
.RadGrid_Trans .rgGroupPanel table,
.RadGrid_Trans .rgCommandRow table,
.RadGrid_Trans .rgEditForm table,
.RadGrid_Trans .rgPager table,
.GridToolTip_Trans
{
font
:
12px
/
16px
Tahoma
,
Arial
,
sans-serif
;
}
.RadGrid_Trans .rgHeader:first-child,
.RadGrid_Trans th.rgResizeCol:first-child,
.RadGrid_Trans .rgFilterRow>td:first-child,
.RadGrid_Trans .rgRow>td:first-child,
.RadGrid_Trans .rgAltRow>td:first-child
{
border-left-width
:
0
;
padding-left
:
8px
;
}
.RadGrid_Trans .rgAdd,
.RadGrid_Trans .rgRefresh,
.RadGrid_Trans .rgEdit,
.RadGrid_Trans .rgDel,
.RadGrid_Trans .rgFilter,
.RadGrid_Trans .rgPagePrev,
.RadGrid_Trans .rgPageNext,
.RadGrid_Trans .rgPageFirst,
.RadGrid_Trans .rgPageLast,
.RadGrid_Trans .rgExpand,
.RadGrid_Trans .rgCollapse,
.RadGrid_Trans .rgSortAsc,
.RadGrid_Trans .rgSortDesc,
.RadGrid_Trans .rgUpdate,
.RadGrid_Trans .rgCancel,
.RadGrid_Trans .rgUngroup,
.RadGrid_Trans .rgExpXLS,
.RadGrid_Trans .rgExpDOC,
.RadGrid_Trans .rgExpPDF,
.RadGrid_Trans .rgExpCSV
{
background-image
:
url
(
'Grid/sprite.png'
);
}
/*header*/
.rgTwoLines .rgHeaderDiv
{
background-position
:
0
-7550px
;
}
.RadGrid_Trans .rgHeader,
.RadGrid_Trans th.rgResizeCol
{
border
:
solid
#a4abb2
;
border-width
:
0
0
1px
1px
;
background
:
0
-500px
repeat-x
url
(
'Grid/bgrSprite.png'
);
}
.RadGrid_Trans th.rgSorted
{
border-bottom-color
:rgba(
245
,
245
,
245
,
0.41
);
background
:
0
-2500px
repeat-x
url
(
'Grid/bgrSprite.png'
);
}
.RadGrid_Trans .rgHeader,
.RadGrid_Trans .rgHeader a
{
color
:
#000
;
}
/*rows*/
.RadGrid_Trans > table > tbody,
.rgDataDiv
{
background
:
url
(
'Common/TransContent_22.png'
);
}
.RadGrid_Trans .rgRow td,
.RadGrid_Trans .rgAltRow td,
.RadGrid_Trans .rgEditRow td,
.RadGrid_Trans .rgFooter td
{
border-style
:
solid
;
border-width
:
0
0
1px
1px
;
}
.RadGrid_Trans .rgRow td,
.RadGrid_Trans .rgAltRow td
{
border-color
:
#d0d7e5
;
}
.RadGrid_Trans .rgRow .rgSorted,
.RadGrid_Trans .rgAltRow .rgSorted
{
background
:
url
(
'Common/TransContent_22.png'
);
}
.RadGrid_Trans .rgSelectedRow .rgSorted,
.RadGrid_Trans .rgActiveRow .rgSorted,
.RadGrid_Trans .rgHoveredRow .rgSorted,
.RadGrid_Trans .rgEditRow .rgSorted
{
background-color
:
transparent
;
}
.RadGrid_Trans .rgRow a,
.RadGrid_Trans .rgAltRow a,
.RadGrid_Trans .rgEditRow a,
.RadGrid_Trans .rgFooter a,
.RadGrid_Trans .rgEditForm a
{
color
:
#3b3b3b
;
}
.RadGrid_Trans .rgSelectedRow
{
background
:
0
-1500px
repeat-x
url
(
'Grid/bgrSprite.png'
);
color
:
#fff
;
}
.RadGrid_Trans .rgSelectedRow.rgHoveredRow
{
background
:
0
-2000px
repeat-x
url
(
'Grid/bgrSprite.png'
);
}
*+html .RadGrid_Trans .rgSelectedRow .rgSorted{
background-color
:
#ffcb60
}
* html .RadGrid_Trans .rgSelectedRow .rgSorted{
background-color
:
#ffcb60
}
.RadGrid_Trans .rgActiveRow,
.RadGrid_Trans .rgHoveredRow
{
background
:
0
-1000px
repeat-x
url
(
'Grid/bgrSprite.png'
);
}
*+html .RadGrid_Trans .rgActiveRow .rgSorted,
*+html .RadGrid_Trans .rgHoveredRow .rgSorted{
background-color
:
#ecf4ff
}
* html .RadGrid_Trans .rgActiveRow .rgSorted,
* html .RadGrid_Trans .rgHoveredRow .rgSorted{
background-color
:
#ecf4ff
}
.RadGrid_Trans .rgEditRow
{
background
:
#ebebeb
;
}
*+html .RadGrid_Trans .rgEditRow .rgSorted{
background-color
:
#ffe5ad
}
* html .RadGrid_Trans .rgEditRow .rgSorted{
background-color
:
#ffe5ad
}
.RadGrid_Trans .rgSelectedRow td,
.RadGrid_Trans .rgActiveRow td,
.RadGrid_Trans .rgHoveredRow td,
.RadGrid_Trans .rgEditRow td
{
border-left-width
:
0
;
padding-left
:
8px
;
}
.RadGrid_Trans .rgActiveRow td,
.RadGrid_Trans .rgHoveredRow td,
.RadGrid_Trans .rgEditRow td
{
border-bottom-color
:
#d0d7e5
;
}
.RadGrid_Trans .rgDrag
{
background-image
:
url
(
'Grid/rgDrag.png'
);
}
/*footer*/
.RadGrid_Trans > table > tfoot,
.RadGrid_Trans .rgFooterDiv,
.RadGrid_Trans .rgFooter
{
background
:
url
(
'Common/TransContent_42.png'
);
}
.RadGrid_Trans .rgFooter td
{
border-width
:
1px
0
0
;
border-color
:
#848484
#fff
#fff
;
padding-left
:
8px
;
}
/*status*/
.RadGrid_Trans .rgPager .rgStatus
{
border
:
1px
solid
;
border-width
:
0
1px
0
0
;
border-color
:
#d0d7e5
;
}
.RadGrid_Trans .rgStatus div
{
background-image
:
url
(
'Common/loading_small.gif'
);
}
/*pager*/
.RadGrid_Trans .rgPager
{
color
:
#3b3b3b
;
}
.RadGrid_Trans td.rgPagerCell
{
}
.RadGrid_Trans .rgPageFirst
{
margin
:
0
3px
0
0
;
background-position
:
0
-550px
;
}
.RadGrid_Trans .rgPageFirst:hover
{
background-position
:
0
-600px
;
}
.RadGrid_Trans .rgPagePrev
{
margin
:
0
3px
0
0
;
background-position
:
0
-700px
;
}
.RadGrid_Trans .rgPagePrev:hover
{
background-position
:
0
-750px
;
}
.RadGrid_Trans .rgPageNext
{
margin
:
0
0
0
3px
;
background-position
:
0
-850px
;
}
.RadGrid_Trans .rgPageNext:hover
{
background-position
:
0
-900px
;
}
.RadGrid_Trans .rgPageLast
{
margin
:
0
0
0
3px
;
background-position
:
0
-1000px
;
}
.RadGrid_Trans .rgPageLast:hover
{
background-position
:
0
-1050px
;
}
.RadGrid_Trans .rgPager .rgPagerButton
{
border-color
:
#a4abb2
;
color
:
#3b3b3b
;
font
:
12px
/
12px
Tahoma
,
Arial
,
sans-serif
;
}
.RadGrid_Trans .rgNumPart a:hover,
.RadGrid_Trans .rgNumPart a:hover span,
.RadGrid_Trans .rgNumPart a.rgCurrentPage,
.RadGrid_Trans .rgNumPart a.rgCurrentPage span
{
background
:
no-repeat
url
(
'Grid/sprite.png'
);
}
.RadGrid_Trans .rgNumPart a
{
color
:
#3b3b3b
;
}
.RadGrid_Trans .rgNumPart a:hover
{
background-position
:
100%
-1250px
;
color
:
#1e395b
;
}
.RadGrid_Trans .rgNumPart a:hover span
{
background-position
:
0
-1150px
;
}
.RadGrid_Trans .rgNumPart a.rgCurrentPage,
.RadGrid_Trans .rgNumPart a.rgCurrentPage:hover
{
background-position
:
100%
-1450px
;
color
:
#fff
;
}
.RadGrid_Trans .rgNumPart a.rgCurrentPage span,
.RadGrid_Trans .rgNumPart a.rgCurrentPage:hover span
{
background-position
:
0
-1350px
;
}
/*sorting, reordering*/
.RadGrid_Trans .rgHeader .rgSortAsc
{
background-position
:
3px
-147px
;
height
:
10px
;
}
.RadGrid_Trans .rgHeader .rgSortDesc
{
background-position
:
3px
-197px
;
height
:
10px
;
}
.GridReorderTop_Trans,
.GridReorderBottom_Trans
{
height
:
12px
;
background
:
0
0
no-repeat
url
(
'Grid/sprite.png'
);
}
.GridReorderBottom_Trans
{
background-position
:
0
-50px
;
}
/*filtering*/
.RadGrid_Trans .rgFilterRow td
{
border-style
:
solid
;
border-color
:
#a4abb2
;
border-width
:
0
0
1px
1px
;
}
.RadGrid_Trans .rgFilter
{
background-position
:
0
-300px
;
}
.RadGrid_Trans .rgFilter:hover
{
background-position
:
0
-350px
;
}
.RadGrid_Trans .rgFilterActive,
.RadGrid_Trans .rgFilterActive:hover
{
background-position
:
0
-400px
;
}
.RadGrid_Trans .rgFilterBox
{
border-color
:
#9e9e9e
#e3e3e3
#e3e3e3
#9e9e9e
;
border-color
:rgba(
0
,
0
,
0
,
0.38
) rgba(
204
,
204
,
204
,
0.55
) rgba(
204
,
204
,
204
,
0.55
) rgba(
0
,
0
,
0
,
0.38
);
background
:
url
(
'Common/TransContent_42.png'
);
color
:
#000
;
font
:
12px
Tahoma
,
Arial
,
sans-serif
;
}
/*filter context menu*/
.RadMenu_Trans .rgHCMClear,
.RadMenu_Trans .rgHCMFilter
{
border-color
:
#a7bedb
#7d98bd
#a3bad8
;
background
:
#e8f1fc
center
-23px
repeat-x
url
(
'FormDecorator/ButtonSprites.gif'
);
color
:
#00156e
;
font-family
:
Tahoma
,
Arial
,
sans-serif
;
}
.RadMenu_Trans .rgHCMClear:hover,
.RadMenu_Trans .rgHCMFilter:hover
{
border-color
:
#d8ca95
#b9a073
#c6ba9d
;
background-position
:
center
-67px
;
background-color
:
#ffe18a
;
color
:
#000
;
}
/*context menu*/
.GridContextMenu_Trans .rmLeftImage
{
background-image
:
url
(
'Common/contextMenu.gif'
);
}
.GridContextMenu_Trans .rgHCMSortAsc .rmLeftImage
{
background-position
:
0
0
;
}
.GridContextMenu_Trans .rgHCMSortDesc .rmLeftImage
{
background-position
:
0
-40px
;
}
.GridContextMenu_Trans .rgHCMUnsort .rmLeftImage
{
background-position
:
0
-80px
;
}
.GridContextMenu_Trans .rgHCMGroup .rmLeftImage
{
background-position
:
0
-120px
;
}
.GridContextMenu_Trans .rgHCMUngroup .rmLeftImage
{
background-position
:
0
-160px
;
}
.GridContextMenu_Trans .rgHCMCols .rmLeftImage
{
background-position
:
0
-200px
;
}
.GridContextMenu_Trans .rgHCMFilter .rmLeftImage
{
background-position
:
0
-240px
;
}
.GridContextMenu_Trans .rgHCMUnfilter .rmLeftImage
{
background-position
:
0
-280px
;
}
/*grouping*/
.RadGrid_Trans .rgGroupPanel
{
border
:
0
solid
#a4abb2
;
border-bottom-width
:
1px
;
background
:
repeat-x
url
(
'Grid/bgrSprite.png'
);
}
.RadGrid_Trans .rgGroupPanel td
{
border
:
0
;
padding
:
3px
4px
;
vertical-align
:
middle
;
}
.RadGrid_Trans .rgGroupPanel td td
{
padding
:
0
;
}
.RadGrid_Trans .rgGroupPanel .rgSortAsc
{
background-position
:
4px
-144px
;
}
.RadGrid_Trans .rgGroupPanel .rgSortDesc
{
background-position
:
4px
-194px
;
}
.RadGrid_Trans .rgUngroup
{
background-position
:
0
-7500px
;
}
.RadGrid_Trans .rgGroupItem
{
border
:
1px
solid
#a4abb2
;
color
:
#3b3b3b
;
}
.RadGrid_Trans .rgGroupHeader
{
font-size
:
1.1em
;
line-height
:
21px
;
color
:
#3b3b3b
;
}
.RadGrid_Trans .rgGroupHeader td
{
border-bottom
:
1px
solid
#dadcdd
;
padding-left
:
8px
;
}
.RadGrid_Trans td.rgGroupCol,
.RadGrid_Trans td.rgExpandCol
{
border-color
:
#dbdfe4
;
}
.RadGrid_Trans .rgGroupHeader .rgExpand
{
background-position
:
5px
-495px
;
}
.RadGrid_Trans .rgGroupHeader .rgCollapse
{
background-position
:
3px
-93px
;
}
/*editing*/
.RadGrid_Trans .rgEditForm
{
border-bottom
:
1px
solid
#a4abb2
;
}
.RadGrid_Trans .rgUpdate
{
background-position
:
0
-1800px
;
}
.RadGrid_Trans .rgCancel
{
background-position
:
0
-1850px
;
}
/*hierarchy*/
.RadGrid_Trans .rgDetailTable
{
border-color
:
#688caf
;
}
.RadGrid_Trans .rgExpand
{
background-position
:
5px
-496px
;
}
.RadGrid_Trans .rgCollapse
{
background-position
:
3px
-94px
;
}
/*command row*/
.RadGrid_Trans .rgCommandRow
{
background
:
url
(
'Grid/bgrSprite.png'
);
color
:
#333
;
}
.RadGrid_Trans .rgCommandCell
{
border
:
0
;
padding
:
0
;
}
.RadGrid_Trans thead .rgCommandCell
{
border-bottom
:
1px
solid
#a4abb2
;
}
.RadGrid_Trans .rgCommandTable td
{
border
:
0
;
padding
:
2px
7px
;
}
.RadGrid_Trans .rgCommandRow a
{
color
:
#242424
;
text-decoration
:
none
;
}
.RadGrid_Trans .rgAdd
{
margin-right
:
3px
;
background-position
:
0
-1650px
;
}
.RadGrid_Trans .rgRefresh
{
margin-right
:
3px
;
background-position
:
0
-1600px
;
}
.RadGrid_Trans .rgEdit
{
background-position
:
0
-1700px
;
}
.RadGrid_Trans .rgDel
{
background-position
:
0
-1750px
;
}
.RadGrid_Trans .rgExpXLS,
.RadGrid_Trans .rgExpDOC,
.RadGrid_Trans .rgExpPDF,
.RadGrid_Trans .rgExpCSV
{
background-image
:
url
(
'Common/export.gif'
);
}
.RadGrid_Trans .rgExpXLS
{
background-position
:
0
0
;
}
.RadGrid_Trans .rgExpDOC
{
background-position
:
0
-50px
;
}
.RadGrid_Trans .rgExpPDF
{
background-position
:
0
-100px
;
}
.RadGrid_Trans .rgExpCSV
{
background-position
:
0
-150px
;
}
/*multirow select*/
.GridRowSelector_Trans
{
background
:
#00156e
;
}
/*row drag n drop*/
.GridItemDropIndicator_Trans
{
border-top
:
1px
dashed
#00156e
;
}
/*tooltip*/
.GridToolTip_Trans
{
border
:
1px
solid
#6187b8
;
padding
:
3px
;
background
:
#d7e3f2
;
color
:
#333
;
}
/*rtl*/
.RadGridRTL_Trans .rgHeader:first-child,
.RadGridRTL_Trans th.rgResizeCol:first-child,
.RadGridRTL_Trans .rgFilterRow>td:first-child,
.RadGridRTL_Trans .rgRow>td:first-child,
.RadGridRTL_Trans .rgAltRow>td:first-child
{
border-left-width
:
1px
;
padding-left
:
7px
;
}
.RadGridRTL_Trans .rgPageFirst
{
background-position
:
0
-1000px
;
}
.RadGridRTL_Trans .rgPageFirst:hover
{
background-position
:
0
-1050px
;
}
.RadGridRTL_Trans .rgPagePrev
{
margin
:
0
0
0
3px
;
background-position
:
0
-850px
;
}
.RadGridRTL_Trans .rgPagePrev:hover
{
background-position
:
0
-900px
;
}
.RadGridRTL_Trans .rgPageNext
{
margin
:
0
3px
0
0
;
background-position
:
0
-700px
;
}
.RadGridRTL_Trans .rgPageNext:hover
{
background-position
:
0
-750px
;
}
.RadGridRTL_Trans .rgPageLast
{
background-position
:
0
-550px
;
}
.RadGridRTL_Trans .rgPageLast:hover
{
background-position
:
0
-600px
;
}
.RadGridRTL_Trans .rgGroupHeader .rgExpand
{
background-position
:
-20px
-495px
;
}
.RadGridRTL_Trans .rgExpand
{
background-position
:
-20px
-496px
;
}
.RadGridRTL_Trans .rgGroupHeader .rgCollapse
{
background-position
:
-20px
-93px
;
}
div.RadGrid_Trans .rgRow td {
color
:
rgb
(
74
,
153
,
255
);
}
div.RadGrid_Trans .rgSelectedRow td {
background-color
:
rgb
(
238
,
238
,
238
);
color
:
rgb
(
74
,
153
,
255
);
}
div.RadGrid_Trans .rgRow {
color
:
rgb
(
74
,
153
,
255
);
}
div.RadGrid_Trans tr.rgSelectedRow {
color
:
rgb
(
74
,
153
,
255
);
}
div.RadGrid_Trans .rgAltRow td {
color
:
rgb
(
74
,
153
,
255
);
}
div.RadGrid_Trans .rgAltRow {
color
:
rgb
(
74
,
153
,
255
);
}
div.RadGrid_Trans .rgCommandRow {
line-height
:
10px
;
font-size
:
10px
;
}
div.RadGrid_Trans .rgCommandCell {
line-height
:
10px
;
font-size
:
10px
;
}
div.RadGrid_Trans .rgRow td {
border-bottom
:
1px
solid
rgb
(
219
,
223
,
228
);
border-left
:
1px
solid
rgb
(
219
,
223
,
228
);
}
div.RadGrid_Trans .rgSelectedRow td {
border-left
:
1px
solid
rgb
(
219
,
223
,
228
);
border-bottom-style
:
solid
;
border-bottom-width
:
1px
;
}
div.RadGrid_Trans .rgActiveRow td {
border-bottom-style
:
solid
;
border-bottom-width
:
1px
;
}
div.RadGrid_Trans .rgHoveredRow td {
border-bottom-style
:
solid
;
border-bottom-width
:
1px
;
}
div.RadGrid_Trans .rgRow .rgSorted {
border-bottom-style
:
solid
;
border-bottom-width
:
1px
;
}
div.RadGrid_Trans .rgAltRow td {
border-left
:
1px
solid
rgb
(
219
,
223
,
228
);
border-bottom
:
1px
solid
rgb
(
219
,
223
,
228
);
}
div.RadGrid_Trans .rgAltRow .rgSorted {
border-bottom
:
1px
solid
rgb
(
219
,
223
,
228
);
}
div.RadGrid_Trans .rgFooter td {
font-size
:
10px
;
line-height
:
10px
;
}
div.RadGrid_Trans .rgFooter {
font-size
:
10px
;
line-height
:
10px
;
}
div.RadGrid_Trans .rgPager {
font-size
:
10px
;
line-height
:
10px
;
}
div.RadGrid_Trans .rgPager .rgPagerCell {
font-size
:
10px
;
line-height
:
10px
;
}
div.RadGrid_Trans .rgSelectedRow td {
background-color
:
rgb
(
238
,
238
,
238
);
}
I've also attached 2 screenshot files. 1 showing the correct selected row colour in the RadGrid & 1 showing the incorrect colour.
Please can you help with this issue as it is really messing me up now. As you can see from the screenshots, i've designed my whole interface on the light colours but this dark highlight is a real eye sore & i can't fix it!
Thanks for your help.
Shuja
0

Shuja
Top achievements
Rank 1
answered on 08 Nov 2012, 03:41 PM
The additional strange thing that i've noticed is that if i go back to the Visual Style Builder & import my skin into the tool, the colours appear correct across the slected row EXCEPT for one single cell background colour, which appears with the dark grey colour (see attached image).If i update the selected row colour it will change to the light grey colour on screen but when i save & download the skin & try to re-import it, it then appears with the same cell having a dark backgroud colour. Seems like a glitch in the VSB tool. Surely, it should save the skin file as it appears in the view & so should be the same when you import it again?
Shuja
Shuja
0
Hello Shuja,
I have modified the styles and you can find them in the attached CSS file.
I hope this helps.
Greetings,
Galin
the Telerik team
I have modified the styles and you can find them in the attached CSS file.
I hope this helps.
Greetings,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0

Shuja
Top achievements
Rank 1
answered on 13 Nov 2012, 10:39 AM
Hi Galin,
Thanks for you help & efforts.
However, i'm not sure what you have modified or corrected in the skin file you sent.
For my original issue, your file is still showing the dark grey default background color for selected row. And for the 2nd issue i noticed, the single dark grey cell is still appearing in VSB after i import the skin with your file included.
My issue still remains, where, having changed the selected row background color in VSB, the actual background color that appears in my grid is the default dark grey in some versions of IE. On my local machine it works fine & shows up as a light grey.
This may be an issue across browser versions & IE's compatibility view but i thought the Telerik controls could (and should be able to) handle the different browser versions & display the correct colours in the skin.
If it is easier to do, then i could use the built-in skin "Transparent" but i need help in overriding the default selected row background color, as it is hideous. So could anyone assist me in overriding the default selected row color so i can change it from a nasty dark grey to a light grey?
Reagrds,
Shuja
Thanks for you help & efforts.
However, i'm not sure what you have modified or corrected in the skin file you sent.
For my original issue, your file is still showing the dark grey default background color for selected row. And for the 2nd issue i noticed, the single dark grey cell is still appearing in VSB after i import the skin with your file included.
My issue still remains, where, having changed the selected row background color in VSB, the actual background color that appears in my grid is the default dark grey in some versions of IE. On my local machine it works fine & shows up as a light grey.
This may be an issue across browser versions & IE's compatibility view but i thought the Telerik controls could (and should be able to) handle the different browser versions & display the correct colours in the skin.
If it is easier to do, then i could use the built-in skin "Transparent" but i need help in overriding the default selected row background color, as it is hideous. So could anyone assist me in overriding the default selected row color so i can change it from a nasty dark grey to a light grey?
Reagrds,
Shuja
0
Hi Shuja,
It is more easier the override an internal existed skin, than creating a new one. For more information please refer to this blog post.
Example for selected row
Please give a try and let me know how it goes.
Kind regards,
Galin
the Telerik team
It is more easier the override an internal existed skin, than creating a new one. For more information please refer to this blog post.
Example for selected row
div.RadGrid_Transparent .rgSelectedRow
{
background
:
#eeeeee
;
color
:
#4a99ff
;
}
Please give a try and let me know how it goes.
Kind regards,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.