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

Forums / Developing with Sitefinity / Sitefinity Breadcrumb separator

Sitefinity Breadcrumb separator

8 posts, 0 answered
  1. Russell
    Russell avatar
    15 posts
    Registered:
    23 Sep 2011
    26 Sep 2012
    Link to this post
    Is there a way to change the character being used for a separator in the Sitefinity Breadcrumb widget? Currently its "\" but I would like to use "->" instead.  I don't see this particular option in the template.
  2. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    27 Sep 2012
    Link to this post
    Daer Russell

    You can use jQuery to do this

    Add a JavaScript Widget and write this code

    $('.sfBreadcrumbNodeSeparator').html('->');

    That should be a starting point maybe. www.marktold.com/screencast/bradcrumb.swf

    Markus

    PS: Styling of course is always possible with css. This document might be of helpt to you http://www.sitefinity.com/documentation/docs/documentation-pdfs/designer's_guide.pdf?sfvrsn=2
  3. Russell
    Russell avatar
    15 posts
    Registered:
    23 Sep 2011
    31 Oct 2012 in reply to Markus
    Link to this post
    This did work, however I had to use the JavascriptEmbed Control to add Jquery, and then another one for a separate javascript file.  For some reason even though JQuery loaded, any JavaScript that referenced it would not run from the master page.  Putting the code in a separate .js file worked just fine.
  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    01 Nov 2012 in reply to Russell
    Link to this post
    You don't need jquery, it's just adding to your load time.

    If you edit the breadcrumb control in advanced mode there's a property called "NodeSeparatorMarkup", just edit that.
  5. Chanan Zass
    Chanan Zass avatar
    123 posts
    Registered:
    21 Aug 2012
    15 Oct 2013
    Link to this post
    Struggling here with styling the Breadcrumbs widget...
    We seek to increase the font size in the widget (Sitefinity version 6.1), trying everything but nothing works.
    This is the standard template:
    <%@ Control Language="C#" %>
    <%@ Register Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
       
      <div class="sfBreadcrumbWrp">
        <sf:SitefinityLabel id="BreadcrumbLabel" runat="server" WrapperTagName="span" HideIfNoText="true" CssClass="sfBreadcrumbLabel" />
        <telerik:RadSiteMap runat="server" ID="Breadcrumb" Skin="Sitefinity">
            <DefaultLevelSettings ListLayout-RepeatDirection="Horizontal" Layout="Flow"/>
        </telerik:RadSiteMap>
    </div>

    We've tried inserting style="font-size:16px !important;" as well as defining styles for classes used by RadSiteMap. To no avail.
    Any help would be most appreciated.


  6. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    15 Oct 2013 in reply to Chanan Zass
    Link to this post
    Yeah there's no way to do inline styles in the markup, they're asp controls which render differently, however it should be easily stylable still

    1) Remove the Skin="Sitefinity" and instead give it another name, maybe the name of the site.
    2) Inherit from the existing breadcrumb and substitute your own
    protected override void CreateChildControls()
            {
                base.CreateChildControls();
     
                this.ClientIDMode = System.Web.UI.ClientIDMode.Static;
                this.SiteMapBreadcrumb.ClientIDMode = System.Web.UI.ClientIDMode.Predictable;
                this.SiteMapBreadcrumb.EnableEmbeddedBaseStylesheet = false; //IMPORTANT
                this.SiteMapBreadcrumb.EnableEmbeddedSkins = false; //IMPORTANT
                this.SiteMapBreadcrumb.DataBound += SiteMapBreadcrumb_DataBound;
                this.SiteMapBreadcrumb.NodeDataBound += SiteMapBreadcrumb_NodeDataBound;
     
                this.CssClass += " clearfix";
            }
    So here we can do things when the entire control databinds or when each node databinds...

    OR you can ignore all that and override render to just LOOP through the nodes and modify them
            protected override void Render(HtmlTextWriter writer)
            {
                    foreach (RadSiteMapNode node in this.SiteMapBreadcrumb.Nodes)
                    {
                        if (node.Text.ToLower() == "detail" || node.Text.ToLower() == "details" || //Detail
                            node.Text.ToLower() == "categories"  || //Browser
                            node.Text.ToLower() == "-in-department" || node.Text.ToLower() == "departments") //ECOMM
                        {
                            node.Visible = false;
                        }
     
                        node.ToolTip = "";
                    }
    }
    So in this example I'm hiding nodes...

    So the idea is that you want to tell the sitemap to not use the embedded skins so that it won't send you any css garbage you need to override.

    IMO this should be done by telerik as a default....especially since the "Sitefinity" skin won't be a thing shortly.
  7. Chanan Zass
    Chanan Zass avatar
    123 posts
    Registered:
    21 Aug 2012
    15 Oct 2013 in reply to Steve
    Link to this post
    Thanks, Steve.
    I ended up following a similar logic.
    I've replaced the template's Sitefinity skin with a different skin (called it "Tyre").
    Then created a Skin file in App_Themes (within our default theme), called SiteMap.skin.
    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
    <telerik:RadSiteMap
        runat="server"
        Skin="Tyre"
        EnableEmbeddedSkins="false">
    </telerik:RadSiteMap>

    And accompanied that skin file with a style sheet, stored in its own folder under our default theme folder.
    Editing that style sheet we now have full control of the look of breadcrumbs.

    SiteMap.css
    @font-face {
        font-family: 'TradeGothicLTStdBold';
        src: url('media/tradegothicltstd-bold-webfont.eot');
        src: url('media/tradegothicltstd-bold-webfont.eot?#iefix') format('embedded-opentype'),
             url('media/tradegothicltstd-bold-webfont.woff') format('woff'),
             url('media/tradegothicltstd-bold-webfont.ttf') format('truetype'),
             url('media/tradegothicltstd-bold-webfont.svg#TradeGothicLTStdBold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    .RadSiteMap_Tyre {
        font: 18px 'TradeGothicLTStdBold', Arial, Verdana, sans-serif;
        color: white;
    }
    .RadSiteMap_Tyre .rsmLink,
    .RadSiteMap_Tyre .rsmTemplate
    {
        font: 18px 'TradeGothicLTStdBold', Arial, Verdana, sans-serif;
    }
     
    .RadSiteMap_Tyre .rsmLink:hover
    {
        color: #888;
    }
     
    .RadSiteMap_Tyre .rsmLevel2 .rsmLink:hover,
    .RadSiteMap_Tyre .rsmThreeLevels .rsmLevel1 .rsmLink:hover,
    .RadSiteMap_Tyre .rsmTwoLevels .rsmLevel1 .rsmLink:hover,
    .RadSiteMap_Tyre .rsmOneLevel .rsmItem .rsmLink:hover
    {
        color: #333;
    }


    Many thank, again.
  8. Daniel
    Daniel avatar
    19 posts
    Registered:
    08 Jan 2014
    24 Jan 2014 in reply to Chanan Zass
    Link to this post
    This works great, I was following your post and things are starting to function.  I don't see why Telerik-Sitefinity doesn't make it easier to change these settings. In the options they have a font section, but they don't have a font colour nor a font link, hover, or anything. There is a css option and it does nothing unless you make a new skin and follow the steps above. 

    Anyway, Nice tutorial :) 
8 posts, 0 answered