Skinning navigation menu in Sitefinity v. 5.1x - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 07-Oct-2012 00:00

I found this article on how to style and skin the RadMenu in Sitefinity v. 3.7x, but is there a definitive article on how to apply these styles and also upload them as part of the Themes using Sitefinity Thunder in Sitefinity v. 5.1x?

http://www.sitefinity.com/devnet/kb/sitefinity-3-x/controling-appearance-of-radcontrols-for-asp-net-ajax-in-sitefinity.aspx

If so, where can I find the updated article and documentation?

Thanks.

Posted by Community Admin on 07-Oct-2012 00:00

Hey Samir,

Sitefinity v5.x is still using the RadControls for ASP.NET Ajax, so all the basic tricks and treats still apply. With regards to workflow/how to apply them the easiest way is by doing the following:

- Go to the Visual Style Builder and choose the controls you want to style.
- Give the style a name (in my case I used testskin)
- Tweak some initial styles online, you can always fine-tune offline
- Click download and extract the zip file to your theme's global folder.

---
After including the file in your VisualStudio project, it just becomes one of the css files that are part of the theme and it will get published with Thunder. Naturally since its just another css file, you can also copy/paste the content into the main project css to avoid an extra download.

---
By going to Stylebuilder and setting a 'skin name' you'll get css files back with something like this:

.RadMenu_testskin .rmItem a.rmLink

padding: 1px 0 1px 12px;

.RadMenu_testskin .rmHorizontal .rmItem

padding: 2px 0;

.RadMenu_testskin_rtl .rmItem a.rmLink

padding: 1px 12px 1px 0

;

....

To all the appropriate classes, the skin name 'testskin' has been added.
Now if you're in the Page Editor of Sitefinity and drag/drop a menu on to the screen all you have to do is the following:

- Click on Edit
- On right bottom of the pop-up, expand design settings.
- Enter your skin name (testskin in my example).

And that will make sure the proper classes/styles are applied. Hope it helps....
Jochem

Posted by Community Admin on 07-Oct-2012 00:00

When I use the Visual Style Builder, I get a CSS file and a Menu folder. I placed both of these underneath my App_Data/Sitefinity/WebsiteTemplates/App_Themes/<Theme Name>/Global directory, but the Skin is not being rendered.

However, when I type in the Skin name for one of the built in Telerik RadMenu skins (such as Forest), it renders just fine with the defined skin.

Can you tell me what else I might be doing wrong? I am trying to use the RadMenu with Tabs.

Thanks.

Posted by Community Admin on 08-Oct-2012 00:00

Hey Samir,

If you're selecting the 'Radmenu with Tabs' if you inspect your page source-code you'll see something like this:

<div

id="C001_ctl00_ctl00_siteMapControl_horizontaltabs"

class="RadTabStrip RadTabStrip_Sitefinity RadTabStripTop_Sitefinity">

<div class="rtsLevel rtsLevel1">

...

Which basically means that Sitefinity is actually using the Telerik RadTabStrip control to display your menu and not using a Telerik RadMenu. So in the VisualStyleBuilder you'll need to select that control as well...

Jochem.

This thread is closed