breadcrumb addition

You might be able to do this with something like this jQuery.

<@liaAddScript>
;(function($) {
    var breadcrumbs = $('.BreadCrumb').find('>ul');
    breadcrumbs.insertAfter('<li class="lia-breadcrumb-node crumb"><a id="custom_bc_link_1" class="lia-link-navigation crumb-community lia-breadcrumb-community lia-breadcrumb-forum" href="/my/url">Main Site Home</a></li><li class="lia-breadcrumb-node crumb"><a id="custom_bc_link_2" class="lia-link-navigation crumb-community lia-breadcrumb-community lia-breadcrumb-forum" href="/my/other/url">Secondary Page</a></li>');
})(LITHIUM.jQuery);
</@liaAddScript>

I am unable to test this right now.

Just upload your image under Studio > Community Style > Images.  Check the radio button next to "icon_list_separator_breadcrumb.png" to replace that image with your new image.

:smileysurprised: nice, didn't even consider using jQuery, great idea! Can you please tell me where I could add that javascript? I tried in the Community Style / Wrapper / Page Head Content, but it removed the breadcrumbs completely.

I was able to edit the breadcrumb with CSS after all. It wasn't using the basic asset image (you mentioned), it for some reason is using a colon " : " instead of an image.

Here's the CSS that worked:

/* hide colon */
#lia-body .lia-content .lia-component-common-widget-breadcrumb li.lia-breadcrumb-seperator span.separator{visibility:hidden;}

/* add new separator image */
#lia-body .lia-content .lia-component-common-widget-breadcrumb li.lia-breadcrumb-seperator{background-image:url(/html/assets/new-breadcrumb-separator.gif);background-repeat:no-repeat;background-position: 0 2px; width:10px;height:10px;}

 Thank you very much for your help.

I ended up figuring out how to include additional links to the breadcrumb by using a "Component". I formatted it with CSS to look like the rest of the normal breadcrumb and made space for the component in the Page / Layout / Header.

Thanks again for your help.