Custom skin and LoadingPanel problem

6 posts, 0 answers
  1. Michal
    Michal avatar
    3 posts
    Member since:
    Oct 2012

    Posted 15 Oct 2012 Link to this post

    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.

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 18 Oct 2012 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michal
    Michal avatar
    3 posts
    Member since:
    Oct 2012

    Posted 23 Oct 2012 Link to this post

    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".
  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 26 Oct 2012 Link to this post

    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
    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.
  6. Michal
    Michal avatar
    3 posts
    Member since:
    Oct 2012

    Posted 26 Oct 2012 Link to this post

    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;
    }

  7. Galin
    Admin
    Galin avatar
    526 posts

    Posted 31 Oct 2012 Link to this post

    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
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017