Support Forum Thread

Home > Support > Forums home > Sitefinity 3.x > Themes, Designs, Templates > Skin sitefinity controls

steeeeeeeeeee, 4/1/2008 3:38:59 PM

How do I go about skinning the appearance of the sitefinity controls?

I have been unable to find any documentation that was any help. The brief example in the docs illustrates skinning a rad control, but how do i know how to reference the sitefinity controls? The controls I am looking at to skin are the search box and the tree view navigation.

If anyone can provide example / explanation on this I would be very grateful!

also does any body know why the properties have no effect? such as setting the width of the search box for example?

This all seams much more complicated than it should be!

Cheers!

Ste

, 4/3/2008 11:15:28 AM

skins.JPG

searchBox.JPG

Hi Stephen,

You can change the styles of both controls. For the searchBox, the template is located in \[YourProject]\Sitefinity\ControlTemplates\Search. For the TreeView navigation, we've provided some skins, they are located in \[YourProject]\RadControls\TreeView\Skins.
You can specify which skin you would like to use in TreeView control designer. I have attached a screenshot, showing that designer and the place where you specify the SkinID. You could later change the skin depending on your needs.
Please note that the searchBox control also has a designer where you can set some styles options.

I hope you find this information helpful.

All the best,
Georgi
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

SelArom, 6/20/2008 1:39:51 PM

what about skinning the other controls like combobox that don't have a skin folder? these use embedded skins and try as I might I cannot get the css to work correctly, especially for the combobox. I tried adding a cssclass property and this works for the box itself, but the dropdown menu doesn't get rendered with this cssclass so it uses the default embedded skin

is there a workaround to this?

, 6/24/2008 4:18:48 AM

Hello SelArom,

I assume you are asking about the RadComboBox, is that correct?
Please follow the instructions described in the RadComboBox skinning article, and Creating a Custom Skin tutorial.

I hope the provided information is helpful.

Greetings,
Georgi
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

steeeeeeeeeee, 9/16/2008 5:05:25 AM

Hi,

I have just created a new page that has a second treeview control on it which I need to be styled differently to the first.

I thought this should be a simple thing to do by creating a different skin for it and then setting it in sitefinity.

However the skin of the first treeview object is over-riding the colours of the second control. They both use the images of there individual style correctly, its just the colours that dont.

Is this a bug you are aware of? Do you know a way I can get round this?

Regards

Stephen.

, 9/16/2008 11:36:07 AM

Hi,

Thanks for contacting us.

This issue is not a bug. The skins for the Telerik controls, which does include the RadTreeView for ASP.NET AJAX, are compiled into Telerik.Web.UI, which is the assembly that controls the source code for RadControls for ASP.NET AJAX. You need to open the template that has the RadTreeView (~\Sitefinity\UserControls\Navigation\SiteTreeview.ascx) and create a custom skin as this article will show you.

I hope that I have provided a solution for your technical issue. Feel free to contact us if you need further assistance.

Kind regards,
Joe
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

steeeeeeeeeee, 9/18/2008 7:55:36 AM

Hi,

Sorry Im still a little unclear.

So just to be clear, the appearance section of the SiteTreeview control properties has a skin property. In the past I have been able to use this to select which of the built in skins I want this control to use.

In addition to this I have been able to create new skins, by copying and modifying existing skins, then using the skin property to set the control to use this skin.

This all works fine, and in this case with the SiteTreeview control it also works fine. I can set the skin to any of the skins I have in my '~/RadControls/TreeView/Skins' folder and it works.

The problem occurs when I have two SiteTreeview controls on the same page that need to be set to different skins.

They both get the correct images used in their individual skins, but the colours from one skin are used on both.

Im not sure how this all relates to being complied into Telerik.Web.UI.

So when I set a skins path and skin name in the appearance section of the control properties am I not using the actual css and images from that path? Are they coming from a complied version?

If so that still doesn't explain how they can be both using different skins as instructed, but only using the colours for the links from one of the skins?

Please can you explain how it works in basic terms for me :)

Cheers

Ste

, 9/23/2008 10:15:29 AM

SiteTreeview.zip

Hello Stephen,

The described behavior was reproduced only with the classic RadControls used by Sitefinity. In our upcoming release all classic RadControls will be replaced with the new ones (RadControls for ASP.NET AJAX). For the time being you could migrate the SiteTreeview control (~/Sitefinity/UserControls/Navigation/SiteTreeview.ascx) to use RadTreeView for ASP.NET AJAX.

Please find the SiteTreeview.zip attachment prepared for your convenience. Let us know if this works at your end.

Sincerely yours,
Ivan Dimitrov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

a product by telerik

Sitefinity ASP.NET CMS - Content Management System

Support Forum Thread