Skin the Navigation widget - General Discussions - General Discussions - Progress Community
 General Discussions

Skin the Navigation widget

  • 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:

    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
    <telerik:RadTabStrip 
    runat="server" 
    Skin="Forrest"
    EnableEmbeddedSkins="false"
    </telerik:RadTabStrip>

    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:

     

     

    .RadTabStrip_Forrest .rtsLI,
    .RadTabStrip_Forrest .rtsLink
        color: #000;
        font: 12px/26px "Segoe UI", Arial, sans-serif;
      
    /* <disabled tabs> */
    .RadTabStrip_Forrest .rtsDisabled
        color: #666;
    /* </disabled tabs> */
      
    /* <scrolling arrows> */
    .RadTabStrip_Forrest .rtsNextArrow,
    .RadTabStrip_Forrest .rtsPrevArrow,
    .RadTabStrip_Forrest .rtsPrevArrowDisabled,
    .RadTabStrip_Forrest .rtsNextArrowDisabled
        background-image: url('TabStripStates.png');
    /* </scrolling arrows> */
      
    /* <tab backgrounds> */
      
    .RadTabStripTop_Forrest .rtsLevel background: #fff;
      
    .RadTabStripTop_Forrest .rtsLevel1 background-color: transparent;
      
    .RadTabStripTop_Forrest .rtsLevel .rtsLink,
    .RadTabStripTop_Forrest .rtsLevel .rtsOut background-image: none;
      
    .RadTabStripTop_Forrest .rtsLevel1 .rtsLink,
    .RadTabStripTop_Forrest .rtsLevel1 .rtsOut,
    .RadTabStripBottom_Forrest .rtsLevel1 .rtsLink,
    .RadTabStripBottom_Forrest .rtsLevel1 .rtsOut,
    .RadTabStripTop_Forrest_Baseline .rtsLevel1,
    .RadTabStripBottom_Forrest_Baseline .rtsLevel1 background-image: url('TabStripStates.png');
      
    .RadTabStripLeft_Forrest .rtsLink,
    .RadTabStripRight_Forrest .rtsLink background-image: url('TabStripVStates.png');
      
    .RadTabStripLeft_Forrest .rtsLast .rtsLink,
    .RadTabStripRight_Forrest .rtsLast .rtsLink
        border-bottom: 1px solid #898C95;
      
    .RadTabStripRight_Forrest .rtsLink,
    .RadTabStripRight_Forrest .rtsLI .rtsDisabled:hover background-position: 100% 0;
    .RadTabStripRight_Forrest .rtsLink:hover background-position: 100% -200px;
    .RadTabStripRight_Forrest .rtsSelected,
    .RadTabStripRight_Forrest .rtsSelected:hover background-position: 100% -400px;
    /* </tab backgrounds> */
      
      
    /* <background positioning: tabs with hovers> */
      
    /* <orientation: top> */
      
    .RadTabStripTop_Forrest .rtsLevel1 .rtsLink background-position: 0 0;
    .RadTabStripTop_Forrest .rtsLevel1 .rtsOut background-position: 100% 0;
      
    .RadTabStripTop_Forrest .rtsLevel1 .rtsLink:hover background-position: 0 -52px;
    .RadTabStripTop_Forrest .rtsLevel1 .rtsLink:hover .rtsOut background-position: 100% -52px;
      
    .RadTabStripTop_Forrest .rtsLevel1 .rtsSelected,
    .RadTabStripTop_Forrest .rtsLevel1 .rtsSelected:hover background-position: 0 -26px;
    .RadTabStripTop_Forrest .rtsLevel1 .rtsSelected .rtsOut,
    .RadTabStripTop_Forrest .rtsLevel1 .rtsSelected:hover .rtsOut background-position: 100% -26px;
      
    .RadTabStripTop_Forrest .rtsLevel1 .rtsDisabled:hover background-position: 0 0;
    .RadTabStripTop_Forrest .rtsLevel1 .rtsDisabled:hover .rtsOut background-position: 100% 0;
      
    .RadTabStripTop_Forrest_Baseline .rtsLevel1 background-position: 0 100%; background-repeat: repeat-x;
      
    /* </orientation: top> */
      
    /* <orientation: bottom> */
      
    .RadTabStripBottom_Forrest .rtsLevel1 .rtsLink background-position: 0 -182px;
    .RadTabStripBottom_Forrest .rtsLevel1 .rtsOut background-position: 100% -182px;
      
    .RadTabStripBottom_Forrest .rtsLevel1 .rtsLink:hover background-position: 0 -130px;
    .RadTabStripBottom_Forrest .rtsLevel1 .rtsLink:hover .rtsOut background-position: 100% -130px;
      
    .RadTabStripBottom_Forrest .rtsLevel1 .rtsSelected,
    .RadTabStripBottom_Forrest .rtsLevel1 .rtsSelected:hover background-position: 0 -156px;
    .RadTabStripBottom_Forrest .rtsLevel1 .rtsSelected .rtsOut,
    .RadTabStripBottom_Forrest .rtsLevel1 .rtsSelected:hover .rtsOut background-position: 100% -156px;
      
    .RadTabStripBottom_Forrest .rtsLevel1 .rtsDisabled:hover background-position: 0 -182px;
    .RadTabStripBottom_Forrest .rtsLevel1 .rtsDisabled:hover .rtsOut background-position: 100% -182px;
      
    .RadTabStripBottom_Forrest_Baseline .rtsLevel1 background-position: 0 -599px; background-repeat: repeat-x;
      
    /* </orientation: bottom> */
      
    /* <orientation: right> */
      
    .RadTabStripRight_Forrest .rtsUL .rtsLink,
    .RadTabStripRight_Forrest .rtsUL .rtsLI .rtsDisabled:hover background-position: 100% 0; text-align: left;
    .RadTabStripRight_Forrest .rtsUL .rtsLink:hover background-position: 100% -200px;
    .RadTabStripRight_Forrest .rtsUL .rtsSelected,
    .RadTabStripRight_Forrest .rtsUL .rtsSelected:hover background-position: 100% -400px;
      
    /* </orientation: right> */
      
    /* </background positioning: tabs with hovers> */


    Choosing one of the default Sitfinity templates in the administration view, my custom theme is selected from the drop-down list, and the Navigation widget is included at the top of the template.
    All look fine except for the navigation tab appearence which picks up the built-in "Sitefinity" skin by default, therefore ignoring the RadTabStrip.skin.
    Switching between the build-in skins is no problem from inside the Naviation configurator (Wrapper CSS class parameter), but never do I get my own "Forrest" skin to work.

    What am i doing wrong here :-(
    Thanks,
    Torbjorn


  • 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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • 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
  • 245884_wrapper-css-class2.jpg
    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • 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

    You should put these names in the Wrapper CSS class (Skin) in the control designer for the navigation. 

    Greetings,
    Jordan
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • 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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • 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:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="NavigationTemplate.ascx.cs"
        Inherits="SitefinityWebApp.NavigationTemplate" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls.SiteMapNavigations"
        TagPrefix="navcontrols" %>
        <script runat="server" type="text/C#">
            protected void Page_Load()
            
                this.siteMapControl_horizontalsimple.TabDataBound += new Telerik.Web.UI.RadTabStripEventHandler(siteMapControl_horizontalsimple_TabDataBound);
            
     
            void siteMapControl_horizontalsimple_TabDataBound(object sender, Telerik.Web.UI.RadTabStripEventArgs e)
            
                //custom logic
            
        </script>
    <navcontrols:SiteMapNavigationTabStrip ID="siteMapControl_horizontalsimple" runat="server"
        Skin="Sitefinity">
    </navcontrols:SiteMapNavigationTabStrip>


    Best wishes,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items