[Solved] Custom Skin and Image button

[GD]

I copied "Vista" skin directory.
I modified name example: Ajax.Vista.css -> Ajax.SESkin.css
I modified name all css class example: .RadAjax_Vista -> .RadAjax_SESkin
( http://www.telerik.com/help/aspnet-ajax/themeshowto.html )
I copied this my directory SESkin in App_Theme\SETheme
I created SESkin.skin in App_Theme\SETheme:

 

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<telerik:RadCalendar runat="server"
                     EnableEmbeddedSkins="false"
                     Skin="SESkin" />

<telerik:RadChart runat="server"
                  EnableEmbeddedSkins="false"
                  Skin="SESkin" />

<telerik:RadColorPicker runat="server"
                        EnableEmbeddedSkins="false"
                        Skin="SESkin" />

<telerik:RadComboBox runat="server"
                     EnableEmbeddedSkins="false"
                     Skin="SESkin" />

<telerik:RadDock runat="server"
                 EnableEmbeddedSkins="false"
                 Skin="SESkin" />

<telerik:RadDatePicker runat="server"
                       EnableEmbeddedSkins="false"
                       Skin="SESkin" />

<telerik:RadGrid runat="server"
                 EnableEmbeddedSkins="false"
                 Skin="SESkin"
                 EnableLinqExpressions="false"
                 GroupingSettings-CaseSensitive="false" />



<telerik:RadEditor runat="server"
                   EnableEmbeddedSkins="false"
                   Skin="SESkin" />

<telerik:RadFileExplorer runat="server"
                         EnableEmbeddedSkins="false"
                         Skin="SESkin" />

<telerik:RadFormDecorator runat="server"
                          EnableEmbeddedSkins="false"
                          Skin="SESkin" />

<telerik:RadMaskedTextBox runat="server"
                          EnableEmbeddedSkins="false"
                          Skin="SESkin" />

<telerik:RadMenu runat="server"
                 EnableEmbeddedSkins="false"
                 Skin="SESkin" />

<telerik:RadTextBox runat="server"
                    EnableEmbeddedSkins="false"
                    Skin="SESkin" />

<telerik:RadDateInput runat="server"
                      EnableEmbeddedSkins="false"
                      Skin="SESkin" />

<telerik:RadPanelBar runat="server"
                     EnableEmbeddedSkins="false"
                     Skin="SESkin" />

<telerik:RadProgressArea runat="server"
                         EnableEmbeddedSkins="false"
                         Skin="SESkin" />

<telerik:RadRotator runat="server"
                    EnableEmbeddedSkins="false"
                    Skin="SESkin" />

<telerik:RadScheduler runat="server"
                      EnableEmbeddedSkins="false"
                      Skin="SESkin" />

<telerik:RadSlider runat="server"
                   EnableEmbeddedSkins="false"
                   Skin="SESkin" />

<telerik:RadSpell runat="server"
                  EnableEmbeddedSkins="false"
                  Skin="SESkin" />

<telerik:RadSplitter runat="server"
                     EnableEmbeddedSkins="false"
                     Skin="SESkin" />

<telerik:RadTabStrip runat="server"
                     EnableEmbeddedSkins="false"
                     Skin="SESkin" />

<telerik:RadToolBar runat="server"
                    EnableEmbeddedSkins="false"
                    Skin="SESkin" />

<telerik:RadToolTip runat="server"
                    EnableEmbeddedSkins="false"
                    Skin="SESkin" />

<telerik:RadTreeView runat="server"
                     EnableEmbeddedSkins="false"
                     Skin="SESkin" />

<telerik:RadUpload runat="server"
                   EnableEmbeddedSkins="false"
                   Skin="SESkin" />

<telerik:RadWindow runat="server"
                   EnableEmbeddedSkins="false"
                   Skin="SESkin" />

<telerik:RadWindowManager runat="server"
                          EnableEmbeddedSkins="false"
                          Skin="SESkin" />

In my page set this Theme.

It's all ok but It's impossibile view edit-icon, delete-icon, cancel-icon etc.
But refresh-icon anche Add-icon are ok!

[Dimo]

Hi Claudio,

The edit / delete / update / cancel images do not follow the other images' behavior for historical reasons. In other words, they do not use the skin's sprites by default, although the skin provides styles for such buttons. You can define their appearance by using CSS classes from the skin, or by using image URLs:

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="600px"
    EnableEmbeddedSkins="false"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView CommandItemDisplay="Top">
        <Columns>
            <telerik:GridButtonColumn ButtonCssClass="rgEdit" ButtonType="PushButton" Text=" " CommandName="Edit" HeaderText="SpriteButton Edit" />
            <telerik:GridButtonColumn ButtonType="ImageButton" ImageUrl="~/grid_images/Edit.gif" CommandName="Edit" HeaderText="ImageButton Edit" />
            <telerik:GridClientDeleteColumn ButtonCssClass="rgDel" ButtonType="PushButton" Text=" " HeaderText="SpriteButton Delete" />
            <telerik:GridClientDeleteColumn ButtonType="ImageButton" ImageUrl="~/grid_images/Delete.gif" HeaderText="ImageButton Delete" />
        </Columns>
        <EditFormSettings>
            <EditColumn ButtonType="ImageButton"
                UpdateImageUrl="~/grid_images/Update.gif"
                InsertImageUrl="~/grid_images/AddRecord.gif"
                CancelImageUrl="~/grid_images/Cancel.gif" />
        </EditFormSettings>
    </MasterTableView>
</telerik:RadGrid>

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[GD]

I set a "ImagesPath" radgrid's property and it works correct.

<telerik:RadGrid runat="server"
                 EnableEmbeddedSkins="false"
                 Skin="SESkin"
                 ImagesPath="App_Themes/SETheme/SESkin/Grid/"
                 EnableLinqExpressions="false"
                 GroupingSettings-CaseSensitive="false">

Do you see any contraindications?

[Dimo]

Hello Claudio,

Everything looks OK, apart from

ImagesPath="~/App_Themes/SETheme/SESkin/Grid/"

All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.