+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Skinning navigation menu in Sitefinity v. 5.1x

Skinning navigation menu in Sitefinity v. 5.1x

4 posts, 1 answered
  1. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    07 Oct 2012
    Link to this post
    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.
  2. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    07 Oct 2012
    Link to this post
    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
  3. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    07 Oct 2012
    Link to this post
    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.
  4. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    08 Oct 2012
    Link to this post
    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">
    <!-- 2012.2.607.40 -->
    <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.
    Answered
4 posts, 1 answered