Skin the Navigation widget

Hi.
Enjoying the Sitefinity Beta2 release
I struggle hard to make my custom skin working on the RadTabStip control used in site naviagation, and I hope
you can give me some advice on how to do it right.

What I've done is the following:
A skin file called RadTabStrip.skin is created in my theme folder (~/App_Data/Sitefinity/WebsiteTemplates/DefaultTemplate/App_Themes/ForestTheme).
My custom theme folder starts from the EmptyTemplatePackage.zip of the SDK.

RadTabStrip.skin:

The skin file name should be irrelevant, AFIK (?).
A directory called "Forrest" (after the skin name) is then created in the theme folder, containing the CSS file "styles.css" and the images used for the styling. As you see from
the included CSS below I've borrowed the built-in RadTabStrip Forest skin and just replaced "_Forest" with "_Forrest"

styles.css:

Hello Torbjorn,

Thank you for using our services.

Unfortunately the Navigation control does not support skin file yet. You can use the wrapper css class property for now. We do support the skin file for other controls - RadControls (not used in the Navigation control) as well as ASP.NET controls which have skins support.

All the best,
Radoslav Georgiev
the Telerik team

Hello Radoslav,

Could you point in any direction on how to use the wrapper css class property on the Navigation? I am a bit lost here.

Best regards,
Jesper

Hi again Radoslav,

Forget a bit of my previous post, I have found out how to CSS some of the topnavigation. But how do I get rid of that annoying background image on the selected item (the grey one that looks like a talking bubble).

Jesper

Hi Torbjorn,

To get rid of the default styles (the gray talking bubble) you should use Wrapper CSS class property. I am attaching a short scheme that explains its behavior.


Kind regards,
Jordan
the Telerik team

Where can we find a list of existing, or built-in skins?

Regards,
Jacques

Hi J.Hoventer, 

They are the same as these used in the ASP.NET Ajax control:

http://demos.telerik.com/aspnet-ajax/menu/examples/default/defaultcs.aspx

• Black
• Sitefinity
• Forest
• Hay
• Office2007
• Office2010Black
• Office2010Blue
• Office2010Silver
• Outlook
• Simple
• Sunset
• Telerik
• Transparent
• Vista
• Web20
• WebBlue
• Windows7

Hi, this works fine but takes only top menu. I want to get specific menu names. 
I have selected  "Custom Selection of Pages" from Navigation properties but nothing changes.
If I am not wrong I have to bind these menus manually. Do you have any suggestion to bind specific menus to navigation widget?
Thanks. 

Levent KAYA

<%@ Control Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls"
    TagPrefix="sfMap" %>
<sfMap:SitefinitySiteMapDataSource runat="server" ID="SitefinitySiteMapDS" ShowStartingNode="false" />
<telerik:RadTabStrip ID="RadPanelbarNav" runat="server" Visible="false" />
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SitefinitySiteMapDS">
    <HeaderTemplate>
        <ul class="nav-holder">
    </HeaderTemplate>
    <ItemTemplate>
        <li><a id="A1" href='<%# Eval("Url") %>' runat='server'>
            <h3>
                <%#Eval ("Title") %></h3>
        </a></li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>

Hello Levent,

Can you please let us know which navigation mode you have selected for the navigation control?

Kind regards,
Radoslav Georgiev
the Telerik team

Hi,
I attached 2 files. one of them is about mode selection. and the other one is the result.
after that I have added a cs file for getting menus but I dont know how to do that.

I pasted a code that takes only "show in navigation". I need to get only "custom selection page" in the navigation control.

Thanks.

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using Telerik.Sitefinity.Web; 
using Telerik.Sitefinity.Modules.Pages; 
using Telerik.Sitefinity; 

public partial class UserControls_TopNavigation : System.Web.UI.UserControl 
     
protected void Page_Load(object sender, EventArgs e)     
       
      Repeater1.ItemDataBound += new RepeaterItemEventHandler(Repeater1_ItemDataBound);   
      Repeater1.DataBind();     
     
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)     
         
    if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)  
                    
            var data = e.Item.DataItem as PageSiteNode;            
            var pageManager = PageManager.GetManager();          
           // var fluent = App.WorkWith().Pages().ThatArePublished().ThatArePublishedForAllTranslations(). 
            if (data != null)             
                                               
                    if (data.ShowInNavigation == false)                 
                                     
                e.Item.Visible = false;   
                
            
            
 


 

Hi Levent,

The mode that you have selected needs to work with a RadTabStrip and not a repeater. Please take a look at the bellow sample template which binds to the tab strip and adds serverside logic for subscribing to the item data bound event: