More in this section

Forums / General Discussions / Skin the Navigation widget

Skin the Navigation widget

11 posts, 0 answered
  1. Torbjorn
    Torbjorn avatar
    7 posts
    Registered:
    14 May 2009
    26 Oct 2010
    Link to this post
    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


  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    27 Oct 2010
    Link to this post
    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
  3. Jesper
    Jesper avatar
    4 posts
    Registered:
    10 Nov 2010
    25 Jan 2011
    Link to this post
    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
  4. Jesper
    Jesper avatar
    4 posts
    Registered:
    10 Nov 2010
    25 Jan 2011
    Link to this post
    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
  5. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    27 Jan 2011
    Link to this post
    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
  6. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    22 Sep 2011
    Link to this post
    Where can we find a list of existing, or built-in skins?

    Regards,
    Jacques
  7. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    26 Sep 2011
    Link to this post
    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
  8. Levent
    Levent avatar
    8 posts
    Registered:
    23 Aug 2011
    14 Nov 2011
    Link to this post
    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>
  9. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    17 Nov 2011
    Link to this post
    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
  10. Levent
    Levent avatar
    8 posts
    Registered:
    23 Aug 2011
    17 Nov 2011
    Link to this post
    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;   
                  }  
               }
            }    
     }
    }
  11. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    22 Nov 2011
    Link to this post
    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
11 posts, 0 answered