Breadcrumbs

[Errol Siegel]

I need to implement a design handed to me in radiant.

The first issue I am hitting is the way they are displaying breadcrumbs. It looks like this:

<ul>

<li><img src="/system/assets/93/original/home.png" alt="home" width="11" height="10" /></li>

<li><a href="index.html">Home</a></li>

<li><img src="/system/assets/67/original/breadcrumb-arrow.png" alt="breadcrumb-arrow" width="4" height="8" />

<li><a href="careers" class="sel">Careers</a></li>

</ul>

They are displaying an image as a list item between each breadcrumb, where the first image is different than subsequent images.

Any suggestions on how to implement this?

[Joel Oliveira]

With CSS you can get this done. 

Style the "normal" breadcrumb with list-type of image (I think?) and override for the first element with nth-child - http://css-tricks.com/useful-nth-child-recipies/

--
 
---
You received this message because you are subscribed to the Google Groups "Radiant CMS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to radiantcms+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Errol Siegel]

Thanks for the response.

There are two issues with what you are suggesting:

1. How do you get <r:breadcrumbs /> to return a list?
2. Notice how I described that they are actually displaying an additional list item in between each of the actual list items.

To unsubscribe from this group and stop receiving emails from it, send an email to radiantcms+unsubscribe@googlegroups.com.

[Benny Degezelle]

1: <ul><li><r:breadcrumbs seperator="</li><li>"></li></ul>

2: The point is that you can achieve the same result whilst keeping your markup clean. Look at :before and :after CSS, together with n-th child you can solve the whole problem. You will not need extra <li>'s in between the items if you do it properly.

But.. assuming you háve to use their markup or don't feel like doing their job for them, here's the dirty version:

  <ul>

    <li><img src="/system/assets/93/original/home.png" alt="home" width="11" height="10" /></li>

    <li><r:breadcrumbs seperator='

    </li>

    <li><img src="/system/assets/67/original/breadcrumb-arrow.png" alt="breadcrumb-arrow" width="4" height="8" /></li>

    <li>

    ' /></li>

  </ul>

Untested but that should about nail it.

Op woensdag 29 januari 2014 19:13:24 UTC+1 schreef Errol Siegel: