Editing the Look of Breadcrumbs

After you create breadcrumbs for online output by using the Breadcrumbs proxy, you can modify the look of those breadcrumbs by using styles. There are numerous ways that you can change the look of breadcrumbs. The most common tasks are described in the following steps.

How to Edit the Look of Breadcrumbs

1. From the Content Explorer, open the stylesheet that you want to modify.

2. In the local toolbar, make sure the first button displays . If the button displays instead, then click it.

   Note Some of the necessary style properties can also be changed in the Simplified view in the Stylesheet Editor.

3. In the upper-left corner of the editor, click in the drop-down field and select .

4. On the left side of the editor, select MadCap|breadcrumbsProxy.

5. From the Show drop-down list on the upper-right side of the editor, select . The most relevant properties for that style are shown on the right side of the editor.
6. (Optional) You can use the toggle button in the local toolbar to show properties below in a group view or an alphabetical view .
7. Locate the property you want to change.

8. The area to the right of the property is used for selecting and entering values. If you know how to enter the information correctly, you can click in the value field and type it directly. Otherwise, click the ellipsis button to the right of the property. Depending on the type of property, the appropriate controls and options display, allowing you to choose or enter values (e.g., select from a drop-down list, click a button, complete fields in a dialog or popup). If you completed values in a popup, click OK at the bottom of the box.

   Here are some of the more common properties that you might change.

   To Change the Border Below

   1. If you are using the grouped view, expand the Border group. 
   2. Locate the border-bottom property.
   3. To the right of the property, click , and enter a number and a unit of measurement. You can also enter a border color, width, and/or style.
   4. Click OK.

   You can also use the other fields in this property group to add borders above, to the left, or to the right of the breadcrumbs.

   To Change the Breadcrumbs Count

   1. If you are using the grouped view, expand the Unclassified group.
   2. Locate the mc-breadcrumbs-count property.
   3. To the right of the property, click , and select a number. The default setting is 3.

   To Change the Breadcrumbs Divider

   1. If you are using the grouped view, expand the Unclassified group.
   2. Locate the mc-breadcrumbs-divider property.
   3. To the right of the property, enter text (such as a dash) in the value field.

   To Change the Breadcrumbs Prefix

   1. If you are using the grouped view, expand the Unclassified group.
   2. Locate the mc-breadcrumbs-prefix property.
   3. To the right of the property, change the text in the value field. The default setting is "You are here:" (e.g., You are here: First Topic > Second Topic > Third Topic).

   To Change the Font Family

   1. If you are using the grouped view, expand the Font group.
   2. Locate the font-family property.
   3. To the right of the property, click , and in the popup select the font or font family.

   To Change the Font Size

   1. If you are using the grouped view, expand the Font group.
   2. Locate the font-size property.
   3. To the right of the property, click , and in the popup set the font size.
   4. Click OK.

   To Change the Margin Below

   1. If you are using the grouped view, expand the Box group.
   2. Locate the margin-bottom property.
   3. To the right of the property, click , and in the popup and enter the margin value.
   4. Click OK.

   You can also use the other fields in this property group to add margins above, to the left, or to the right of the breadcrumbs.

   To Change the Padding Below

   1. If you are using the grouped view, expand the Box group.
   2. Locate the padding-bottom property.
   3. To the right of the property, click , and in the popup enter the padding value.
   4. Click OK.

   You can also use the other fields in this property group to add padding above, to the left, or to the right of the breadcrumbs.

9. Click to save your work.