Adding Breadcrumbs to Simple Pages

Customization
1

Hello Curatescape community,

I am currently in the process of finalizing my Curatescape-based project and would like to add breadcrumbs to my simple pages, since I have nested pages and would like my users to know where they’re at in the navigation. I added the breadcrumbs code from the Seasons theme to the Curatescape Simple Pages PHP page and ended up with echo printed breadcrumbs, but the Curatescape separator is being summoned, which breaks the breadcrumbs into new paragraphs for some reason. Of course breadcrumbs are supposed to be linear, separated by a > or some other symbol.

Can anyone help me figure out how to avoid having this grey gradient separator appear in my breadcrumbs? I’d like them to be just simple text/URLs.

Thank you.

BJG

image
image2338×1010 157 KB

Here is the printed HTML code:

<article class="page show">
<p><a href="[/](https://www.wheremonstersareborn.com/)">Home</a><span class="separator" aria-hidden="true"> &gt; </span><a href="[/about](https://www.wheremonstersareborn.com/about)">About</a><span class="separator" aria-hidden="true"> &gt; </span>About the Project</p>

<h2 class="page_title">About the Project</h2>
2

The CSS rules for the .separator class are being inherited from the theme. You can override those styles with your own CSS or remove the class from the breadcrumbs HTML.

3

Thanks for the reply, Erin. I think I’d like to keep the Curatescape-echo separator class in tact for the rest of the website, but would very much like to just remove this separator tag from the breadcrumbs code. I looked this up already but couldn’t figure out where in Omeka that breadcrumbs code is coming from. I think Omeka has a forum of its own on which I can inquire about this customization.

Thanks again.

BJG

4

This is neither a Curatescape nor an Omeka question really. This is essentially a question about how CSS works. The separator class you see is coming from the active theme’s CSS file. You can override a CSS class in specific instances by using a more specific selector, e.g.

body.page.simple-page .separator{
  background:red !important;
}

In the example above, the separator will be red only on a simple page (i.e., any page where the body element has the classes page and simple-page).

5

The previous example will still impact the separator that’s part of the footer design, as well as the breadcrumb code output by the simple_pages_display_breadcrumbs() function, so if you go this route, you could try using something far more targeted, e.g.

body.page.simple-page #page-content :not(#simple-pages-breadcrumbs) .separator{
  width: auto;
  height: auto;
  background: transparent;
  display: inline;
}

(not tested but maybe enough to get you to where you need to go)

6

That worked beautifully! Thanks Erin!

image
image1920×1377 183 KB

1 Like