Custom skin and LoadingPanel problem

[Michal]

I have created custom skin, based on "Sunset". Then I discovered, that my RadAjaxLoadingPanel disappeared, because there where no CSS class for it in new skin. I used Ajax.css from directory, where Telerik is installed. But I am not sure this file is good enough. And maybe something else is disappeared too. Is it possible to create Ajax.css (and maybe other missed files too) during skin creation? Is any solution for this problem exists? Regards. Michal.

[Maria Ilieva]

Hello Michal,

Here is a code library example, which demonstrates how to create a custom skin for the RadAjaxLoadingPanel and provides some useful tips.

Kind regards,
Maria Ilieva
the Telerik team

[Michal]

Hello Maria.
Thank You for Your help.
I have 2 more questions:
1. Why Ajax.css file is not created during skin creation?
Is any other *.css file not created?
2. I have found next problem: When I use RadGrid with custom skin, selected row became lower, than other rows.
When I use embeded skin, all rows are equal. I have not change anything in custom skin yet.
My custom skin is exact copy of "Sunset".

[Maria Ilieva]

Hello Michael,

I'm not completely sure if I correctly understand the mechanism you are using for creating the custom Skin. Could you please elaborate a bit more on this matter and send us the code you are using for creating the problematic skin.

All the best,
Maria Ilieva
the Telerik team

[Michal]

Hello Maria.
I have created my custom skin using Telerik Visual Style Builder.
My skin is based on Telerik "Sunset" embeded skin.
I have not change anything in my custom skin after creation.
So, I hope, it must be an exact copy of "Sunset". BUT IT IS NOT !.
When I use "Sunet", my RadGrid rows has equal height.
When I use custom skin, my RadGrid selected row became lower.

P.S.
Why it is impossible to attach *.css files?
This is Telerik Visual Style Builder created css file.

/*Telerik RadGrid Sunset Skin*/

/*global*/

.RadGrid_Custom
{
    border:1px solid #bbb99d;
    background:#fff;
    color:#272522;
}

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

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

.RadGrid_Custom .rgAdd,
.RadGrid_Custom .rgRefresh,
.RadGrid_Custom .rgEdit,
.RadGrid_Custom .rgDel,
.RadGrid_Custom .rgFilter,
.RadGrid_Custom .rgPagePrev,
.RadGrid_Custom .rgPageNext,
.RadGrid_Custom .rgPageFirst,
.RadGrid_Custom .rgPageLast,
.RadGrid_Custom .rgExpand,
.RadGrid_Custom .rgCollapse,
.RadGrid_Custom .rgSortAsc,
.RadGrid_Custom .rgSortDesc,
.RadGrid_Custom .rgUpdate,
.RadGrid_Custom .rgCancel,
.RadGrid_Custom .rgUngroup,
.RadGrid_Custom .rgExpXLS,
.RadGrid_Custom .rgExpDOC,
.RadGrid_Custom .rgExpPDF,
.RadGrid_Custom .rgExpCSV
{
 background-image:url('Grid/sprite.gif');
}

/*header*/

.RadGrid_Custom .rgHeaderDiv
{
 background:#e1dac7 0 -7550px repeat-x url('Grid/sprite.gif');
}
.rgTwoLines .rgHeaderDiv
{
 background-position:0 -7050px;
}

.RadGrid_Custom .rgHeader,
.RadGrid_Custom th.rgResizeCol
{
 border:1px solid;
 border-color:#e98879 #cd6a3f #71250a #872b07;
 border-top-width:0;
 background:0 -2300px repeat-x #b94d0a url('Grid/sprite.gif');
}

.RadGrid_Custom th.rgSorted
{
 border-color:#ec9883 #cd6a3f #854324 #8b3312;
 background-color:#c36624;
 background-position:0 -2600px;
}

.RadGrid_Custom .rgHeader,
.RadGrid_Custom .rgHeader a
{
    color:#fff;
}

/*rows*/

.RadGrid_Custom .rgRow td,
.RadGrid_Custom .rgAltRow td,
.RadGrid_Custom .rgEditRow td,
.RadGrid_Custom .rgFooter td
{
 border-style:solid;
 border-width:0 1px 1px;
}

.RadGrid_Custom .rgRow td
{
 border-color:#fff #fff #fff #cabaab;
}

