Attributes Window Pane

Attributes let you provide additional information about tagged content and how that content should behave. An attribute is typically a combination of a name and value, and is placed in the starting HTML tag. Following is the basic syntax.

Copy

<element attribute="value">add content here</element>

Example Following is an href attribute, which is used for links. The value for this attribute is the MadCap Software website URL.

Copy

<a href="https://www.madcapsoftware.com">Click here to open the MadCap Software website.</a>

Example Following is a style attribute, which is used for the design of the content. This particular attribute has values set for the color and font-style.

Copy

<span style="color: #0000ff; font-style: italic;">

The Attributes window pane provides a way to add attributes and events to content without having to open the Text Editor or use another part of the interface. After selecting content in the XML Editor, you can enter the attribute or event value in the window pane.

Example You have a generic class in your stylesheet called .blue, which applies that color to any content. After clicking on a paragraph in a topic, you can enter blue next to class in the Attributes window pane.

This has the same effect as if you had used, say, the Styles window pane to apply the class to the paragraph.

[Menu Proxy — Headings — Online — Depth3 ]

How to Open This Window Pane

Do one of the following, depending on the part of the user interface you are using:

Ribbon Select Home > Attributes Window.
Keyboard Shortcut Press SHIFT+F12.

Buttons and Sections

Option	Description
[Tag]	Displays the tag (e.g., <h1>, <p>, <td>) that is applied to the content where the cursor is currently placed. The changes that you make in the Attributes window pane will be applied to that tagged content in that topic.
	Displays all of the attributes in the window pane.
	Displays only the attributes provided by Flare. Your custom attributes are not displayed.
	Displays only the custom attributes that you create. Attributes provided by Flare are not displayed.
	Opens the Enter Custom Attribute dialog, which lets you create a new attribute and provide a value for it.
	Selects the content of the parent tag each time you click this button. Example You have applied bold to a word in your topic. If the cursor is located on that word and you click this button, the content in the parent tag (e.g., <p>) will be selected. If you click the button yet again, the content in the <body> tag will be highlighted. And if you click the button once more, the content in the <html> tag will be selected.
[Attribute]	The left column in the window pane displays the attributes or events applicable to the tag where your cursor is placed. class In CSS there are primary styles that correspond to the different HTML elements (e.g., h1, h2, p, img). You can think of these as parent styles, because in a way, they can have children. A class is the most common type of child for a style. Some classes might already be included in your stylesheet when you first create a project. See Classes. dir This indicates whether content should be displayed left-to-right (ltr) or right-to-left (rtl). id In CSS, an identifier (ID) is similar to a class, except that IDs are unique. An element in your stylesheet can have only one ID on it, whereas it can have multiple classes. And each page of your output can have only one element with a particular ID. For many authors, using an ID may not be important, but for others—such as those making use of JavaScript—IDs can be very useful. See Identifiers. lang This indicates the language for content (e.g., English = en, French = fr). onclick (and other events) All of the elements that you see starting with the characters "on" are events, which let you specify actions that should take place when certain activity occurs (e.g., onclick = when the content is clicked, ondbclick = when the content is double-clicked). You can learn more about each of these events from here: Copy `https://www.w3schools.com/jsref/dom_obj_event.asp` style This indicates the styling applied to content inline (or locally). For example, when you use the Color button on the Home ribbon to apply a color to text, a style attribute with that color is added inline to that content. It is highly recommended that you use global styles instead of setting style attributes locally. title This specifies extra information about content (e.g., can be used as tooltip text when the mouse moves over the content).
[Value]	Use the right column in the window pane to set the value for the attribute in the left column. In the case of attributes such as the class and ID, you can simply enter the name of that class or ID that exists in your stylesheet. In the case of direction, you can select ltr or rtl from a drop-down. In the case of a language, simply enter the code for the language. For details, see: Copy `https://www.w3schools.com/tags/ref_language_codes.asp` In the case of events, you can enter a function, such as the following: Copy `window.open("http://www.madcapsoftware.com");` This particular function opens the MadCap Software website when the event takes place. In the case of style, the value could be written like the following: color: #bed420; In the case of the title, enter the text that you would like to be used for the associated content (i.e., the tooltip text).