Custom Skins - Global Referencing?

21 posts, 2 answers
  1. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 19 Dec 2008 Link to this post

    Hello,

    With the built-in skins, I see that you can set the skin that  you are using in the configuration file, in appsettings like:

    <appSettings>
        <add key="Telerik.Skin" value="Web20" />
    </appSettings>

    If I create a custom Skin, should this approach work?

    Also, is there a global place to put EnableEmbeddedSkins to false?  I don't want to have to specify that for each and every control...

    Thanks.
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 19 Dec 2008 Link to this post

    Hi Brian Mains,

    Yes, you can define a global custom skin in web.config in the same way as an embedded skin.

    EnableEmbeddedSkins="false" can also be set in web.config in a similar pattern:

    <add key="Telerik.EnableEmbeddedSkins" value="false"/>


    All the best,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 19 Dec 2008 Link to this post

    Hey,

    Thanks, another question... if the custom skin is in the App_Themes folder, does that work the same?  And, do the styles names in the css file, and the name of the CSS file, have to be any particular convention?  For instance, if I have a theme Default, does the layout of the folder structure have to be:

    App_Themes
       Default
            Grid (images folder)
            Grid.Default.css

    And do the styles have to be:

    Grid_Default

    For that to work?  Or is there another approach?  We're having issues with the global reference working...

    Thanks.
  5. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 19 Dec 2008 Link to this post

    Hello Brian,


    --- if the custom skin is in the App_Themes folder, does that work the same

    Yes, you can register a global skin through web.config and place the CSS files in an ASP.NET theme.


    ---
    if I have a theme Default, does the layout of the folder structure have to be .....

    No, when using custom skins, you can have any folder structure that suits your needs. You only have to make sure that the skin images are correctly referenced in the CSS file and that the CSS file is properly registered on the page.


    --- do the styles have to be Grid_Default

    A custom skin must follow the naming convention of the cotnrol's CSS classes, otherwise the skin will not work.

    Here is an example. Suppose that the embedded RadGrid Default skin contains the following CSS rule:

    .RadGrid_Default
    {
         background: grey;
    }

    If you take the Default skin and rename it to MyCustomSkin, you will have to have the following CSS rule:

    .RadGrid_MyCustomSkin
    {
         background: grey;
    }

    The skin suffix used in the CSS classes must match exactly the skin setting used for a given control (mind the letter casing).

    If you have further troubles getting your custom skins work, please send us a sample project or a live URL.


    Kind regards,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 19 Dec 2008 Link to this post

    Dimo,

    Thanks, that helps.  One other question is does the RadGrid's css file have to be named RadGrid.Default.css?  Also, after this is all done and correctly setup, to confirm I should be able to do this to use it:

     

    <appSettings>

        <add key="Telerik.Skin" value="Default" />

        <add key="Telerik.EnableEmbeddedSkins" value="false" />

    </appSettings>

     

    And then it should pick up my custom theme?

    Also, when you say " that the CSS file is properly registered on the page", themes normally create <link rel=""> etc. for you, so is there any other registration that needs done?

    Thanks for the help.

  7. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 19 Dec 2008 Link to this post

    Hi Brian,

    The CSS files for RadControls custom skins can have any filename. You also don't have to keep the skin name as a part of the file name.


    ---- themes normally create <link rel=""> etc. for you, so is there any other registration that needs done

    No, the <link> tag inserted by the theme is enough for the skin file to be registered properly on the page.


    Generally, if a CSS file (custom skin) is registered successfully on the page and does not work, the problem could be:

    - the control's skin property does not match the skin suffix in the skin's CSS classes
    - the custom skin's CSS class naming convention does not match the naming convention of the control's version. For example in Q3 2008 we renamed the CSS classes of RadInput and RadCalendar in order to optimize the skins. As a result, the custom skins created before Q3 2008 should be migrated (related help articles are available online).
    - there are more than 32 CSS registered on the page (Internet Explorer limitation)
    - invalid CSS code, e.g. having syntax errors


    Let us know if you need more information.


    Regards,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 19 Dec 2008 Link to this post

    Thanks, that worked great.
  9. mark
    mark avatar
    16 posts
    Member since:
    Jul 2012

    Posted 13 May 2009 Link to this post

    Hello,

    I am attempting a similar solution and have tried to follow your suggestions, but without any success.  I have called my custom skin "Eclipse3" and have completed the following:

    1.  created a new theme in the VS2008 project App_Themes folder called "Eclipse3" 

    2. added a skin file to the theme directory called "Eclipse3.skin" and added the following directive as suggested

    <%

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

     


    2.  copied the files from the "skins/Vista" skin into the "/App_Themes/Eclipse3" directory

    3.  rename ALL the skin css files to "Eclipse3" ie. from "/App_Themes/Eclipse3/Ajax.Vista.css" to "/App_Themes/Eclipse3/Ajax.Eclipse3.css"

    4. edit all the css files in the "/App_Themes/Eclipse3" directory and replace all instances of "Vista" with "Eclipse3"

    5. Include all the theme files in the project

    6. edit the web.config and add the following two keys

    <

     

    add key="Telerik.Skin" value="Eclipse3"/>

     

    <

     

    add key="Telerik.EnableEmbeddedSkins" value="False"/>

     

    7. edit the web.config and edit the following tag
    <

     

    pages theme="Eclipse3">

    The page runs but it does not pick up the skin.
    Any ideas what I have done wrong?
    Regards
    Mark.

     

  10. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 May 2009 Link to this post

    Hello Mark,

    Please make sure that the CSS files are registered on the page and afterwards, refer to my previous post in this forum thread for more troubleshooting tips.

    Note that if your custom skin has been created on the basis of the Q3 2008 Vista skin (or earlier version) it will not work with Q1 2009, because a lot of CSS classes have been renamed.

    Let us know how it goes.

    Regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  11. mark
    mark avatar
    16 posts
    Member since:
    Jul 2012

    Posted 13 May 2009 Link to this post

    Hello Dimo,

    Firstly, an apology as I have also raised this issue as a seperate thread in case my original query was not picked up.

    I have created a radmenu in a testpage and registered the css files as follows in the web page:

    <

     

    head runat="server">

     

     

    <title></title>

     

     

    <link id="Link1" href="~/App_Themes/Eclipse3/Menu.Eclipse3.css" rel="stylesheet" type="text/css" runat="server"/>

     

     

    <link id="Link2" href="~/App_Themes/Eclipse3/Window.Eclipse3.css" rel="stylesheet" type="text/css" runat="server"/>

     

     

    <link id="Link3" href="~/App_Themes/Eclipse3/Widgets.Eclipse3.css" rel="stylesheet" type="text/css" runat="server"/>

     

     

    <link id="Link4" href="~/App_Themes/Eclipse3/Toolbar.Eclipse3.css" rel="stylesheet" type="text/css" runat="server"/>

     

     

    <link id="Link5" href="~/App_Themes/Eclipse3/Input.Eclipse3.css" rel="stylesheet" type="text/css" runat="server"/>

     

     

    <link id="Link6" href="~/App_Themes/Eclipse3/FormDecorator.Eclipse3.css" rel="stylesheet" type="text/css" runat="server"/>

     

     

    <link id="Link7" href="~/App_Themes/Eclipse3/Ajax.Eclipse3.css" rel="stylesheet" type="text/css" runat="server"/>

     

     

    <link id="Link8" href="~/App_Themes/Eclipse3/ColorPicker.Eclipse3.css" rel="stylesheet" type="text/css" runat="server"/>

     

    </

     

    head>

    I have created the radmenu as follows:

     

    <

     

    telerik:RadMenu ID="RadMenu2" Runat="server" EnableTheming="true" Flow="Horizontal" >

     

     

     

     

     

    <Items >

     

     

     

     

     

    <telerik:RadMenuItem runat="server" Text="Jobs" >

     

     

     

     

     

    <Items>

     

     

     

     

     

    <telerik:RadMenuItem runat="server" Text="Lodge a Job" >

     

     

     

     

     

    </telerik:RadMenuItem>

     

    ..........

     

    </Items>

     

     

    </telerik:RadMenu>

     



    I copied the vista skin from the following directory that was installed with the demo download
    C:\Program Files\Telerik\RadControls for ASPNET AJAX Q1 2009\Skins\Vista

    what did you mean by "afterwards" in the following:

    "Please make sure that the CSS files are registered on the page and afterwards"

    regards
    Mark

  12. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 May 2009 Link to this post

    Hello Mark,

    What I meant to say in my previous message was that when one investigates a "skin not being picked up" issue, the first thing to make sure is that the required CSS files are registered properly on the page.

    If we suppose that this is true, and the custom skin is still not picked up, then here are some more guidelines:

    - the control's skin property does not match the skin suffix in the skin's CSS classes
    - the custom skin's CSS class naming convention does not match the naming convention of the control's version. As far as I can see, your custom skin is based on Q1 2009 Vista. Please make sure that the Telerik.Web.UI assembly version starts with 2009.1.
    - there are more than 32 CSS registered on the page (Internet Explorer limitation)
    - invalid CSS code, e.g. having syntax errors in the CSS file


    if you still need assistance on the problem, please paste one of the CSS files, e.g. for RadMenu.


    Greetings,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  13. mark
    mark avatar
    16 posts
    Member since:
    Jul 2012

    Posted 13 May 2009 Link to this post

    Hello Dimo

    do I need the Eclipse3.skin file?

    menu.Eclipse3.css is as follows:

    Regards
    Mark

    /* <RadMenu / Eclipse3> */

    .RadMenu_Eclipse3

     

    .rmRootGroup,

     

    .RadMenu_Eclipse3

     

    .rmLink,

     

    .RadMenu_Eclipse3

     

    .rmText,

     

    .RadMenu_Eclipse3

     

    .rmLeftArrow,

     

    .RadMenu_Eclipse3

     

    .rmRightArrow,

     

    .RadMenu_Eclipse3

     

    .rmTopArrow,

     

    .RadMenu_Eclipse3

     

    .rmBottomArrow

     

    {

     

    background-image: url('Menu/rmSprite.png');

     

     

    background-color: transparent;

     

    }

    .RadMenu_Eclipse3

     

    .rmRootGroup

     

    {

     

    border: 1px solid #828282;

     

     

    background-repeat: repeat-x;

     

     

    background-position: 0 -408px;

     

     

    background-color: #e6e6e6;

     

    }

    /* <Root items> */

    .RadMenu_Eclipse3

     

    ,

     

    .RadMenu_Eclipse3

     

    .rmLink

     

    {

     

    font: normal 12px/23px "Segoe UI", Arial, sans-serif;

     

     

    color: #000;

     

     

    text-decoration: none;

     

    }

    .RadMenu_Eclipse3

     

    .rmLink,

     

    .RadMenu_Eclipse3

     

    .rmDisabled,

     

    .RadMenu_Eclipse3

     

    .rmDisabled:hover

     

    {

     

    background-position: 0 -72px;

     

    }

    .RadMenu_Eclipse3

     

    .rmText,

     

    .RadMenu_Eclipse3

     

    .rmDisabled .rmText,

     

    .RadMenu_Eclipse3

     

    .rmDisabled:hover .rmText

     

    {

     

    background-position: 100% -96px;

     

    }

    .RadMenu_Eclipse3

     

    .rmFirst .rmLink,

     

    .RadMenu_Eclipse3

     

    .rmFirst .rmLink:hover,

     

    .RadMenu_Eclipse3

     

    .rmLast .rmText,

     

    .RadMenu_Eclipse3

     

    .rmLast .rmLink:hover .rmText,

     

    .RadMenu_Eclipse3

     

    .rmVertical .rmLink,

     

    .RadMenu_Eclipse3

     

    .rmVertical .rmText

     

    {

     

    background-repeat: no-repeat;

     

     

    background-position: 0 500px;

     

    }

    .RadMenu_Eclipse3

     

    .rmVertical .rmFirst,

     

    .RadMenu_Eclipse3

     

    .rmVertical .rmLast

     

    {

     

    background: none;

     

    }

    .RadMenu_Eclipse3

     

    .rmLink:hover,

     

    .RadMenu_Eclipse3

     

    .rmFocused

     

    {

     

    background-color: #fff;

     

    }

    .RadMenu_Eclipse3

     

    .rmVertical .rmLink

     

    {

     

    padding-top: 1px;

     

     

    padding-bottom: 1px;

     

    }

    .RadMenu_Eclipse3

     

    .rmVertical .rmLink:hover,

     

    .RadMenu_Eclipse3

     

    .rmVertical .rmFocused,

     

    .RadMenu_Eclipse3

     

    .rmVertical .rmExpanded,

     

    .RadMenu_Eclipse3

     

    .rmVertical .rmExpanded:hover

     

    {

     

    padding-top: 0;

     

     

    padding-bottom: 0;

     

     

    border-style: solid;

     

     

    border-color: #828282;

     

     

    border-width: 1px 0;

     

    }

    .RadMenu_Eclipse3

     

    .rmVertical .rmFirst .rmLink:hover,

     

    .RadMenu_Eclipse3

     

    .rmVertical .rmFirst .rmFocused,

     

    .RadMenu_Eclipse3

     

    .rmVertical .rmFirst .rmExpanded,

     

    .RadMenu_Eclipse3

     

    .rmVertical .rmFirst .rmExpanded:hover

     

    {

     

    padding-top: 1px;

     

     

    padding-bottom: 0;

     

     

    border-top-width: 0;

     

    }

    .RadMenu_Eclipse3

     

    .rmVertical .rmLast .rmLink:hover,

     

    .RadMenu_Eclipse3

     

    .rmVertical .rmLast .rmFocused,

     

    .RadMenu_Eclipse3

     

    .rmVertical .rmLast .rmExpanded,

     

    .RadMenu_Eclipse3

     

    .rmVertical .rmLast .rmExpanded:hover

     

    {

     

    padding-bottom: 1px;

     

     

    padding-top: 0;

     

     

    border-bottom-width: 0;

     

    }

    .RadMenu_Eclipse3

     

    .rmVertical .rmItem .rmDisabled:hover

     

    {

     

    padding-top: 1px;

     

     

    padding-bottom: 1px;

     

     

    border-width: 0;

     

    }

    .RadMenu_Eclipse3

     

    .rmExpanded,

     

    .RadMenu_Eclipse3

     

    .rmExpanded:hover

     

    {

     

    background-color: #fff;

     

     

    background-position: 0 -72px;

     

    }

    .RadMenu_Eclipse3

     

    .rmExpanded .rmText,

     

    .RadMenu_Eclipse3

     

    .rmExpanded:hover .rmText

     

    {

     

    background-position: 100% -96px;

     

    }

    .RadMenu_Eclipse3

     

    .rmLast .rmExpanded .rmText

     

    {

     

    background-position: 0 500px;

     

     

    background-repeat: no-repeat;

     

    }

    .RadMenu_Eclipse3

     

    .rmDisabled,

     

    .RadMenu_Eclipse3

     

    .rmDisabled:hover

     

    {

     

    color: #7d7d7d;

     

     

    background-color: transparent;

     

    }

    /* </Root items> */

     

    /* <Submenu items> */

    .RadMenu_Eclipse3

     

    .rmGroup,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmVertical

     

    {

     

    border: 1px solid #979797;

     

     

    background: #fff url('Menu/rmVSprite.png') repeat-y 0 0;

     

    }

    .RadMenu_Eclipse3

     

    .rmSlide .rmScrollWrap

     

    {

     

    background-image: none;

     

    }

    .RadMenu_Eclipse3_rtl

     

    .rmGroup,

     

    .RadMenu_Eclipse3_rtl

     

    .rmGroup .rmVertical

     

    {

     

    background-position: 100% 0;

     

    }

    .RadMenu_Eclipse3

     

    .rmRootGroup li.rmItem .rmGroup

     

    {

     

    padding-bottom: 0;

     

    }

    .RadMenu_Eclipse3

     

    .rmRootGroup .rmHorizontal

     

    {

     

    background-image: none;

     

    }

    .RadMenu_Eclipse3

     

    .rmScrollWrap .rmVertical

     

    {

     

    border: 0;

     

    }

    .RadMenu_Eclipse3

     

    .rmGroup .rmItem .rmLink,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmItem .rmLink:hover,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmItem .rmFocused,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmItem .rmExpanded

     

    {

     

    padding-top: 0;

     

     

    padding-bottom: 0;

     

     

    border: 0;

     

    }

    .RadMenu_Eclipse3

     

    .rmGroup .rmLast .rmLink,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmLast .rmLink:hover,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmLast .rmFocused,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmLast .rmExpanded

     

    {

     

    padding-bottom: 1px;

     

    }

    .RadMenu_Eclipse3

     

    .rmGroup .rmLink,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmText,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmItem .rmDisabled,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmItem .rmDisabled:hover,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmItem .rmDisabled .rmText,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmItem .rmDisabled:hover .rmText

     

    {

     

    background-position: 0 500px;

     

     

    background-repeat: no-repeat;

     

     

    background-color: transparent;

     

    }

    .RadMenu_Eclipse3

     

    .rmGroup .rmLink:hover,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmFocused,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmExpanded

     

    {

     

    background-position: 0 -168px;

     

    }

    .RadMenu_Eclipse3

     

    .rmGroup .rmLink:hover .rmText,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmFocused .rmText,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmExpanded .rmText

     

    {

     

    background-position: 100% -192px;

     

    }

    /* <expand arrows> */

    .RadMenu_Eclipse3

     

    .rmGroup .rmExpandRight,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmExpandDown,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmItem .rmDisabled .rmExpandRight,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmItem .rmDisabled .rmExpandDown,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmItem .rmDisabled:hover .rmExpandRight,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmItem .rmDisabled:hover .rmExpandDown

     

    {

     

    background-position: 100% -216px;

     

    }

    .RadMenu_Eclipse3

     

    .rmGroup .rmLink:hover .rmExpandRight,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmFocused .rmExpandRight,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmExpanded .rmExpandRight,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmLink:hover .rmExpandDown,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmFocused .rmExpandDown,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmExpanded .rmExpandDown

     

    {

     

    background-position: 100% -240px;

     

    }

    .RadMenu_Eclipse3

     

    .rmGroup .rmDisabled:hover .rmExpandRight,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmDisabled:hover .rmExpandDown

     

    {

     

    background-image: url('Menu/rmSprite.png');

     

     

    background-position: 100% -216px;

     

    }

    /* </expand arrows> */

    /* <rtl> */

    .RadMenu_Eclipse3_rtl

     

    .rmLink

     

    {

     

    background-position: 100% -96px;

     

    }

    .RadMenu_Eclipse3_rtl

     

    .rmText

     

    {

     

    background-position: 0 -72px;

     

    }

    .RadMenu_Eclipse3_rtl

     

    .rmVertical .rmExpanded .rmText,

     

    .RadMenu_Eclipse3_rtl

     

    .rmVertical .rmExpanded:hover .rmText

     

    {

     

    background-position: 0 500px;

     

     

    background-repeat: no-repeat;

     

    }

    .RadMenu_Eclipse3_rtl

     

    .rmGroup .rmLink:hover,

     

    .RadMenu_Eclipse3_rtl

     

    .rmGroup .rmFocused,

     

    .RadMenu_Eclipse3_rtl

     

    .rmGroup .rmExpanded

     

    {

     

    background-position: 100% -264px;

     

    }

    .RadMenu_Eclipse3_rtl

     

    .rmGroup .rmLink:hover .rmText,

     

    .RadMenu_Eclipse3_rtl

     

    .rmGroup .rmFocused .rmText,

     

    .RadMenu_Eclipse3_rtl

     

    .rmGroup .rmExpanded .rmText

     

    {

     

    background-position: 0 -288px;

     

    }

    .RadMenu_Eclipse3_rtl

     

    .rmGroup .rmExpandLeft

     

    {

     

    background-position: 0 -312px;

     

    }

    .RadMenu_Eclipse3_rtl

     

    .rmGroup .rmLink:hover .rmExpandLeft,

     

    .RadMenu_Eclipse3_rtl

     

    .rmGroup .rmFocused .rmExpandLeft,

     

    .RadMenu_Eclipse3_rtl

     

    .rmGroup .rmExpanded .rmExpandLeft

     

    {

     

    background-position: 0 -336px;

     

    }

    /* </rtl> */

    /* </Submenu items> */

    /* <Submenu offsets (Eclipse3 - specific, overlapping submenus)> */

    .RadMenu_Eclipse3

     

    .rmSlide

     

    {

     

    margin: 0 0 0 -1px;

     

    }

    .RadMenu_Eclipse3

     

    .rmVertical .rmSlide,

     

    .RadMenu_Eclipse3

     

    .rmSlide .rmSlide,

     

    .RadMenu_Eclipse3_Context

     

    .rmGroup .rmSlide

     

    {

     

    margin: 0 0 0 -5px;

     

    }

    .RadMenu_Eclipse3_rtl

     

    .rmSlide

     

    {

     

    margin: 0 0 0 0;

     

    }

    .RadMenu_Eclipse3_rtl

     

    .rmFirst .rmSlide

     

    {

     

    margin-left: 1px;

     

    }

    .RadMenu_Eclipse3_rtl

     

    .rmVertical .rmSlide,

     

    .RadMenu_Eclipse3_rtl

     

    .rmSlide .rmSlide,

     

    .RadMenu_Eclipse3_Context_rtl

     

    .rmGroup .rmSlide

     

    {

     

    margin: 0 0 0 5px;

     

    }

    /* </Submenu offsets> */

    /* <Scrolling arrows> */

    .RadMenu_Eclipse3

     

    .rmLeftArrow,

     

    .RadMenu_Eclipse3

     

    .rmRightArrow

     

    {

     

    background-color: #E6E6E6;

     

    }

    .RadMenu_Eclipse3

     

    .rmLeftArrow { background-position: -8px -312px; border-right: 1px solid #828282; }

     

    .RadMenu_Eclipse3

     

    .rmRightArrow { background-position: -482px -216px; border-left: 1px solid #828282; }

     

    .RadMenu_Eclipse3

     

    .rmTopArrow,

     

    .RadMenu_Eclipse3

     

    .rmBottomArrow,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmLeftArrow,

     

    .RadMenu_Eclipse3

     

    .rmGroup .rmRightArrow

     

    {

     

    background-color: #E6E6E6;

     

    }

    .RadMenu_Eclipse3

     

    .rmTopArrow { background-position: 50% -367px; border-bottom: 1px solid #828282; }

     

    .RadMenu_Eclipse3

     

    .rmBottomArrow { background-position: 50% -391px; border-top: 1px solid #828282; }

     

    /* </Scrolling arrows> */

    /* <Separators> */

    .RadMenu_Eclipse3

     

    .rmHorizontal .rmSeparator .rmText,

     

    .RadMenu_Eclipse3

     

    .rmVertical .rmHorizontal .rmSeparator .rmText

     

    {

     

    height: 22px;

     

     

    margin: 1px 0 0;

     

     

    width: 1px;

     

     

    background-color: #A8A8A8;

     

    }

    .RadMenu_Eclipse3_Context

     

    .rmSeparator .rmText,

     

    .RadMenu_Eclipse3

     

    .rmHorizontal .rmGroup .rmSeparator .rmText,

     

    .RadMenu_Eclipse3

     

    .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText

     

    {

     

    background-color: transparent;

     

     

    background-position: 0 -406px;

     

    }

    /* </Separators> */

    /* </RadMenu / Eclipse3> */

  14. mark
    mark avatar
    16 posts
    Member since:
    Jul 2012

    Posted 13 May 2009 Link to this post

    Hello Dimo,

    I have now added a radgrid to my test page to see if that works any better.

    Like the menu, it runs but fails to pick up the theme correctly.  ie. It is looking for the edit.gif file in the root directory of the application ie localhost.  This makes me think that the theme defintion is wrong somewhere.

    any clues would be much appreciated.
    Regards
    Mark.

    my full page definiton is as follows:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="mmtest1.aspx.vb" Inherits="Eclipse3ProtoB.mmtest1" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title></title>
    <link href="~/App_Themes/Eclipse3/Menu.Eclipse3.css" rel="stylesheet" type="text/css" runat="server"/>
    <link href="~/App_Themes/Eclipse3/Grid.Eclipse3.css" rel="stylesheet" type="text/css" runat="server" />
    <link href="~/App_Themes/Eclipse3/Widgets.Eclipse3.css" rel="stylesheet" type="text/css" runat="server" />
    <link href="~/App_Themes/Eclipse3/Window.Eclipse3.css" rel="stylesheet" type="text/css" runat="server" />
    </head>
    <body>
    <form id="form1" runat="server">
    <table width="100%">
    <tr width="100%">
    <td width="100%">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="RadGrid1">
    <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
    </UpdatedControls>
    </telerik:AjaxSetting>
    <telerik:AjaxSetting AjaxControlID="RadMenu2">
    <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="RadMenu2" />
    </UpdatedControls>
    </telerik:AjaxSetting>
    </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadMenu ID="RadMenu2" Runat="server" >
    <Items >
    <telerik:RadMenuItem runat="server" Text="Jobs" >
    <Items>
    <telerik:RadMenuItem runat="server" Text="Lodge a Job" >
    </telerik:RadMenuItem>
    <telerik:RadMenuItem runat="server" Text="View a Job">
    </telerik:RadMenuItem>
    </Items>
    </telerik:RadMenuItem>
    <telerik:RadMenuItem runat="server" Text="Supervisors">
    <Items>
    <telerik:RadMenuItem runat="server" Text="Job Board">
    </telerik:RadMenuItem>
    <telerik:RadMenuItem runat="server" Text="Message Board">
    </telerik:RadMenuItem>
    </Items>
    </telerik:RadMenuItem>
    <telerik:RadMenuItem runat="server" Text="Reports">
    </telerik:RadMenuItem>
    </Items>
    </telerik:RadMenu>
    </td>
    </tr>



    <tr width="100%">
    <td width="100%">
    &nbsp;<br /><br /><br /><br />
    </td>
    </tr>


    <tr width="100%">
    <td width="100%">

    <telerik:RadGrid ID="RadGrid1"
    Width="100%"
    AllowPaging="True"
    PageSize="5"
    AllowAutomaticDeletes="False"
    AllowAutomaticInserts="False"
    AllowAutomaticUpdates="False"
    runat="server"
    AllowSorting="true"
    GridLines="None">
    <MasterTableView Width="100%" DataKeyNames="EmployeeID" CommandItemDisplay="TopAndBottom"
    AutoGenerateColumns="false" InsertItemDisplay="Top"
    InsertItemPageIndexAction="ShowItemOnFirstPage" EditMode="InPlace">
    <Columns>

    <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn" ItemStyle-Width="10px">
    </telerik:GridEditCommandColumn>
    <telerik:GridButtonColumn ConfirmText="Delete this Employee?" ConfirmDialogType="RadWindow"
    ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
    </telerik:GridButtonColumn>
    <telerik:GridBoundColumn DataField="EmployeeID" UniqueName="EmployeeID" HeaderText="Employee ID"
    ReadOnly="true" Visible="false">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="LastName" UniqueName="LastName" HeaderText="Last Name" Resizable="true">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="Address" UniqueName="Address" HeaderText="Address">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="HomePhone" UniqueName="HomePhone" HeaderText="Home Phone">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="UserName" UniqueName="UserName" HeaderText="User Name" Display="false">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="ReportsTo" UniqueName="ReportsTo" HeaderText="Reports To" >
    </telerik:GridBoundColumn>

    <telerik:GridTemplateColumn HeaderText="Password" SortExpression="Password"
    UniqueName="Password" EditFormColumnIndex="0" Visible="false" >
    <HeaderStyle Width="80px" />
    <ItemTemplate>
    <asp:Label runat="server" ID="lblPassword" Text='<%# Eval("Password") %>' Visible="false"></asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
    <asp:TextBox runat="server" ID="tbPassword" Text='<%# Bind("Password") %>' Visible="true"></asp:TextBox>
    <div style="color: Maroon;">
    Enter value which doesn't start with 'XX'</div>
    <asp:CustomValidator ID="PasswordCustomValidator" runat="server" ErrorMessage="Invalid Password"
    ControlToValidate="tbPassword" OnServerValidate="PasswordCustomValidator_ServerValidate">
    </asp:CustomValidator>
    </EditItemTemplate>
    </telerik:GridTemplateColumn>
    <telerik:GridBoundColumn DataField="Email" UniqueName="Email" HeaderText="Email">
    </telerik:GridBoundColumn>

    </Columns>
    <CommandItemSettings AddNewRecordText="Add new record" AddNewRecordImageUrl="Images/AddRecord.gif"
    RefreshText="Refresh" RefreshImageUrl="Images/Refresh.gif" />
    </MasterTableView>
    <SortingSettings SortedBackColor="Azure" EnableSkinSortStyles="false" />
    <PagerStyle Mode="NextPrevAndNumeric" />
    <FilterMenu EnableTheming="True">
    <CollapseAnimation Duration="200" Type="OutQuint" />
    </FilterMenu>
    </telerik:RadGrid>
    </td>
    </tr>


    </table>
    </form>
    </body>
    </html>


    my web.config is as follows:
    <appSettings>
    <add key="Telerik.Skin" value="Eclipse3" />
    <add key="Telerik.EnableEmbeddedSkins" value="false" />
    </appSettings>

    <system.web>
    <compilation debug="true" strict="false" explicit="true">
    <assemblies>
    <add assembly="System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=xxxxxx"/>
    <add assembly="System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=xxxxx"/>
    <add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=xxxxx"/>
    <add assembly="System.Xml.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=xxxxxx"/>
    </assemblies>
    </compilation>
    <pages theme="Eclipse3">
    <namespaces>
    <clear/>
    <add namespace="System"/>
    <add namespace="System.Collections"/>
    <add namespace="System.Collections.Generic"/>
    <add namespace="System.Collections.Specialized"/>
    <add namespace="System.Configuration"/>
    <add namespace="System.Text"/>
    <add namespace="System.Text.RegularExpressions"/>
    <add namespace="System.Linq"/>
    <add namespace="System.Xml.Linq"/>
    <add namespace="System.Web"/>
    <add namespace="System.Web.Caching"/>
    <add namespace="System.Web.SessionState"/>
    <add namespace="System.Web.Security"/>
    <add namespace="System.Web.Profile"/>
    <add namespace="System.Web.UI"/>
    <add namespace="System.Web.UI.WebControls"/>
    <add namespace="System.Web.UI.WebControls.WebParts"/>
    <add namespace="System.Web.UI.HtmlControls"/>
    </namespaces>
    <controls>
    <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=xxxx"/>
    <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=xxxx"/>
    <add tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI"/>
    </controls>
    </pages>



  15. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 May 2009 Link to this post

    Hello Mark,

    Your code seems OK.

    Here is a simple website, which works as expected. Please inspect your implementation again, compare it with the attached demo and make the necessary corrections.

    By the way, there is no needto register CSS files from an ASP.NET theme explicitly. The framework registers them automatically.

    Sincerely yours,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  16. mark
    mark avatar
    16 posts
    Member since:
    Jul 2012

    Posted 14 May 2009 Link to this post

    Hello Dimo,

    The main problem seems to be that the theme folder needs to be created as an "ASP .Net Folder" via visual studio as opposed to creating it manually through the windows explorer and then including it in the project. 

    I have also noted that the site specific css file needs to be named the same as the theme.  ie my theme was called "Eclipse3" and the css file for the app needs to be called Eclipse.css and be located in the theme folder. 

    I am still having problems with the RadGrid, in that when it renders it is generating an exception when trying to load the graphics for the edit and delete images.  The exception message is "file does not exist".  If I load a copy of the images in the root directory of the site the exception does not occur.

    Any ideas why it can not pick up the RadGrid images from the "App_Themes/Eclipse3/Grid" directory?

    Regards
    Mark.
  17. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 14 May 2009 Link to this post

    Hello Mark,

    "I have also noted that the site specific css file needs to be named the same as the theme.  ie my theme was called "Eclipse3" and the css file for the app needs to be called Eclipse.css and be located in the theme folder."

    Actually, the above requirement about the CSS file name does not exist - ALL CSS files, which are placed inside an ASP.NET theme folder, are registered automatically.


    As for the RadGrid edit and delete images, you have two options:

    1) set ImagesPath to RadGrid. In this case the control will look for all its images (required for buttons, icons, etc) in one specific location. Note that the images have to have specific names, which are listed here: http://www.telerik.com/help/aspnet-ajax/grdskins.html

    2) define image urls explicitly, e.g. :

    <Columns>
        <telerik:GridEditCommandColumn ButtonType="ImageButton"  EditImageUrl="........." />
        <telerik:GridClientDeleteColumn ButtonType="ImageButton"  ImageUrl="........" />
    </Columns>


    Greetings,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  18. mark
    mark avatar
    16 posts
    Member since:
    Jul 2012

    Posted 14 May 2009 Link to this post

    Hello Dimo,

    Point noted about the fact that all CSS files in the "App_Themes/Eclipse3" directory will be registered automatically.

    I have set the "imagespath" for the radgrid at the control level on the aspx page and the graphics are now loaded correctly.  However, is there a way to set the images path globally as well? 

    Similarly, when I introduce a tabstrib control the tab height seems to be compressed to the height of the text on each tab.  Is there a way to globally tell telerik to use all the settings of the skin defined in theme?

    regards
    Mark.
  19. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 15 May 2009 Link to this post

    Hello Mark,

    You can set ImagesPath in an ASP.NET theme and use that theme on all pages.

    The height of a horizontal TabStrip is solely controllled by the skin CSS (height, line-height and vertical padding styles).

    I am afraid I didn't understand the last question, please be more specific - "Is there a way to globally tell telerik to use all the settings of the skin defined in theme?" - haven't you done that already by having a global ASP.NET theme registered on all pages?


    Best wishes,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  20. mark
    mark avatar
    16 posts
    Member since:
    Jul 2012

    Posted 17 May 2009 Link to this post

    Hello Dimo,

    1.  Where exactly in the theme do I need to set the ImagesPath for the RadGrid images, and what is the syntax for the setting.

    2.  I have looked through the Tabstrip.css and have looked through the intellisense for the "telerik:radtabstrip", "telerik:RadTab", "telerik:RadMultiPage" and "telerik:RadPageView" and can not see the settings for the "lineheight" and "vertical-paddingstyles".   

    All I am trying to do is:
       - take one of the existing telerik skins ie "sunset"
       - give it a custom name
       - give the colour palete a bit of a tweak
       - use it globally across the site for all instances of all telerik controls

    Why do I need to make adjustments to all these individual ccs files and control settings to achieve this?

    Regards
    Mark.
  21. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 19 May 2009 Link to this post

    Hello Mark,

    1) ImagesPath is set in an ASP.NET theme just like any other property:

    [.skin file]

    <telerik:RadGrid runat="server" ImagesPath="~/folder_1/folder_2/" />

    The folder set as an ImagesPath location may or may not be placed inside the theme's folder, it doesn't matter.


    2) By height, line-height and vertical padding styles I meant CSS styles, not properties, which can be set declaratively. You should override the TabStrip skin or create a custom skin in order to set these custom styles.

    http://www.telerik.com/help/aspnet-ajax/createcustomskin.html

    http://www.telerik.com/help/aspnet-ajax/tab_appearancecssfile.html

    http://www.telerik.com/help/aspnet-ajax/tab_appearancecssselectors.html

    http://blogs.telerik.com/dimodimov/posts/08-06-17/How_To_Override_Styles_in_a_RadControl_for_ASP_NET_AJAX_Embedded_Skin.aspx


    Regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  22. mark
    mark avatar
    16 posts
    Member since:
    Jul 2012

    Posted 20 May 2009 Link to this post

    Thanks Dimo,

    I will plough on and leave you in peace.

    Regards
    Mark.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017