RadMenu skin

Good day,
  I am trying to modify or create a skin for the RadMenu. According to the documentation the predinfed skins are located in RadControls/Menu/skins  I cannot find this folder anywhere and have done a search in the program files/telerik folder and also on the share where we have our web site which has several Sitefinity folders.  We have not installed any add-ons etc, just Sitefinity itself - version 4.3.  I have changed the skin on a menu to Outlook, one of the predifned skins, and it does the change so am guessing that the above folder does exist or the skin I applied would not change anything.

Where do I find the skins menu?

Thank you,

Rob

Hi Rob,

You can't find the folder, because the skins are embedded in Sitefinity. However, I've attached a zip file with all built in skins, which you can use to create your custom skins.

Kind Regards,
Jen Peleva
the Telerik team

Hi Jena,

    Thanks for the skins. If I want to use them globally is there a specific folder I have to create to place them in or is there somewhere I can change the path to point to the global ones I plan on making?  What I would like to be able to do is add a skin to the nav menu as I currently do, just add the skin name in where is says Wrapper Class (Skin)

Thanks,

    Rob

Hi Rob,

There's no way to integrate them as our built in skins. However, when you have a theme registered in Sitefinity, which includes navigation skins, you simply enter the name of your skin in the edit panel of the navigation (same as with the embedded skins) to make it work. The only thing you need to keep in mind is the way you declare the css properties in your stylesheet - they should be placed between the brackets of a rule, similar to this one:

 .[name of control, used for this navigation type] _ [name of your custom skin] styles

That's actually the way our embedded skins are created, so you can use them as a model. Take a look at the forum post for more information.

Regards,
Jen Peleva
the Telerik team

 Hi Jen,

Thanks for the info and the link. I had tried something similar to the post but figured it didn't work because I had the control names wrong. What I tried this time was I added the skins directory I was sent (all the default skins) to App_Data and did like the post said.  I took an existing skin, say Hay, and changed all references in the css from Hay to mySkin then renamed the file Menu.mySkin.css and also the folder to mySkin.   Any .RadMenu_Hay was changed to .RadMenu_mySkin. I referenced this css file on my page. I have attached an image of the navigation menu setup I am using. I also tried changing the TreeList and TreeView css files as thought maybe I was using the wrong css file. Even if I reference one of the default skins through its default css file  and add the Skin name it doesn't work. If I take out the css file referenced in App_Data/Skins and leave it as before it works fine.
Thank you
Rob

Not sure I understand this correctly; is the problem that SF is looking for style rules with the following names: .RadControlName_mySkin?
If so, it may be easier to modify a skin using the Telerik StyleBuilder which allows you to take an existing skin, optionally do any style mods, rename it, and download the skin as a zip file.  The zip contains all of the skin element with renamed rules that include your skin name.

HTH--Steve

Hi Steve,
   I did modify a skin, Jen sent me the default skins, and I modified one of them. So it wasn't confused by using the current .RadControlName_defaultSkin I just changed defaultSkin to mySkin.  The css file and folder name where changed to reflect the new name.  If I use a default skin I have no problem, when I try to use the modified skin it does not work. In a previous post there was a link to another post on how to use the modified skin which I followed and cannot get it to work when using any modified skin.
Thanks
Rob

Hey guys,

Steve, the Style Builder is a good idea, actually. Thank you for bringing it up. You can create a simple theme with it and modify it manually - use it as a model for your stylesheet.

Rob, to be able to write the name of your custom skin in the Designer of your navigation, you first need to apply the theme, where the skin is located, to the template of your page. Did you do that?

All the best,
Jen Peleva
the Telerik team

 Hi Jen,
  I had tried Style Builder previously with the same results. I see you say to create a theme, I was going by the link to Forum Post in your previous answer.  In that post Boyko states  " You can add your CSS file either by the CSS widget or by creating a custom theme"  I added the file  by the CSS widget and did as the rest of the post stated still with no success.  I link to the css file then add the name in the Wrapper (skin class) for the navigation menu for that specific page.  I am trying to avoid using a theme as for one or two pages and having to do this several times I don't think going the theme route is the best.

Rob

Rob

Hi Rob,

If you're going to use a css widget, you should place the css styles (for the navigation) and the images, referenced in them, outside the App_Data folder (for example in the root), because the App_Data folder has special permissions and this might be the reason why the.css files won't load. Also, if you decide to put them in the root, make sure to rename the images folder to something different than images (don't forget to change the URL path in the stylesheet as well after you do that), because the name Images is reserved for Sitefinity.

Kind regards,
Jen Peleva
the Telerik team

Hi Jen,

   Thanks, that did the trick. Placed a folder, Skins, in root and linked to the css file there.

Rob