.RadGrid_Custom .rgAltRow
{
 background:#f1e9dc;
}

.RadGrid_Custom .rgAltRow td
{
 border-color:#f1e9dc #f1e9dc #f1e9dc #cabaab;
}

.RadGrid_Custom .rgRow .rgSorted
{
 border-bottom-color:#f6f1e8;
 background-color:#f6f1e8;
}

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

.RadGrid_Custom .rgRow a,
.RadGrid_Custom .rgAltRow a,
.RadGrid_Custom .rgEditRow a,
.RadGrid_Custom .rgFooter a,
.RadGrid_Custom .rgEditForm a
{
 color:#5d1f00;
}

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

.RadGrid_Custom .rgActiveRow,
.RadGrid_Custom .rgHoveredRow
{
    background:#f2d328 0 -2900px repeat-x url('Grid/sprite.gif');
}
*+html .RadGrid_Custom .rgActiveRow .rgSorted,
*+html .RadGrid_Custom .rgHoveredRow .rgSorted{background-color:#f2d328}
* html .RadGrid_Custom .rgActiveRow .rgSorted,
* html .RadGrid_Custom .rgHoveredRow .rgSorted{background-color:#f2d328}

.RadGrid_Custom .rgEditRow
{
 background:#e1dac7;
}
*+html .RadGrid_Custom .rgEditRow .rgSorted{background-color:#e1dac7}
* html .RadGrid_Custom .rgEditRow .rgSorted{background-color:#e1dac7}

.RadGrid_Custom .rgSelectedRow td,
.RadGrid_Custom .rgActiveRow td,
.RadGrid_Custom .rgHoveredRow td,
.RadGrid_Custom .rgEditRow td
{
 border-left-width:0;
 border-right-width:0;
 padding-left:8px;
 padding-right:8px;
}

.RadGrid_Custom .rgSelectedRow td,
.RadGrid_Custom .rgSelectedRow td.rgSorted
{
 border-bottom-color:#ad5e2f;
}

.RadGrid_Custom .rgActiveRow td,
.RadGrid_Custom .rgHoveredRow td,
.RadGrid_Custom .rgActiveRow td.rgSorted,
.RadGrid_Custom .rgHoveredRow td.rgSorted
{
 border-bottom-color:#ca9a3e;
}

.RadGrid_Custom .rgEditRow td,
.RadGrid_Custom .rgEditRow td.rgSorted
{
 border-color:#e1dac7;
}

.RadGrid_Custom .rgDrag
{
 background-image:url('Grid/rgDrag.gif');
}

/*footer*/

.RadGrid_Custom .rgFooterDiv,
.RadGrid_Custom .rgFooter
{
 background:#e1dac7;
}

.RadGrid_Custom .rgFooter td
{
 border-top-width:1px;
 border-color:#cabaab #e1dac7 #f1e9dc #e1dac7;
}

/*status*/

.RadGrid_Custom .rgPager .rgStatus
{
 border:1px solid;
 border-color:#cabaab #cabaab #f1e9dc #cabaab;
 border-left-width:0;
}

.RadGrid_Custom .rgStatus div
{
 background-image:url('Common/loading_small.gif');
}

/*pager*/

.RadGrid_Custom .rgPager
{
 background:#e1dac7;
}

.RadGrid_Custom td.rgPagerCell
{
 border:1px solid;
 border-color:#cabaab #f1e9dc #f1e9dc;
 border-right-width:0;
}

.RadGrid_Custom .rgInfoPart
{
 color:#676462;
}

.RadGrid_Custom .rgInfoPart strong
{
 color:#272522;
}

.RadGrid_Custom .rgPageFirst
{
 background-position:0 -550px;
}
.RadGrid_Custom .rgPageFirst:hover
{
 background-position:0 -600px;
}
.RadGrid_Custom .rgPagePrev
{
 background-position:0 -700px;
}
.RadGrid_Custom .rgPagePrev:hover
{
 background-position:0 -750px;
}
.RadGrid_Custom .rgPageNext
{
 background-position:0 -850px;
}
.RadGrid_Custom .rgPageNext:hover
{
 background-position:0 -900px;
}
.RadGrid_Custom .rgPageLast
{
 background-position:0 -1000px;
}
.RadGrid_Custom .rgPageLast:hover
{
 background-position:0 -1050px;
}

.RadGrid_Custom .rgPager .rgPagerButton
{
 border-color:#b97322 #9d5d13 #824703;
 background:#f4be77 repeat-x 0 -1550px url('Grid/sprite.gif');
 color:#3d1400;
 font:12px/12px "segoe ui",arial,sans-serif;
}

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

.RadGrid_Custom .rgNumPart a
{
 color:#272522;
}

.RadGrid_Custom .rgNumPart a:hover
{
 background-position:100% -1250px;
 color:#863d02;
}

.RadGrid_Custom .rgNumPart a:hover span
{
 background-position:0 -1150px;
}

.RadGrid_Custom .rgNumPart a.rgCurrentPage,
.RadGrid_Custom .rgNumPart a.rgCurrentPage:hover
{
 background-position:100% -1450px;
 color:#5d1f00;
}

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

/*sorting, reordering*/

.RadGrid_Custom .rgHeader .rgSortAsc
{
 background-position:3px -247px;
 height:10px;
}

.RadGrid_Custom .rgHeader .rgSortDesc
{
 background-position:3px -197px;
 height:10px;
}

.GridReorderTop_Custom,
.GridReorderBottom_Custom
{
 background:0 0 no-repeat url('Grid/sprite.gif');
}

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

/*filtering*/

.RadGrid_Custom .rgFilterRow
{
 background:#e1dac7;
}

.RadGrid_Custom .rgFilterRow td
{
    border:1px solid;
    border-top-width:0;
    border-color:#e1dac7 #e1dac7 #89806b;
}

.RadGrid_Custom .rgFilter
{
 background-position:0 -300px;
}

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

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

.RadGrid_Custom .rgFilterBox
{
 border-color:#938879;
 font:12px "segoe ui",arial,sans-serif;
 color:#272522;
}

/*filter context menu*/

.RadMenu_Custom .rgHCMClear,
.RadMenu_Custom .rgHCMFilter
{
 border-color:#938879;
 background:#ded7c6 center -23px repeat-x url('FormDecorator/ButtonSprites.png');
 color:#3d1400;
 font-family:"segoe ui",arial,sans-serif;
}

.RadMenu_Custom .rgHCMClear:hover,
.RadMenu_Custom .rgHCMFilter:hover
{
 border-color:#bd8b2b #ad7e22 #9c6f18;
 background-position:center -67px;
 background-color:#f8e360;
}

/*context menu*/

.GridContextMenu_Custom .rmLeftImage
{
 background-image:url('Common/contextMenu.gif');
}

.GridContextMenu_Custom .rgHCMSortAsc .rmLeftImage
{
 background-position:0 0;
}

.GridContextMenu_Custom .rgHCMSortDesc .rmLeftImage
{
 background-position:0 -40px;
}

.GridContextMenu_Custom .rgHCMUnsort .rmLeftImage
{
 background-position:0 -80px;
}

.GridContextMenu_Custom .rgHCMGroup .rmLeftImage
{
 background-position:0 -120px;
}

.GridContextMenu_Custom .rgHCMUngroup .rmLeftImage
{
 background-position:0 -160px;
}

.GridContextMenu_Custom .rgHCMCols .rmLeftImage
{
 background-position:0 -200px;
}

.GridContextMenu_Custom .rgHCMFilter .rmLeftImage
{
 background-position:0 -240px;
}

.GridContextMenu_Custom .rgHCMUnfilter .rmLeftImage
{
 background-position:0 -280px;
}

/*grouping*/

.RadGrid_Custom .rgGroupPanel
{
 border:0;
 border-bottom:1px solid #504b41;
 background:#afa79a 0 -1900px repeat-x url('Grid/sprite.gif');
 color:#fff;
}

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

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

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

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

.RadGrid_Custom .rgUngroup
{
 background-position:0 -7000px;
}

.RadGrid_Custom .rgGroupItem
{
 border:1px solid #904c23;
 background:#e38443 0 -6500px repeat-x url('Grid/sprite.gif');
 color:#5d1f00;
}

.RadGrid_Custom .rgGroupHeader
{
    background:#a39787;
    font-size:1.1em;
    line-height:21px;
 color:#fff;
}

.RadGrid_Custom .rgGroupHeader td
{
    padding:0 8px;
}

.RadGrid_Custom td.rgGroupCol,
.RadGrid_Custom td.rgExpandCol
{
 background:#a39787 none;
 border-color:#a39787;
}

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

.RadGrid_Custom .rgCollapse
{
 background-position:3px -444px;
}

/*editing*/

.RadGrid_Custom .rgEditForm
{
 border-bottom:1px solid #cabaab;
 background:#eae5d7;
}

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

.RadGrid_Custom .rgCancel
{
 background-position:0 -1850px;
}

/*hierarchy*/

.RadGrid_Custom .rgDetailTable
{
 border-color:#cabaab;
}

/*command row*/

.RadGrid_Custom .rgCommandRow
{
 background:#585043 0 0 repeat-x url('Grid/rgCommandRow.gif');
 color:#fff;
}

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

.RadGrid_Custom thead .rgCommandCell
{
 border-bottom:1px solid #36332c;
}

.RadGrid_Custom tfoot .rgCommandCell,
.RadGrid_Custom .rgMasterTable>tbody>tr.rgCommandRow .rgCommandCell
{
 border-top:1px solid #36332c;
}

.RadGrid_Custom .rgCommandTable td
{
 border:0;
 padding:2px 7px;
}

.RadGrid_Custom .rgCommandTable
{
 border:1px solid;
 border-color:#968e7c #7c7669 #6d665a;
}

.RadGrid_Custom .rgCommandRow a
{
 color:#fff;
 text-decoration:none;
}

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

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

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

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

.RadGrid_Custom .rgExpXLS,
.RadGrid_Custom .rgExpDOC,
.RadGrid_Custom .rgExpPDF,
.RadGrid_Custom .rgExpCSV
{
 background-image:url('Common/export.gif');
}

.RadGrid_Custom .rgExpXLS
{
 background-position:0 0;
}
.RadGrid_Custom .rgExpDOC
{
 background-position:0 -50px;
}
.RadGrid_Custom .rgExpPDF
{
 background-position:0 -100px;
}
.RadGrid_Custom .rgExpCSV
{
 background-position:0 -150px;
}

/*multirow select*/

.GridRowSelector_Custom
{
 background:#71250a;
}

/*row drag n drop*/

.GridItemDropIndicator_Custom
{
    border-top:1px dashed #71250a;
}

/*tooltip*/

.GridToolTip_Custom
{
 border:1px solid #cabaab;
 padding:3px;
 background:#f6f1e8;
 color:#272522;
}

/*rtl*/

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

.RadGridRTL_Custom .rgPageFirst
{
 background-position:0 -1000px;
}
.RadGridRTL_Custom .rgPageFirst:hover
{
 background-position:0 -1050px;
}
.RadGridRTL_Custom .rgPagePrev
{
 background-position:0 -850px;
}
.RadGridRTL_Custom .rgPagePrev:hover
{
 background-position:0 -900px;
}
.RadGridRTL_Custom .rgPageNext
{
 background-position:0 -700px;
}
.RadGridRTL_Custom .rgPageNext:hover
{
 background-position:0 -750px;
}
.RadGridRTL_Custom .rgPageLast
{
 background-position:0 -550px;
}
.RadGridRTL_Custom .rgPageLast:hover
{
 background-position:0 -600px;
}

.RadGridRTL_Custom .rgExpand
{
 background-position:-20px -496px;
}

[Galin]

Hi Michal,

Some of the CSS rules in the custom and internal Skin files are with same specificity like the rules in the base CSS file. In such case it is important how the rules are ordered and if the base CSS rules are after the custom ones, they will override the skin styles. Therefore, you should load these files after them and you can use RadStyleSheetManager. For example

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
    <StyleSheets>
        <telerik:StyleSheetReference Path="Custom/Grid.Custom.css" />
        <telerik:StyleSheetReference Path="Custom/Input.Custom.css" />
    </StyleSheets>
</telerik:RadStyleSheetManager>

Also, the better solution is to build a custom Skin assembly,  please refer to this pages for more info:
http://www.telerik.com/help/aspnet-ajax/introduction-skins-external-assembly.html
http://www.telerik.com/community/code-library/aspnet-ajax/general/how-to-load-skins-from-external-assemblies.aspx

Additionally, you can use the following tool, which is provided from our customer
http://www.acdevsoftware.ch/Download/Default.aspx?lang=en#TOOLS

I hope this helps.

Regards,
Galin
the Telerik team