Simplified View of the Stylesheet Editor

You can use this field to filter which types of styles to show in the area below.

• All Styles This lists all of the styles in the Stylesheet Editor.

• Autonumbered Styles These are styles to which an autonumber format has been applied. See Autonumbers.

  Example You might select the h1 style and modify its mc-autonumber-format property, choosing a format such as {n+}. If you then select Auto-numbered Styles from this drop-down in the Stylesheet Editor, the h1 style will be listed.

• Topic Styles This lists the html style and its classes, which are used to affect entire topics. You might associate a style class with a topic if you are generating DITA output and need to specify a topic type such as "task" or "reference" on it. See Setting the HTML Style for Topics.

• Paragraph Styles These are styles applied to an entire paragraph.

  Example You might select a style class called "p.Body" that you have created and modify its font-size property to enlarge the body text in your topics.

• Footnote Styles These are styles that are applied to footnotes inserted into content. Footnotes are commonly used if you are producing print-based output. The MadCap|footnotesBlock style affects the area that holds a collection of footnotes. See Footnotes and Endnotes.

  Example You might select the MadCap|footnote style and modify its mc-footnote-number property in order to restart the numbering for footnotes at each chapter (as opposed to each book, page, or section). You might select the MadCap|footnotesBlock style and modify its border property in order to add a border above the footnote area on the page.

• Heading Styles These are styles that are applied to content intended to serve as headings above sections of content.

  Example You might select the h2 style and modify its font-family property in order to display second-level headings in an Arial font.

• Character Styles These are styles that are applied to selected text within a paragraph, rather than the entire paragraph.

  Example You might select the span style and create a class under it named "code" (span.code). Then you might set its font-family property to Courier New in order to display text that represents programming code.

• Table Styles These are styles that are applied to tables and the content within them. See Editing Table Styles in Regular Stylesheets.

  Example You might select the th style and modify its color property in order to display the table header row text in green.

  Note These styles are not to be confused with the separate special table stylesheets that you can create. However, you can use both table stylesheets and these standard table styles from a regular stylesheet in order to design the look of your tables and their content.

  Warning When controlling the look of tables, be aware of conflicts that can arise when you are using standard table styles (e.g., tr, td) from a regular stylesheet and you are also inserting proxies in the project. For example, if you set the text-indent property on the td style, it could affect the indentation of a generated table of contents or mini-toc.

• List Styles These are styles applied to bulleted or numbered lists. See Lists.

  Example You might select the ul style and create a class under it named "indented." Then you might set its margin-left property to 15px so that bulleted lists using that style are indented 15 pixels from the left edge.

• Link Styles These are styles that are applied to content that contains a link, such as a cross-reference or a related topics link. See Links.

  Example You might select the MadCap|xref style and modify its mc-format property to change the text displayed in cross-references (e.g., "see page…").

• Image Styles These are styles applied to images and objects that you inserted into topics. See Images.

  Example You might create a class under the img style, name it "Thumbnail" (img.Thumbnail), and modify its mc-thumbnail property. This lets you specify that images using that tag should be shown as small thumbnails until the end user either clicks or hovers over the thumbnail to see the large version.

• Dynamic Effects Styles These are styles that are applied to content used in Dynamic HTML effects, such as drop-down text or popups.

  Example You might select the MadCap|dropDown style and modify its mc-open-image and mc-closed-image properties in order to change or remove the image, such as an arrow, displayed next to drop-down effects.

• Reusable Content Styles These are styles that are applied to reusable content, such as snippets, variables, or proxies.

  Example You might select the MadCap|breadcrumbsProxy style and modify its border-bottom property. This lets you set the color and width of the bottom border for the "You are here" breadcrumbs feature that can be displayed at the top of topics.

• Generated Content Styles These are styles that are applied to content that is created when you generate output, such as glossaries, indexes, or tables of contents (TOCs).

  Example You might select the TOC1 class under the p style (p.TOC1) and modify its mc-leader-format property. This lets you set the leader format, such as dots, to be displayed after the first-level headings in the generated TOC for print-based output.

• Controls/Form Styles These are styles that are applied to content within controls, such as buttons, or forms.

  Example You might select the form style and modify its text-align property in order to center a form that you add in a topic.

Hides the inherited styles from the list below in the editor. These are styles that do not yet have explicit settings on them, so they are inheriting default values from a stylesheet located elsewhere (e.g., a factory stylesheet stored in the place where you installed Flare Desktop). As soon as you make a change to one of these styles, it ceases to be an inherited style (or at least the property you set is no longer inheriting from the default value). In the Advanced view of the Stylesheet Editor, inherited styles are gray; non-inherited styles are black. In addition, there are a couple of factory media queries (tablet and mobile), which are inherited. If you have not yet edited these media queries, they will not show up in the Medium drop-down field in the local toolbar if you have this option set to hide inherited.

Hides the properties in the main portion of the Stylesheet Editor. By hiding the properties you can make the editor load faster than it would otherwise.

You can use this field to select a medium or media query, which opens it in the editor so you can edit it. This includes factory mediums and media queries, as well as those that you may have created. If you have "Hide Inherited" enabled, the factory mediums and media queries will not show up in the drop-down if you have not yet made any edits to them. In the Advanced view of the editor, you can have multiple mediums or media queries open at the same time.The default medium is always placed on the left of the others. See Mediums and Media Queries.

Opens the Properties dialog for the selected style. From this dialog, you can provide various settings for the style(s), such as changing the font or the background color.

Applies bold typeface to the font for the selected style.

Applies italic typeface to the font for the selected style.

Underlines the font for the selected style.

Lets you select a font type (e.g., Arial, Times New Roman), applying it to the selected style.

Lets you select a font size, applying it to the selected style.

Lets you choose and apply a color to the font for the selected style.

Lets you choose and apply a color to the background of the selected style.