Applying Styles to Topic Content

When you insert or create certain content in a topic, the parent tag for that type of element is often automatically applied (e.g., the <li> tag is automatically applied when you create a list bullet item). The following steps show you how to select a particular style for content (perhaps a class of a parent tag, such as "li.indented," or another tag altogether).

1. Open the topic for which you want to apply styles.
2. When applying styles to content, you are likely to use one of the following, depending on the type of style you are applying: Styles window pane, style drop-down in the Text Format toolbar, Floating Style Picker, tag structure bars, or markers. Most of the time, there are multiple ways to select a style. To make sure these tools are open, do the following:

   • Styles window pane

     Select View>Style Window or press F12 on your keyboard. The Styles window pane opens on the right side of the interface, showing styles from your style sheet.

   • Drop-down in Text Format toolbar

     Select View>Toolbars>Text Format so that it has a check mark next to it. The drop-down in the toolbar looks like this:

     The current style is displayed in the drop-down—in this example, <li> is the current style.

   • Floating Style Picker

     After placing your cursor on some topic content, press CTRL+SHIFT+H on your keyboard. The Style Picker displays, showing style classes from the style sheets that are associated with the topic.

     

   • Structure bars

     In the local toolbar at the bottom of the XML Editor, click one of the buttons to turn on the structure bars: . Depending on the button that you click, structure bars are displayed either to the left of the topic or table content, or above it. See About Structure Bars.

     To watch a movie that explains these bars, click here.
     

   • Markers

     In the local toolbar of the XML Editor, click the down arrow in the Show tags button and select Show Markers.

   When applying styles to content, you may notice from time to time that the style you are looking for is not available from the drop-down list or Styles window pane when you try to select it. This can occur if you have not yet made any modifications to the style in the Stylesheet Editor. Therefore, before applying a style to content, make sure you first provide the necessary settings for the style. See Editing Styles.

   Another possible reason for this has to do with the location of the cursor in the topic. Flare realizes where the cursor is placed and knows that only certain styles should be applied at that location.

   example

   Let's say that you have your cursor on a regular paragraph and you want to apply a list <li> style to it in order to turn it into the beginning of a bulleted list. Because it is not yet a list item, but rather a simple paragraph, you will not see your <li> style when you try to select it. Instead, you will see several paragraph styles in the list. In order to use the list style, you first need to turn the paragraph into a bulleted list item, by clicking the bullet button in the Text Format toolbar or selecting an option such as Format>List>Bullet List.

   Here is another example. If multiple paragraphs are selected or if the cursor is simply placed somewhere within a paragraph, the paragraph styles are shown in the Styles window pane. If only a portion of a paragraph is selected, the character styles are shown.

   If you still do not see your style available for selection, try closing and re-launching Flare.

