Open topic with navigation

Setting the Background for Lists

You can set a background color and/or image on lists or items within them.

How to add a background to a list using a style

1. Open the topic style sheet that you want to modify.

2. Make sure the appropriate medium is selected. If you are not using style sheet mediums for your different outputs or if you want all mediums to have the same settings, just leave the medium set to "default" and continue.

   Mediums can be used if you want to use one group of settings for online output types (DotNet Help, HTML Help, WebHelp, WebHelp Plus, WebHelp AIR, WebHelp Mobile) and another group of settings for print-based output types (Adobe PDF, XHTML, Microsoft XPS, Microsoft Word, Adobe FrameMaker). For example, you might use the "default" medium for your online outputs and you might use the "print" medium for your print outputs. See About Style Sheet Mediums.

   

3. In the local toolbar, make sure the first button displays (which means that the Advanced view is currently shown in the editor). If the button displays instead, then click it.
4. In the upper-left corner of the editor, click in the Show Styles field and select Show List Styles.

5. Select the appropriate list style. For example, you can select the parent li tag, or you can select a class that you may have created for that tag (e.g., li.Bold, li.Italic). For more information about the <li> tag and the other tags for lists, see List Style Tags.

6. From the Show Properties drop-down list on the upper-right side of the editor, select Show: Property Groups.
7. In the Properties section, click the plus button next to Background to expand the group.The property name is shown in the left column. The right column is used for selecting and entering values for the property.
8. Locate the background property that you want to change, depending on what you are trying to accomplish.

   Set a color for the background:

   • To the right of background-color, click the down arrow and select a color from the popup. For advanced color options, select More Colors and use the fields in the Color Picker dialog.

   Add an image to the background:

   1. To the right of background-image, click and select an image already contained in your project.
   2. If you want the background image to repeat, click in the cell to the right of background-repeat and select one of the options (definitions from http://www.w3.org).
      • no-repeat The image is not repeated: only one copy of the image is drawn.
      • repeat The image is repeated both horizontally and vertically.
      • repeat-x The image is repeated horizontally only.
      • repeat-y The image is repeated vertically only.
9. Press CTRL+S or click to save your work.

WHAT'S NEXT?

After editing a style, you can apply it to content in a topic. See Applying Styles to Topic Content.

Open topic with navigation