Sitefinity Breadcrumb separator

Posted by Community Admin on 26-Sep-2012 00:00

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.

Posted by Community Admin on 27-Sep-2012 00:00

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

Posted by Community Admin on 31-Oct-2012 00:00

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.

Posted by Community Admin on 01-Nov-2012 00:00

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.

Posted by Community Admin on 15-Oct-2013 00:00

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.

Posted by Community Admin on 15-Oct-2013 00:00

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.

Posted by Community Admin on 15-Oct-2013 00:00

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.

Posted by Community Admin on 24-Jan-2014 00:00

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

This thread is closed

All Replies