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
Adding higher levels to breadcrumb path
Re: Adding higher levels to breadcrumb path
It wouldn't be CSS - but you could insert the links using Javascript.daphneb wrote:- Is there a way in CSS to modify MC BreacrumbsProxy to add the links after the "You are here:" prefix
This is probably the easiest method - add the links to the master page, so they appear before the breadcrumbs proxy.daphneb wrote:- 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)?
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>
Code: Select all
div.MCBreadcrumbsBox_0
{
display: inline-block;
}
Re: Adding higher levels to breadcrumb path
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.
Re: Adding higher levels to breadcrumb path
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:
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.)
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: ';
}
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.)
Re: Adding higher levels to breadcrumb path
Strange - this works fine for me:daphneb wrote: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.
Code: Select all
mc-breadcrumbs-prefix: '';
Maybe double-check your CSS - that it's in the right medium, and there aren't two breadcrumbs styles.
Re: Adding higher levels to breadcrumb path
Dave,
I don't know what I did wrong before but the CSS solution is working!
Thanks again for you help,
Daphne
I don't know what I did wrong before but the CSS solution is working!
Thanks again for you help,
Daphne
Re: Adding higher levels to breadcrumb path
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!
Loryn Jenkins
Technical Writer and Consultant
Franchise Cloud Solutions
Technical Writer and Consultant
Franchise Cloud Solutions
Re: Adding higher levels to breadcrumb path
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 wrote: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!
Re: Adding higher levels to breadcrumb path
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.
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.
Loryn Jenkins
Technical Writer and Consultant
Franchise Cloud Solutions
Technical Writer and Consultant
Franchise Cloud Solutions