Here's what it looks like:
The only real downside is that the breadcrumbs can't be clicked to navigate the tree. It's a static, non-interactive representation of where in the content the reader is. It is possible to include the links, but it requires additional Javascript coding to help the links understand where to go and would differ from company to company or Flare project to Flare project.
Update the skin first:
- 1) Open your skin from the Project Organizer. Click Toolbar.
2) Add a new Toolbar button called "breadcrumbs".
3) Add the new button to the Toolbar list. Place it at the top of the list and put the "Filler" element after it.
4) Go to the Styles tab and expand Toolbar Button in the Topic section.
5) Update the breadcrumbs item:- a. Set both Gradients to transparent.
b. Set the color to be whatever the background color of your Toolbar is.
c. Set the image to "none".
- a. Set both Gradients to transparent.
- 1) Right-click on your master page in the Content Explorer and select Open With --> Internal Text Editor.
2) In the <head> element, copy this jQuery script code:
Code: Select all
<script type="text/javascript">/* <![CDATA[ */
window.onload = function() {
var $breadcrumbText = $('.MCBreadcrumbsBox_0').text(); // Grab the breadcrumbs text
var $breadcrumbs = $('.breadcrumbs-button', window.parent.document); // Find the breadcrumb button
$breadcrumbs.html($breadcrumbText); // Replace the button HTML with the text from the breadcrumb
$breadcrumbs.css({ // Style the text
color : 'gray', // Text color
width : 'auto', // Auto width is required
cursor : 'default', // Prevent users from thinking they can interact with the button
'font-size' : '14px' // Font size
});
}
/* ]]> */</script>
- 1) Set the MadCap|breadcrumbsProxy display attribute to "none".
Code: Select all
MadCap|breadcrumbsProxy
{
display: none;
}
NOTE: You cannot test this via local files on Chrome as you'll encounter what amounts to a "same origin policy" error. It should test fine in IE or FF. If you put the output on an actual web server (even a local one), it works fine in Chrome.