image does not rendered in custom skin

5 posts, 0 answers
  1. John
    John avatar
    3 posts
    Member since:
    Jun 2012

    Posted 18 Oct 2011 Link to this post

    I have created a custom skin using the Visual Style Builder. The new skin is based on a skin "Office2007". After deploying the new skin, I copied over two gif files from Office2007\Grid folder, SingleMinus.gif and SinglePlus.gif, to the grid folder under new skin. After the page loaded I can see the link to new skin's css file and custom color got applied. But those two images mentioned above did not show in my page.

    BTW, I modified the file Grid.OfficeBase.css as follows:

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

    .RadGrid_Office2007Base .rgExpand
    {
        background-image:url('Grid/SinglePlus.gif');
    }
    .RadGrid_Office2007Base .rgCollapse
    {
        background-image:url('Grid/SingleMinus.gif');
    }

    Any help would be very appreciated.
  2. John
    John avatar
    3 posts
    Member since:
    Jun 2012

    Posted 18 Oct 2011 Link to this post

    So really the question is how to customize the background image for rgExpand and rgCollapse.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. James Campbell
    James Campbell avatar
    90 posts
    Member since:
    Jul 2012

    Posted 20 Oct 2011 Link to this post

    Hi John,

    Are you sure the pathing is right, run something like fiddler: http://www.fiddler2.com/fiddler2/ and see what the staus code is, if the image is being asked for. Hope that helps.

    Thanks,
    James Campbell
  5. Jaffer
    Jaffer avatar
    4 posts
    Member since:
    Jul 2012

    Posted 28 Nov 2012 Link to this post

    Hi Team,

    Issue : Style/CSS rendering issue in IE and Firefox for Telerik controls.

    Details:

    Telerik version: 2012.3.1016.40

    We have created custom css dll  ie (included all custom css fiels for required telerik controls in a dll) and used that in our project.

    Steps followed :

    1.Included the newly created dll into the Web project references.

    2.Referred the skin name in the dll for the required controls in my page as follows ,

    private void LoadTelerikSkins()
            {
                // Controls for primary (CustomSkin) skin
                string[] primaryControls = { "Button", "Calendar", "ComboBox", "Dock", "TabStrip", "TreeView", "Grid", "Window" };
                // Controls for secondary (CustomSkinSecondary) skin
                string[] secondaryControls = { "Button", "Dock", "TabStrip", "Menu" };

                // Dynamically load only skins that are needed into RadStyleSheetManager
                foreach (string ctl in primaryControls)
                {
                    radStyleSheetManager.StyleSheets.Add(new StyleSheetReference(String.Format("TestApplication.solutions.Presentation.Telerik.Skins.CustomSkin.CustomSkin.{0}.CustomSkin.css", ctl), "CustomSkin.eSolutions.Presentation.Telerik.Skins.CustomSkin"));
                }
                foreach (string ctl in secondaryControls)
                {
                    radStyleSheetManager.StyleSheets.Add(new StyleSheetReference(String.Format("TestApplication.solutions.Presentation.Telerik.Skins.CustomSkinSecondary.CustomSkinSecondary.{0}.CustomSkinSecondary.css", ctl),                                            "TestApplication.solutions.Presentation.Telerik.Skins.CustomSkinSecondary"));
                }
            }

    <telerik:RadButton ID="LoginButton" runat="server" Text="Login >" Skin="CustomSkin" EnableEmbeddedSkins="false" TabIndex="5" OnClick="LoginButton_Click"/>

    3.Here the Skin="CustomSkin"  refers to the skin that is available in my dll.

    From the above example the background image for the button control [which getting from the webresource of Telerik.Web.UI.dll] is not rendering to the control, also some times it works fine if we refreshed the page or clearing the cahce and some times it wouldn't shows the skins even we refresh or clearing the cache.

    The above senario is applying for all the controls and features like combo box, tree view, menu tabs , popup windows etc...

    Please help on this issue. Any help would be very appreciated.
  6. Galin
    Admin
    Galin avatar
    526 posts

    Posted 03 Dec 2012 Link to this post

    Hello Jaffer,

    You can refer to this help topic and code library
    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

    I hope this helps.

    All the best,
    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