Style Tags in Flare Desktop Editors

In addition to the Stylesheet Editor, the XML Editor and Internal Text Editor are Flare Desktop’s primary editors when working with style elements. Once style properties are defined in the stylesheet, they can be applied to the content.

How to Identify Styles in the XML Editor

Flare Desktop's structure bars are a great visual tool for identifying topic tags and page architecture. The bars provide information about content and the styles that are applied to that content. See Structure Bars.

Tag Bars

  1. Open Introduction.htm. Let’s look at styles from within the content file. The structure bars to the left of the content are "tag bars" that show blocks of content.

  2. With the cursor in the XML Editor, hover your cursor over the h1 structure bar. Notice it shows an <h1> tag which corresponds to the h1 heading to the right.

    Note To show or hide tag bars, click at the bottom of the XML Editor.

  3. Let's edit the h1 heading. It might look better without the 20px indentation. We can take action from the structure bars directly. Right-click the h1 tag bar.

  4. From the context menu, select Style Class > Edit Style Class. The Styles.css file opens in the Advanced view.
  5. In the left pane tree structure, ensure the h1 style has focus (if not, select it).
  6. From the local toolbar Show drop-down, select Show: Set (Locally) Properties – properties set in this stylesheet.

  7. Expand the Box group. In the margin-left field, change the value to 0px, and press ENTER.

  8. Click Save the active file. to save your work.

  9. Go back to the Introduction.htm topic, and view the heading update.

  10. Open Austin-City-Limits.htm. Let’s apply a different style to the last heading.

  11. Place your cursor anywhere in the “Venue” heading.

  12. From the Home ribbon, select the Style drop-down, and choose h3. This is a quick way to apply a style to content.

    Note Notice the styles available in the Style drop-down are valid for block-level (e.g., h3, p, div) content only. If we were looking to apply a style to character-level (e.g., span, b) content, we would have to select the appropriate text within the block (e.g., heading, paragraph) first, and the styles in the drop-down would correspond to its type.

  13. Click Save the active file. to save your work.

Span Bars

  1. Open Introduction.htm.

  2. Under the "Climate" heading, place your cursor within the bold phrase “long and hot summers.” Notice the tag at the top part of the topic. This is a “span bar.” These bars show formatting tags at the character level.

    Note To show or hide span bars, click Show Spans button at the bottom of the XML Editor.

  3. Hover your cursor over the span bar at the top. The phrase's style is <span> class: Emphasis.

  4. Right-click the span tag, and select Unbind. The style is removed from the text.

  5. Re-select the text “long and hot summers.”

  6. From the Home ribbon, select Style Window. The Styles window pane opens to show you styles that are valid for character-level content.

    Note In the previous steps we selected styles from the Home > Style drop-down. You can also apply styles from the Floating Style Picker by pressing CTRL+SHIFT+H. As you can see, there are multiple ways to apply a style.

  7. From the Available Styles section, select span.Emphasis. The content changes back to its original state.

  8. Click Save the active file. to save your work.

How to Identify Styles in the Text Editor

An alternative way to view topic content or tags is through the Internal Text Editor. The editor displays the same information—just presented in a different way. Users who know their way around XHTML and CSS code might use the Text Editor more frequently.

  1. Open Introduction.htm.

  2. At the bottom of the topic, select the Text Editor tab.

  3. From the local toolbar, click . By toggling the syntax colors off and on, it is easier to pinpoint how HTML and XHTML elements work hand in hand with CSS elements.

  4. Notice how the <span> class: Emphasis style is written in true code.

  5. Select the XML Editor tab at the bottom to go back to the other view.

How to Edit a CSS File in the Text Editor

The following steps introduce you to editing styles using the Text Editor. A full understanding of CSS code is in no way a requirement for using Flare Desktop, but it is helpful to know styles can be edited this way. More advanced users may find this editor useful.

  1. From the Content Explorer, right-click the Styles.css file.

  2. From the context menu, select Open with, and then select Internal Text Editor.

    All the styles and properties from the Stylesheet Editor are displayed to the right in the Text Editor.

  3. Scroll down to roughly line 210 to view the heading settings. Notice the property values reflect the updates we made in the Stylesheet Editor. (If you do not see line numbers to the left of the editor, from the local toolbar, click . This shows or hides the numbered lines.)

    Note You can conveniently search for items in the Text Editor. For the step above, from the Home ribbon, select Quick Find. You can type /* Headings */. You might have to click through a few results until you find the one you want.

  4. Let's change the font-family property for the h1 and h2 elements.
    1. Under h1, locate the font-family property, and type Arial.

    2. Under h2, locate the font-family property, and type Arial.

  5. Click Save all files. to save all files.

  6. Open the Introduction.htm topic (or any topic) to view the updated headings.
  7. From the Window ribbon, select Close All Documents.