Hi!
I'm quite new to Sitefinity and the Telerik RadTreeview control. I am trying to convert an old Sitefinity 3.5 site that uses the RadTreeview control in a menu to the latest version 3.7 SP1. The problem is that it seams that the handling of the skin files for the controls seams to have changed a lot between these versions.
An example:
I'm using the 3DBlue skin for the RadTreeview control. In Sitefinity 3.5 the image files for the 3DBlue skin was placed in the folder [website]\RadControls\Treeview\Skins\Round\3DBlue. In Sitefinity 3.7 I'm trying to mimic this skin look for the RadTreeview control, but everything seams to have changed. I've created a theme "Bright" for my website and created a folder "Bright" inside the folder "App_Themes". I have created a RadTreeView.skin file in this folder which looks like this:
There is a Bright.css file in the same folder as the .skin-file, this css handles the theme and the placement of the content boxes in the master page. Also I created a folder called "TreeView" in the same "Bright" folder, and this folder contains the specifics for the skin "3DBlue", which I can't get to work properly...
It has a styles.css file for the skin and also a subfolder "img" which contains the images for the node images, the plus and minus images of nodes in the treeview that have sub nodes, and so on.
The problem is that I can't find current information about how to write the styles.css file to control the specifics of the RadTreeView control (in Sitefinity, the "SiteTreeview" control where I've set the Skin property to "3DBlue", the SiteTreeview is just a wrapper for the RadTreeView contro, right?). I have managed to display some of the node line images, but it seams to be impossible to get the plus and minus images to display properly or to set the distance between the nodes so that the lines becomes a continous line, I've tried to control a lot of different classes in the styles.css but it just doesn't display right, even if I try the !important attribute. I've also tried both Firefox and Internet Explorer and to reload the view with Ctrl+F5 between the changes in the css-file. When I've checked the fabricated style code with Firebug I discovered that the important tags of "rtSp" and rtMinus are empty tags, and that seams to be the reason why my css code for these classes doesn't display anything - how do I control these built in classes in the treeview control?
Part of the generated HTML:
Part of my styles.css:
Would very much appreciate a clue to what documentation there is about this and where to find it, when I search the web I only find information about older versions of Sitefinity and the skin-handling seams to have changed a lot since then? Some clues or solutions to what I'm doing wrong would also be highly appreciated, I've tried to sort this out for a long time now.
Kind regards!
Ronny
I'm quite new to Sitefinity and the Telerik RadTreeview control. I am trying to convert an old Sitefinity 3.5 site that uses the RadTreeview control in a menu to the latest version 3.7 SP1. The problem is that it seams that the handling of the skin files for the controls seams to have changed a lot between these versions.
An example:
I'm using the 3DBlue skin for the RadTreeview control. In Sitefinity 3.5 the image files for the 3DBlue skin was placed in the folder [website]\RadControls\Treeview\Skins\Round\3DBlue. In Sitefinity 3.7 I'm trying to mimic this skin look for the RadTreeview control, but everything seams to have changed. I've created a theme "Bright" for my website and created a folder "Bright" inside the folder "App_Themes". I have created a RadTreeView.skin file in this folder which looks like this:
| <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %> |
| <telerik:RadTreeView |
| runat="server" |
| Skin="3DBlue" EnableEmbeddedSkins="false" |
| EnableEmbeddedBaseStylesheet="false"> |
| </telerik:RadTreeView> |
There is a Bright.css file in the same folder as the .skin-file, this css handles the theme and the placement of the content boxes in the master page. Also I created a folder called "TreeView" in the same "Bright" folder, and this folder contains the specifics for the skin "3DBlue", which I can't get to work properly...
It has a styles.css file for the skin and also a subfolder "img" which contains the images for the node images, the plus and minus images of nodes in the treeview that have sub nodes, and so on.
The problem is that I can't find current information about how to write the styles.css file to control the specifics of the RadTreeView control (in Sitefinity, the "SiteTreeview" control where I've set the Skin property to "3DBlue", the SiteTreeview is just a wrapper for the RadTreeView contro, right?). I have managed to display some of the node line images, but it seams to be impossible to get the plus and minus images to display properly or to set the distance between the nodes so that the lines becomes a continous line, I've tried to control a lot of different classes in the styles.css but it just doesn't display right, even if I try the !important attribute. I've also tried both Firefox and Internet Explorer and to reload the view with Ctrl+F5 between the changes in the css-file. When I've checked the fabricated style code with Firebug I discovered that the important tags of "rtSp" and rtMinus are empty tags, and that seams to be the reason why my css code for these classes doesn't display anything - how do I control these built in classes in the treeview control?
Part of the generated HTML:
| <li class="rtLI"> |
| <div class="rtMid rtSelected"> |
| <span class="rtSp"/> |
| <span class="rtMinus"/> |
| <a class="rtIn" href="test1.aspx">test-root</a> |
| </div> |
| <ul class="rtUL"> |
| <li class="rtLI"> |
| </li> |
| <li class="rtLI"> |
| </li> |
| <li class="rtLI rtLast"> |
| </li> |
| </ul> |
| </li> |
Part of my styles.css:
| /* |
| * RadTreeView 3DBlue skin |
| */ |
| #Sidebar .RadTreeView_3DBlue li |
| { |
| background-image: none; |
| } |
| /* These images do not display because the tags rtPlus and rtMinus are empty! */ |
| .RadTreeView_3DBlue .rtLines .rtPlus |
| { |
| background: transparent url(img/Plus.gif) 0 0 no-repeat; |
| } |
| .RadTreeView_3DBlue .rtLines .rtMinus |
| { |
| background: transparent url(img/Minus.gif) 0 0 no-repeat; |
| } |
| /* The selected node is NOT bold, why? */ |
| #Sidebar .RadTreeView_3DBlue .rtSelected .rtIn |
| { |
| text-weight: bold; |
| } |
| /* These images DO display properly, but the nodes are too |
| far away, leaving a gap between each node line */ |
| .RadTreeView_3DBlue .rtLines .rtTop |
| { |
| background: url(img/TopLine.gif) 0 0 no-repeat; |
| } |
| .RadTreeView_3DBlue .rtLines .rtMid |
| { |
| background: url(img/MiddleCrossLine.gif) 0 0 no-repeat; |
| } |
| .RadTreeView_3DBlue .rtLines .rtBot |
| { |
| background: url(img/BottomLine.gif) 0 0 no-repeat; |
| } |
Would very much appreciate a clue to what documentation there is about this and where to find it, when I search the web I only find information about older versions of Sitefinity and the skin-handling seams to have changed a lot since then? Some clues or solutions to what I'm doing wrong would also be highly appreciated, I've tried to sort this out for a long time now.
Kind regards!
Ronny
3 Answers, 1 is accepted
0
Accepted
Hi Qezlot,
In App_Theme create a folder called 3DBlue - The name of the folder should be the same as the name of your skin. Inside this folder put the style sheet responsible for styling the menu - style.css and one image folder which will be used as an image storage for RadTreeView control. The way of changing the appearance of SiteTreeView is the same as for RadTreeView. We have only created several properties and custom binding that does not affect the appearace of the control. The available articles that you can use are :
Controlling Appearance
Understanding the Skin CSS File
CSS Skin File Selectors
Tutorial: Creating a Custom Skin
Controling appearance of RadControls for ASP.NET AJAX in Sitefinity
Generally the following declaration should work without problems ( you can give a try to the samples).
the same applies for
However if the problem persists and you cannot sort it out after going through the suggestion above, please send the skin you use( all images and stylesheet you use to change the default appearance of the RadTreeView control) so we could set up everything locally and try to figure out what is going wrong.
Greetings,
Ivan Dimitrov
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.
In App_Theme create a folder called 3DBlue - The name of the folder should be the same as the name of your skin. Inside this folder put the style sheet responsible for styling the menu - style.css and one image folder which will be used as an image storage for RadTreeView control. The way of changing the appearance of SiteTreeView is the same as for RadTreeView. We have only created several properties and custom binding that does not affect the appearace of the control. The available articles that you can use are :
Controlling Appearance
Understanding the Skin CSS File
CSS Skin File Selectors
Tutorial: Creating a Custom Skin
Controling appearance of RadControls for ASP.NET AJAX in Sitefinity
Generally the following declaration should work without problems ( you can give a try to the samples).
.RadTreeView_MySkin .rtPlus, .RadTreeView_MySkin .rtMinus{ background-image: url('PlusMinus.png');}the same applies for
.RadTreeView_MySkin .rtLines .rtTop { background-image:url('TopLine.png'); }.RadTreeView_MySkin _rtl .rtLines .rtTop { background-image:url('TopLine_rtl.png'); }.RadTreeView_MySkin .rtLines .rtMid { background-image:url('MiddleLine.png'); }.RadTreeView_MySkin _rtl .rtLines .rtMid { background-image:url('MiddleLine_rtl.png'); }.RadTreeView_MySkin .rtLines .rtBot { background-image:url('BottomLine.png'); }.RadTreeView_MySkin _rtl .rtLines .rtBot { background-image: url('BottomLine_rtl.png'); }.RadTreeView_MySkin .rtLines .rtLast .rtTop { background-image:url('SingleLine.png'); }.RadTreeView_MySkin _rtl .rtLines .rtLast .rtTop { background-image:url('SingleLine_rtl.png'); }However if the problem persists and you cannot sort it out after going through the suggestion above, please send the skin you use( all images and stylesheet you use to change the default appearance of the RadTreeView control) so we could set up everything locally and try to figure out what is going wrong.
Greetings,
Ivan Dimitrov
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.
0
Qezlot
Top achievements
Rank 1
Rank 1
answered on 19 Nov 2009, 04:08 PM
Thank you for your answer,
I tried to create the folder and files, following your answer, but then I get the error message:
Telerik.Web.UI.RadTreeView with ID='RadTreeview1' was unable to find embedded skin with name '3DBlue'. Please, make sure that you spelled the skin name correctly, or if you want to use a custom skin, set EnableEmbeddedSkins=false.
Are you sure that I should create the skin folder directly under the App_Themes folder? Shouldn't I include any .skin-file? The master page I'm using utlilizes a theme called 'Bright', so I have a folder named 'Bright' under App_Themes, which contains a Bright.css file and an Images folder for the images used by that theme.
The skin '3DBlue' used by the SiteTreeview control is in my case stored inside that 'Bright' theme folder, where I have a .skin-file for the skin and also a TreeView folder which contains a Styles.css and an img-folder containing the images used by the skin for the TreeView control.
The above configuration seams to work and using your information I changed the styles.css file and now the SiteTreeview starts to behave much better, although I'm still not quite at the goal of making it look the same as the old SiteTreeview control in Sitefinity 3.5 which used the inherit 3DBlue style/skin, I still have some more tweaking to do!
One important change I had to do was to the actual .skin-file:
I had to change the property EnableEmbeddedBaseStylesheet to true instead of false, this change suddenly made the TreeView control behave a bit more what I wanted, when I control it with the styles.css file.
I'm still struggling with getting all the node lines to display properly, especially when there are sub nodes, and also I can't get rid of some padding between the nodes which break up the continous lines between the nodes, but I think I will find a solution for that soon, trying to override the inherit styles using the !important attribute for each style in the styles.css file for the 3DBlue skin.
Thank you for your help and the links to more information!
I tried to create the folder and files, following your answer, but then I get the error message:
Telerik.Web.UI.RadTreeView with ID='RadTreeview1' was unable to find embedded skin with name '3DBlue'. Please, make sure that you spelled the skin name correctly, or if you want to use a custom skin, set EnableEmbeddedSkins=false.
Are you sure that I should create the skin folder directly under the App_Themes folder? Shouldn't I include any .skin-file? The master page I'm using utlilizes a theme called 'Bright', so I have a folder named 'Bright' under App_Themes, which contains a Bright.css file and an Images folder for the images used by that theme.
The skin '3DBlue' used by the SiteTreeview control is in my case stored inside that 'Bright' theme folder, where I have a .skin-file for the skin and also a TreeView folder which contains a Styles.css and an img-folder containing the images used by the skin for the TreeView control.
The above configuration seams to work and using your information I changed the styles.css file and now the SiteTreeview starts to behave much better, although I'm still not quite at the goal of making it look the same as the old SiteTreeview control in Sitefinity 3.5 which used the inherit 3DBlue style/skin, I still have some more tweaking to do!
One important change I had to do was to the actual .skin-file:
| <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %> |
| <telerik:RadTreeView |
| runat="server" |
| Skin="3DBlue" EnableEmbeddedSkins="false" |
| EnableEmbeddedBaseStylesheet="true"> |
| </telerik:RadTreeView> |
I'm still struggling with getting all the node lines to display properly, especially when there are sub nodes, and also I can't get rid of some padding between the nodes which break up the continous lines between the nodes, but I think I will find a solution for that soon, trying to override the inherit styles using the !important attribute for each style in the styles.css file for the 3DBlue skin.
Thank you for your help and the links to more information!
0
Hello Qezlot,
Let us now if you get stuck somewhere else so we could try to help you.
Regards,
Ivan Dimitrov
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.
Let us now if you get stuck somewhere else so we could try to help you.
Regards,
Ivan Dimitrov
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.