This is a migrated thread and some comments may be shown as answers.

Custom Skins - Global Referencing?

20 Answers 219 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Brian Mains
Top achievements
Rank 1
Brian Mains asked on 19 Dec 2008, 05:59 PM
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.

20 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 19 Dec 2008, 06:19 PM
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.
0
Brian Mains
Top achievements
Rank 1
answered on 19 Dec 2008, 06:32 PM
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.
0
Accepted
Dimo
Telerik team
answered on 19 Dec 2008, 07:07 PM
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.
0
Brian Mains
Top achievements
Rank 1
answered on 19 Dec 2008, 07:31 PM

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.

0
Accepted
Dimo
Telerik team
answered on 19 Dec 2008, 07:42 PM
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.
0
Brian Mains
Top achievements
Rank 1
answered on 19 Dec 2008, 09:15 PM
Thanks, that worked great.
0
mark
Top achievements
Rank 1
answered on 13 May 2009, 09:45 AM
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.

 

0
Dimo
Telerik team
answered on 13 May 2009, 12:56 PM
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.
0
mark
Top achievements
Rank 1
answered on 13 May 2009, 01:07 PM
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

0
Dimo
Telerik team
answered on 13 May 2009, 01:29 PM
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.
0
mark
Top achievements
Rank 1
answered on 13 May 2009, 02:13 PM

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> */

0
mark
Top achievements
Rank 1
answered on 13 May 2009, 03:07 PM
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>



0
Dimo
Telerik team
answered on 13 May 2009, 03:49 PM
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.
0
mark
Top achievements
Rank 1
answered on 14 May 2009, 07:22 AM
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.
0
Dimo
Telerik team
answered on 14 May 2009, 10:53 AM
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.
0
mark
Top achievements
Rank 1
answered on 15 May 2009, 03:12 AM
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.
0
Dimo
Telerik team
answered on 15 May 2009, 08:29 AM
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.
0
mark
Top achievements
Rank 1
answered on 18 May 2009, 02:02 AM
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.
0
Dimo
Telerik team
answered on 19 May 2009, 03:46 PM
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.
0
mark
Top achievements
Rank 1
answered on 20 May 2009, 05:42 AM
Thanks Dimo,

I will plough on and leave you in peace.

Regards
Mark.
Tags
General Discussions
Asked by
Brian Mains
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Brian Mains
Top achievements
Rank 1
mark
Top achievements
Rank 1
Share this question
or