3. In the topic, do one of the following, depending on the type of content to which you are applying a style:

   Characters (i.e., selected text):

   1. Highlight all characters within a paragraph that you want to be affected by the style, without selecting the entire paragraph.
   2. From the Styles window pane, the Floating Style Picker, or the Text Format toolbar, select the character style.

   Dynamic effects (e.g., drop-down text, expanding text, togglers, popups):

   1. Insert the dynamic effect. For example, if you are working with drop-down text, see Inserting Drop-Down Text into Topics .
   2. Make sure you have already created a class for one of the parent dynamic effect styles in the Stylesheet Editor (e.g., MadCap|dropDownHead.italic). See Creating New Style Classes.
   3. For some dynamic effect styles (e.g., MadCap|dropDownHead.italic), you can place your cursor on the appropriate text in the topic and select the style from the Styles window pane or Text Format toolbar. For other dynamic effect styles (e.g., MadCap|dropDown.myimageicon), you can hover over the appropriate marker in the topic until the cursor is an arrow . Then right-click the marker and select Style Class>[Name of Style].

   Footnotes:

   1. Insert the footnote into the topic. See Inserting Footnotes.
   2. Make sure you have already created a class for one of the parent footnote tags in the Stylesheet Editor. See Creating New Style Classes.
   3. For some footnote styles (e.g., <MadCap|footnote>), you can hover over the appropriate marker in the topic until the cursor is an arrow . Then right-click the marker and select Style Class>[Name of Style].

   Forms:

   1. Insert the form into the topic. The <form> tag can be selected after you highlight multiple paragraphs in a topic and select Format>Group. See Creating Tag Groups.
   2. Make sure you have already created a class for the <form> tag in the Stylesheet Editor. See Creating New Style Classes.

   3. To the left of the form, hover over the structure bar to the left that is labeled "form" until the cursor is a hand . Then click the bar and select Style Class>[Name of Style].

   Headings:

   1. Click somewhere in the paragraph to be used as the heading. If you highlight the text, make sure you highlight the entire paragraph. Otherwise, you will not be able to select a heading style, but rather a character style only. The exception to this is when you highlight portions of multiple paragraphs at the same time; in that case, you will be able to select a heading style to be applied to all of those paragraphs.
   2. From the Styles window pane, the Floating Style Picker, or the Text Format toolbar, select the character style.

   Links (e.g., cross-references, text hyperlinks):

   1. Insert the link into the topic.
   2. Make sure you have already created a class for the link tag in the Stylesheet Editor (e.g., a.greenlink, MadCap|xref.seepage). See Creating New Style Classes.
   3. In the topic, click inside the link that you inserted.

   4. Click the tag hint bar—the small yellow rectangle below and at the beginning of the link.

      Alternatively, at the top of the XML Editor, you can click the span bar representing the link. For example, hyperlink span bars have an "a" label, and cross-reference span bars have a "MadCap:xref" label. When you click on the link in the topic, the appropriate span bar at the top of the XML Editor will change color to indicate that it goes with the link. If your span bars are not turned on, click in the local toolbar at the bottom of the XML Editor.

   5. In the menu, select Style Class>[Name of Style].

   List items:

   1. Create the list item in the topic. See About Lists.
   2. Make sure you have already created a class for the list tag in the Stylesheet Editor (e.g., li.Indented). See Creating New Style Classes.
   3. Click somewhere in the list item. If you highlight the text, make sure you highlight the entire line. Otherwise, you will not be able to select a list style, but rather a character style only. The exception to this is when you highlight portions of multiple list items at the same time; in that case, you will be able to select a list style to be applied to all of those items.
   4. From the Styles window pane, the Floating Style Picker, or the Text Format toolbar, select the character style.

   Paragraphs:

   1. Click somewhere in the paragraph. If you highlight the text, make sure you highlight the entire paragraph. Otherwise, you will not be able to select a paragraph style, but rather a character style only. The exception to this is when you highlight portions of multiple paragraphs at the same time; in that case, you will be able to select a paragraph style to be applied to all of those paragraphs.
   2. From the Styles window pane, the Floating Style Picker, or the Text Format toolbar, select the character style.

   Reusable content (e.g., variables, proxies)

   1. Insert the reusable content into the topic.
   2. Make sure you have already created a class for one of the reusable content tags in the Stylesheet Editor (e.g., MadCap|variable.bluetext). See Creating New Style Classes.

   3. Hover over the reusable item in the topic until the cursor is an arrow . Then right-click the item and select Style Class>[Name of Style].

   Tables:

   1. Insert the table into the topic. See Inserting Tables into Topics.
   2. Make sure you have already created a class for any of the table styles in the Stylesheet Editor (e.g., th.style1, td.mystyle, tr.firsttablerow). See Creating New Style Classes.

   3. For some table styles (e.g., <caption>, <th>), you can click somewhere on the appropriate text in the table and select the style from the Styles window pane, the Floating Style Picker, or the Text Format toolbar.

      For other table styles (e.g., <table>, <tr>), you can hover over the structure bar until the cursor is a hand . Then click the bar and select Style Class>[Name of Style].

      If want to select the <table> style, you need to first click elsewhere in the topic (outside of the table) in order to see the appropriate bar. If you want to select other styles, such as <tr>, you need to click inside the table to see the appropriate table structure bars. See About Structure Bars.

   Note: For another way to select styles for table content, including the ability to use <p> tags in tables, see Selecting Styles for Table Cell Contents.

   Note: You can also create and apply style sheets specifically for tables (described below).

4. Press CTRL+S or click to save your work.

1. Open the topic where a table has been inserted.
2. Click somewhere in the topic outside of the table.

3. If the tag block bars are not displayed to the left of the topic, click at the bottom of the editor.

   To watch a movie that explains these bars, click here.
   

4. Hover over the table tag bar until the cursor is a hand . Then click it.

   

5. In the popup menu, select Table Properties.

   The Table Properties dialog opens.

6. In the Table Style section, select the style sheet.

   Note: You can also select a CSS table style for the table by clicking CSS Class.

7. Click OK.
8. Press CTRL+S or click to save your work.