This is a migrated thread and some comments may be shown as answers.

Skinning Problems

1 Answer 12 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 26 May 2010, 04:55 PM
Hi,

I am updating some older projects that used the 2007 Radcontrols for .Net where we had developed a custom skin.
I am now attempting to move these settings into the new skin files. I have started with the Grid - which as it's one of the most complicated probably wasn't a good idea, but at least if I can sort this one the rest should be easy!

So I used your online tool to generate me a set of skin files for all the controls based on the Office2007 skin.

I am now trying to replicate the settings from our original custom skin into this, but many of the CSS classes don't seem to exist in the new skins, and I'm getting a bit lost.
Now I'm no novice with CSS, but if someone could point me in the right direction with how to translate these to the new format I would appreciate it.

My original custom skin for the Grid is below.

Thankyou.

Paul

/* r.a.d.grid XLogixBlue skin */ 
 
div.RadGrid_XLogixBlue 
    bordersolid 1px #01055f
    fontnormal 11px ArialVerdanaSans-serif
    text-alignleft
    cursordefault
    backgroundwhite
 
.RadGrid_XLogixBlue div 
  margin-right: 0 !important ; 
 
.RadGrid_XLogixBlue a 
{  
    color#000000
 
.MasterTable_XLogixBlue 
    border-collapseseparate !important; 
    width: 100%; 
    color#27413e
    fontnormal 11px arial
 
 
.MasterTable_XLogixBlue td, 
.MasterTable_XLogixBlue th 
    padding-left2px
    padding-right4px
 
 
th.GridHeader_XLogixBlue, 
th.ResizeHeader_XLogixBlue 
    fontbold 12px ArialVerdanaSans-serif
    background#9ebeec url('Img/GridHeaderBg.gif'repeat-x; 
    padding-left2px/*more than items to compensate for item borders!*/ 
    padding-right4px/*more than items to compensate for item borders!*/ 
    height19px
    color#01055f
    border-bottomsolid 1px #9eb6ce
    border-rightsolid 1px #9eb6ce
 
.GridHeader_XLogixBlue a 
    color#01055f
    fontbold 12px  ArialVerdanaSans-serif
    text-decorationnone
 
    padding-left2px/*more than items to compensate for item borders!*/ 
    padding-right4px/*more than items to compensate for item borders!*/ 
 
.GridRow_XLogixBlue td 
    backgroundtransparent
    line-height19px
    border-bottom1px solid #d0d7e5
    border-right1px solid #d0d7e5
 
.GridAltRow_XLogixBlue td 
    background-color#e1edff
    line-height19px
    border-bottom1px solid #d0d7e5
    border-right1px solid #d0d7e5
 
.SelectedRow_XLogixBlue td, 
.ActiveRow_XLogixBlue td 
    background#f1c15f url('Img/gridSelectedRowBg.gif'repeat-x !important; 
    line-height19px
    border-bottom1px solid #f29536
    border-right1px solid #f29536
    color#000000
 
.GridPager_XLogixBlue td 
    background#9ab5db url('Img/GriPagerBg.gif'repeat-x; 
    height15px
    colorwhite
 
.GridFooter_XLogixBlue td 
    background#fbfbfb
    bordersolid 1px #fbfbfb
    border-top1px solid #637783
    height19px
    color#666
 
.GridFooter_XLogixBlue td a 
    color#666
 
.GridPager_XLogixBlue td a 
    colorwhite
 
.GridPager_XLogixBlue td a:hover, 
.GridFooter_XLogixBlue td a:hover 
    colorblack
 
 
tr.GroupHeader_XLogixBlue td 
    background#e4ecf7
    height22px
 
.GroupPanel_XLogixBlue 
    background#9ebde5 url('Img/GridGroupPanelBg.gif'repeat-x; 
    width: 100%; 
    height23px
    border-bottomsolid 1px #688caf
    border-collapsecollapse
 
.GroupPanelItems_XLogixBlue 
    backgroundwhite
    colorblack
    bordersolid 1px #325373
    whitewhite-space:  nowrap
    padding-left4px
    font-size11px
    height19px
 
td.GridHeader_XLogixBlue input 
    widthauto
    floatleft
    bordersolid 1px #3b5a82
    background#fafafa
    fontbold 11px ArialVerdanaSans-serif
    color#989cb0
    height19px
    vertical-align:middle
 
 

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 May 2010, 11:14 AM
Hello Paul,

There is a help article listing the CSS classes of each RadControl. Here is the one for RadGrid:

http://www.telerik.com/help/aspnet-ajax/grdcreatingnewskins.html

The above page lists both the old and new CSS classes of RadGrid, which I hope will through some light on the matter in your case. For example:

/*old*/
.GridRow_XLogixBlue td
{
 
}

/*new*/
.RadGrid_XLogixBlue .rgRow td
{
 
}


Note that it is recommended to apply background styles to table rows, not cells.

Let us know if you need more information.

Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Grid
Asked by
Paul
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or