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