Breadcrum and background image issue

deend - There is a component for the breadcrumb in studio by the name of "Breadcrumb" and the ID is common.widget.breadcrumb, this is listed under Navigation in Page tab. You need to add this to the header page or you can also include this to the header in the wrapper using following snippet:

<@component id="common.widget.breadcrumb"/>

To change the background image on each page, I am assuming different boards/ categories, you can do so by using the board/ category IDs which can be extracted on a page using lithium context objects.

You can do something like:

<#if coreNode.id == "categoryAbc">
          // background 1
<#elseif coreNode.id == "categoryXyz">
          // background 2
<#else>
          // default background 
</#if>

Hi deend,

You can create your own custom breadcrum (Custom Component) using Lithium breadcrum CSS classes.

Following is the code snippet:

<#if coreNode.id == "categoryAbc">
   <div class="BreadCrumb crumb-line lia-breadcrumb lia-component-common-widget-breadcrumb" class="BreadCrumb crumb-line lia-breadcrumb" style="background:'url(Image URL)';">
   <ul class="lia-list-standard-inline">
     <li class="lia-breadcrumb-node crumb"> 
      <a href="add page navigation links">
    </li>
   <li class="lia-breadcrumb-node crumb"> 
     <a href="add page navigation links">
     </li>
  </ul>
</div>
</#if>

Hope this helps!

Regards,

Phani