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

[Solved] Problems creating a custom skin ASP.NET AJAX 2009_1_402

3 Answers 119 Views

General Discussions

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

Norman Peter asked on 25 May 2009, 01:55 PM

I’m trying to create a custom theme for all Telerik controls using ASP.Net themes.

I’ve set web.config not to use embedded base style sheet and embedded skins:
<appSettings>
<add key="Telerik.EnableEmbeddedBaseStylesheet" value="false" />
<add key="Telerik.EnableEmbeddedSkins" value="false" />
<add key="Telerik.Skin" value="Default" />
</appSettings>
<pages theme="ThemeName">

I’ve followed the instructions on
http://www.telerik.com/community/forums/aspnet-ajax/treeview/radtreeview-q3-2008-skins-available-for-download.aspx

In my theme folder I created a directory to hold Telerik styles – i’ve only added the styles for TreeView

ThemeName
Telerik
  Default
   TreeView
   TreeView.Default.css
  TreeView.css

This works fine – and I can customise the styles.

But unfortunately once i add the rest of the files it all goes wrong - i have no other styling - so its not clashing

ThemeName
Telerik
  Default
   TreeView
   TreeView.Default.css
   Editor
   Editor.Default.css
   ..Etc ...
  TreeView.css
Editor.css
...Etc

Not sure what to try next?

3 Answers, 1 is accepted

answered on 26 May 2009, 10:41 AM

Thanks Dimo,

By "I have no other styling" – is that i only have telerik CSS files in the application – i have no other stylsheets or skin files of my own that may interfere

I have copied all the Default skin items from the provided skins folder, and the base css files and placed them into a asp.net theme
See the file structure below:

My themes has the following files:
-Default Folder
--Ajax Folder
--Calendar Folder
--Color Picker Folder
--ComboBox Folder
--Date Picker Folder
--Date time Picker Folder
--Dock Folder
--Editor Folder
--File Explorer Folder
--Form Decorator Folder
--Grid Folder
--Input Folder
--Menu Folder
--Panel Bar Folder
--Rotator Folder
--Scheduler Folder
--Slider Folder
--Spell Folder
--Splitter Folder
--Tab Strip Folder
--Time Picker Folder
--Tool Bar Folder
--ToolTip Folder
--Treeview Folder
--Upload Folder
--Widgets Folder
--Window Folder

--Ajax.Default.css
--Calendar.Default.css
--ColorPicker.Default.css

--ComboBox.Default.css
--Dock.Default.css
--Editor.Default.css
--FormDecorator.Default.css
--Grid.Default.css
--Input.Default.css
--ListView.Default.css
--Menu.Default.css
--PanelBar.Default.css
--Rotator.Default.css
--Scheduler.Default.css
--Slider.Default.css
--Splitter.Default.css
--Tab Strip.Default.css
--Tool bar.Default.css
--ToolTip.Default.css
--TreeView.Default.css
--Upload.Default.css
--Widgets.Default.css
--Window.Default.css

-Ajax.css
-Chart.css
-ColrPicker.css
-Dock.css
-Editor.css
-FileExplorer.css
-FormDecoration.css
-Menu.css
-Panel Bar.css
-Rotator.css
-Scheduler.css
-Slider.css
-Spell.css
-Splitter.css
-TabStrip.css
-ToolBar.css
-TreeView.css
-Upload.css
-Widgets.css
-Window.css

43 CSS Files

Next I merged the base style sheets into one css file

<link href="App_Themes/Step4/Default/Ajax.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/Calendar.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/ColorPicker.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/ComboBox.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/Dock.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/Editor.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/FormDecorator.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/Grid.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/Input.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/ListView.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/Menu.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/PanelBar.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/Rotator.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/Scheduler.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/Slider.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/Splitter.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/TabStrip.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/ToolBar.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/ToolTip.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/TreeView.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/Upload.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/Widgets.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Default/Window.Default.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Step4/Merge.css" type="text/css" rel="stylesheet" />

Still not displaying as embedded styles - The editor does not have any icons and the toolbars are all crushed, i can provide screen shots and a demo application indicating the problem.