Frames in Standard Skins

When it comes to skins, frames refer to the "containers" of the navigation items that display in the output when you include elements such as accordion items, toolbars, and Feedback at the end of topics (see Skins). In order to see these items in the output, you must include them in your project (see Specifying Navigation Elements to Include in the Output Window, MadCap Feedback, Web Toolbars in WebHelp Outputs, Web Toolbars in HTML Help Output, and Editing Topic Toolbar Settings in a Standard Skin).

Some of these styles are supported only in WebHelp and WebHelp Plus.

How to Specify Style Settings for Frames

1. Open a Standard skin.
2. Select the Styles tab.

3. In the Styles section, expand the Frame node.

   

4. Select the item that you want to edit. If you want the setting(s) to be applied to all of the items, select the Frame node itself.

   The items under this node represent the different kinds of frames that may be found in your output.

   Clear filter

   Accordion Browse Sequence	This is the frame that holds the browse sequences. See Browse Sequences.
   Accordion Favorites	This is the frame that holds the search string and topic favorites.
   Accordion Glossary	This is the frame that holds the glossary. See Glossaries.
   Accordion Index	This is the frame that holds the index. See Indexes.
   Accordion Search	This is the frame that holds the search fields and results. See Search.
   Accordion TOC	This is the frame that holds the table of contents (TOC). See Tables of Contents.
   Body Comments	This is the frame that holds the topic comments associated with MadCap Feedback at the bottom of topics. See MadCap Feedback.
   Navigation Drag Handle	This is the divider between the active navigation feature and the navigation bars. Users can click the handle of this divider and drag it to adjust the space in the navigation pane.
   Navigation Top Divider	This is the top edge of the navigation pane.
   Toolbar	This is the frame that holds the WebHelp toolbar. See Web Toolbars in WebHelp Outputs and Web Toolbars in HTML Help Output.
   Topic Toolbar	This is the frame that holds a custom topic toolbar. See Editing Topic Toolbar Settings in a Standard Skin.

5. Select the Property Groups or Alphabetical List option to display the properties for the style item.

6. In the Properties section, set the values for the properties that you want modify.

   Background Color

   To change the background color of the item:

   Expand the Frame or General property group (depending on the item you selected) on the right and change the value in the Background Color field. Click the down arrow to open a color palette window. You can click a color shown, or you can click More colors and select a different color or create a custom color. If you are change the color for a style item that also has a gradient, the gradient properties have precedence over the solid color.

   Background Gradient

   To change the background gradient color of the item:

   Expand the General property group on the right and change the value in the Background Gradient field to apply a color progression effect. The background changes from one color to another. Click the down arrow to open a small window. In this window, click the down arrow next to the Start field and select a color to use at the beginning of the gradient. Then click the down arrow next to the End field and select the color to use at the end of the gradient. Finally, click the down arrow next to the Style field and select a direction for the gradient effect or choose "solid." Click OK to accept the settings. When you click off the properties field, a small icon is displayed in the field, showing how the effect will look. If you are change the color for a style item that also has a gradient, the gradient properties have precedence over the solid color.

   Background Gradient Pressed

   To change the background gradient color of the item when it is pressed:

   Expand the General property group on the right and change the value in the Background Gradient Pressed field to apply a color progression effect. The background changes from one color to another. Click the down arrow to open a small window. In this window, click the down arrow next to the Start field and select a color to use at the beginning of the gradient. Then click the down arrow next to the End field and select the color to use at the end of the gradient. Finally, click the down arrow next to the Style field and select a direction for the gradient effect or choose "solid." Click OK to accept the settings. When you click off the properties field, a small icon is displayed in the field, showing how the effect will look. If you are change the color for a style item that also has a gradient, the gradient properties have precedence over the solid color.

   Background Image

   To add a background image to the item:

   Expand the General property group on the right and select an image in the Background Image field. Click the down arrow in this field and then select Browse for Image to find and select an image file.

   Background Image Pressed

   To add a background image to the item when it is pressed:

   Expand the General property group on the right and select an image in the Background Image Pressed field. Click the down arrow in this field and then select Browse for Image to find and select an image file.

   Borders

   To add or change borders for the item:

   Expand the Heading property group on the right and change the value in any of the "Border" fields (e.g., Border Left, Border Right). Click the down arrow to open a small window. In this window, you can enter the width of the border in the lower-left field. You can select the unit of measurement (e.g., pixels, points, centimeters) using the lower-left drop-down arrow. See Units of Measurement. You can select a color for the border using the upper-right drop-down arrow. And you can select the type of line for the border (e.g., solid, dashed, dotted) using the lower-right drop-down arrow.

   Font Color

   To change the color of the font for the item heading:

   Expand the Heading property group on the right and change the value in the Color field. Click the down arrow to open a color palette window. You can click a color shown, or you can click More colors and select a different color or create a custom color. If you are change the color for a style item that also has a gradient, the gradient properties have precedence over the solid color.

   Font Family

   To select a specific font family (e.g., Arial, Tahoma, Verdana) for the item heading:

   Expand the Heading property group on the right and change the value in the Font Family field. From the drop-down, select the font family or font set that you want to use.

   Font Size

   To change the size of the font for the item heading:

   Expand the Heading property group on the right and change the value in the Font Size field. Click the down arrow to open a small window. In this window, you can enter the size of the font in the lower-left field (either type a number or use the up and down arrows). You can select the unit of measurement (e.g., pixels, points, centimeters) using the lower-right drop-down arrow. See Units of Measurement. You can return to the default setting by using the upper-right drop-down arrow.

   Font Style

   To change the style of the font (e.g., make it italic) for the item heading:

   Expand the Heading property group on the right and change the value in the Font Style field. Click the down arrow and select either italic or normal.

   Font Weight

   To change the weight of the font (e.g., make it bold) for the item heading:

   Expand the Heading property group on the right and change the value in the Font Weight field. Click the down arrow and select either bold or normal.

   Height

   To change the height of the item:

   Expand the General property group on the right and change the value in the Height field. Click the down arrow to open a small window. In this window, you can enter the item height in the lower-left field (either type a number or use the up and down arrows). You can select the unit of measurement (e.g., pixels, points, centimeters) using the lower-right drop-down arrow. You can return to the default setting by using the upper-right drop-down arrow.

   Label

   To change the heading text that appears on the item:

   Expand the Heading property group on the right side of the editor and enter new text in the Label field.

   Scrolling for Accessibility

   To enable scrolling in order to make the toolbar accessible:

   Expand the Frame property group on the right side of the editor. Click in the cell to the right of Scrolling and select auto. For more information on this option, see Accessibility and Scrolling.

7. Click to save your work.