[Solved] Skinning Problems

[Paul]

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
{
    border: solid 1px #01055f;
    font: normal 11px Arial, Verdana, Sans-serif;
    text-align: left;
    cursor: default;
    background: white;
}

.RadGrid_XLogixBlue div
{
  margin-right: 0 !important ;
}

.RadGrid_XLogixBlue a
{
    color: #000000;
}

.MasterTable_XLogixBlue
{
    border-collapse: separate !important;
    width: 100%;
    color: #27413e;
    font: normal 11px arial;
}


.MasterTable_XLogixBlue td,
.MasterTable_XLogixBlue th
{
    padding-left: 2px;
    padding-right: 4px;
}


th.GridHeader_XLogixBlue,
th.ResizeHeader_XLogixBlue
{
    font: bold 12px Arial, Verdana, Sans-serif;
    background: #9ebeec url('Img/GridHeaderBg.gif') repeat-x;
    padding-left: 2px; /*more than items to compensate for item borders!*/
    padding-right: 4px; /*more than items to compensate for item borders!*/
    height: 19px;
    color: #01055f;
    border-bottom: solid 1px #9eb6ce;
    border-right: solid 1px #9eb6ce;
}

.GridHeader_XLogixBlue a
{
    color: #01055f;
    font: bold 12px  Arial, Verdana, Sans-serif;
    text-decoration: none;

    padding-left: 2px; /*more than items to compensate for item borders!*/
    padding-right: 4px; /*more than items to compensate for item borders!*/
}

.GridRow_XLogixBlue td
{
    background: transparent;
    line-height: 19px;
    border-bottom: 1px solid #d0d7e5;
    border-right: 1px solid #d0d7e5;
}

.GridAltRow_XLogixBlue td
{
    background-color: #e1edff;
    line-height: 19px;
    border-bottom: 1px solid #d0d7e5;
    border-right: 1px solid #d0d7e5;
}

.SelectedRow_XLogixBlue td,
.ActiveRow_XLogixBlue td
{
    background: #f1c15f url('Img/gridSelectedRowBg.gif') repeat-x !important;
    line-height: 19px;
    border-bottom: 1px solid #f29536;
    border-right: 1px solid #f29536;
    color: #000000;
}

.GridPager_XLogixBlue td
{
    background: #9ab5db url('Img/GriPagerBg.gif') repeat-x;
    height: 15px;
    color: white;
}

.GridFooter_XLogixBlue td
{
    background: #fbfbfb;
    border: solid 1px #fbfbfb;
    border-top: 1px solid #637783;
    height: 19px;
    color: #666;
}

.GridFooter_XLogixBlue td a
{
    color: #666;
}

.GridPager_XLogixBlue td a
{
    color: white;
}

.GridPager_XLogixBlue td a:hover,
.GridFooter_XLogixBlue td a:hover
{
    color: black;
}


tr.GroupHeader_XLogixBlue td
{
    background: #e4ecf7;
    height: 22px;
}

.GroupPanel_XLogixBlue
{
    background: #9ebde5 url('Img/GridGroupPanelBg.gif') repeat-x;
    width: 100%;
    height: 23px;
    border-bottom: solid 1px #688caf;
    border-collapse: collapse;
}

.GroupPanelItems_XLogixBlue
{
    background: white;
    color: black;
    border: solid 1px #325373;
    whitewhite-space:  nowrap;
    padding-left: 4px;
    font-size: 11px;
    height: 19px;
}

td.GridHeader_XLogixBlue input
{
    width: auto;
    float: left;
    border: solid 1px #3b5a82;
    background: #fafafa;
    font: bold 11px Arial, Verdana, Sans-serif;
    color: #989cb0;
    height: 19px;
    vertical-align:middle;
}

[Dimo]

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.