Adding higher levels to breadcrumb path

[daphneb]

Hello, I am writing internal documentation organized into several manuals. Each presents with its own Tripane TOC. There's way too much content to have it all in one TOC, and we like the Tripane look-and-feel.

I have a Library homepage connecting the manuals. Now I'd like to connect everything via breadcrumbs, roughly like so -
You are here: Library Home > Manual 1 Welcome page > TOC Book > Topic

Of course what actually happens is -
You are here: TOC Book > Topic

The first two of my desired links are not dynamic and can be hard coded. I can think of these possibilities:
- Is there a way in CSS to modify MC BreacrumbsProxy to add the links after the "You are here:" prefix
- Is there a way for the BC proxy to be an inline rather than block element, so I can add my desired links to the left of the generated links (and make it appear as one path)?
- Javascript to replace the BC proxy?

Help would be much appreciated!

Daphne

[NorthEast]

- Is there a way in CSS to modify MC BreacrumbsProxy to add the links after the "You are here:" prefix

It wouldn't be CSS - but you could insert the links using Javascript.

- Is there a way for the BC proxy to be an inline rather than block element, so I can add my desired links to the left of the generated links (and make it appear as one path)?

This is probably the easiest method - add the links to the master page, so they appear before the breadcrumbs proxy.

Code: Select all

<div>
   <span class="MCBreadcrumbsPrefix">You are here: </span>
   <a href="#" class="MCBreadcrumbsLink">Breadcrumb link</a>
   <span class="MCBreadcrumbsDivider"> > </span>
   <MadCap:breadcrumbsProxy />
</div>

Then add your own CSS to modify the breadcrumb style in the output.

Code: Select all

div.MCBreadcrumbsBox_0
{
   display: inline-block;
}

[daphneb]

Thank you sooo much Dave Lee. This appears to be exactly what I was looking for. Will let you know how it goes in a bit.

[daphneb]

Hi Dave, I'm able to get the two links I want to prepend to display to the left of the breadcrumb proxy with CSS as you suggested. But there's a problem.
Unfortunately I can't get the "You are here" out of the breadcrumb proxy, resulting in:
Library Home > Manual 1 > You are here: TOC Book > Topic

I'd assumed removing the 'You are here' would be a piece of cake since it shows up in the out-of-the-box CSS like so:

Code: Select all

MadCap|breadcrumbsProxy
{
	border-bottom: none;
	font-size: .7em;
	font-style: italic;
	mc-breadcrumbs-prefix: 'You are here: ';
}

Unfortunately, removing the last line doesn't work. Nor does replacing the string with nothing inside the quotes, nor a space, nor or any word between the quotes. All of that still results in "You are here" showing up; even when I ensure the string is nowhere in the CSS. Despite initially appearing in the CSS, it appears to be hard coded into the proxy.

So I believe I'll need a JS solution such as the one you offer in this thread: viewtopic.php?f=12&t=11606&p=124171&hil ... nd#p124171

However mine will have two prepended links both with target=_parent. I have to go to a meeting and will let you know if this works later. (And if you have further thoughts I would be delighted to read them! Thank you.)

[NorthEast]

Unfortunately, removing the last line doesn't work. Nor does replacing the string with nothing inside the quotes, nor a space, nor or any word between the quotes. All of that still results in "You are here" showing up; even when I ensure the string is nowhere in the CSS. Despite initially appearing in the CSS, it appears to be hard coded into the proxy.

Strange - this works fine for me:

Code: Select all

mc-breadcrumbs-prefix: '';

That's two apostrophes (') without a space, not a quote (").

Maybe double-check your CSS - that it's in the right medium, and there aren't two breadcrumbs styles.

[daphneb]

Dave,
I don't know what I did wrong before but the CSS solution is working!
Thanks again for you help,
Daphne

[lorynj]

For the record, using this technique in Flare 2018 with the SideNav skin seems not to work because the breadcrumb proxy always renders on the next line (despite display: inline-block being set). Dave Lee's javascript solution does work nicely though!

[NorthEast]

For the record, using this technique in Flare 2018 with the SideNav skin seems not to work because the breadcrumb proxy always renders on the next line (despite display: inline-block being set). Dave Lee's javascript solution does work nicely though!

It'll be all skins, not not just the side nav skin - the Flare 2018 output HTML is different, and the breadcrumbs are now inside a div.nocontent which is set to display:block (hence the new line). So if you wanted to use this CSS-only method, then I'd suggest enclosing the whole thing in your own div, and then using CSS to set the div.nocontent and div.MCBreadcrumbsBox_0 inside to display: inline-block. Do it this way because div.nocontent is used elsewhere.

[lorynj]

Thanks, Dave!

You're right. The CSS did work in 2018 by:
1. Wrapping the breadcrumb proxy in my own div.
2. Wrapping the "higher level" breadcrumb in a span to style it identically to the proxy styling.
3. Setting div.nocontent and div.MCBreadcrumbsBox_0 to display: inline-block in the stylesheet.

I thought I would prefer the CSS version to the javascript version as it's arguably easier to understand than the javascript version. I also thought it would have the better performance.

But when I tested the result in three browsers (Chrome, Firefox, Safari), I found that the CSS version resulted in some extra vertical "jitter" when rendering the fonts. The Javascript version appeared absent the vertical jitter.

As a result, I elected to use Dave Lee's javascript version.