Forum Discussion

jasond's avatar
jasond
Contributor
13 years ago

breadcrumb addition

Hi,   1) I'm trying to find a way to include additional (static) page links to the breadcrumb, to make it look like it came from the main website. Similar to this: Main Site Home >  Secondary Pag...
xorrkaz's avatar
xorrkaz
Genius
13 years ago

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.

  • jasond's avatar
    jasond
    Contributor
    13 years ago

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

    • jasond's avatar
      jasond
      Contributor
      13 years ago

      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.

      • KaelaC's avatar
        KaelaC
        Lithium Alumni (Retired)
        13 years ago
        Looks like you got it working but for anyone else who is looking to do something like this, you can always use

        ${page.content.nav.breadcrumb.separator}

        to display a breadcrumb separator.