Editing Skin Settings
After you add a skin or a skin component to your project, you can open it and edit its settings in the Skin Editor to meet your needs. The skin settings help determine the look and feel of your output window when you build a target.
There are various skin editing tasks for the different online output types in Flare. The primary tasks that you can perform are listed below.
[Menu Proxy — Headings — Online — Depth3 ]
Skin Activities
Some activities are used for some outputs but not for others.
Feature |
Description |
---|---|
About Box (Standard Skins) |
You can select an image to be used for the "About box" in the output window. You can use this About box for any purpose you like. |
Accordion Title—Exclude (Standard Skins) |
You can exclude the accordion title from output. This shifts the navigation buttons to the left. |
Browser Settings (HTML5 Tripane and Standard Skins) |
You can specify which features will be used in the output window when a browser is involved. |
Buttons (HTML5 Tripane Skins) |
You can specify web toolbar settings for some online outputs. This includes determining which buttons are displayed in the web toolbar. You can also add custom JavaScript for the toolbar. |
Buttons (Standard Skins) |
You can select the Help buttons that you would like to include in the output window (e.g., Hide, Forward, Back, Print, customized buttons). |
Caption (HTML5 Tripane and Standard Skins) |
You can enter the caption that you want to be used at the top of your online Help window (e.g., in the title bar of the browser window or HTML Help viewer). |
Central Account Link (HTML5 Skins) |
You can produce private output that requires a user to log in with an email and Central password. Without credentials, people cannot see the output. It is possible to set private output for all output types supported by Central. Also, accessing private output is not limited to people in your company. Central has a free viewer user type that you can use to add any of your customers to your Central license, and then give them access to live private output. After users log in to see private output, an account link displays in the output interface for HTML5 targets (not for other output types). If the output is not set to private, this link is not shown. When users hover over the link, a menu shows two options. You can change the look of this account link in an HTML5 skin. |
Feedback Comments (HTML5 Tripane and Standard Skins) |
Users can enter comments on your online output. These comments may be viewed (and replied to) by all other users viewing the output. Comments are shown at the bottom of topics by default. However, you can disable them if you like. See Displaying Comments at the End of Topics for Feedback. |
Feedback Email Notifications (HTML5 Tripane and Standard Skins) |
You can specify in a skin whether end users can see, and therefore select, various email notification options when submitting a comment for the first time or editing their profile. See Displaying Feedback Notification Options to Users. |
Feedback Profile Fields (HTML5 Tripane and Standard Skins) |
When your end users attempt to submit Feedback comments in your output for the first time, they must first register by completing the Create Feedback Service Profile dialog (unless you enable anonymous comments for your output via Feedback Explorer). In your Flare skin, you can customize that Create Feedback Service Profile dialog, including which fields end users must complete and the way it looks. Two fields are always required in the Create Feedback Service Profile dialog—Username and Email. In addition to those fields, you can choose from several others to add, such as name, address, fax, department, and more. See Specifying Fields for the Create Feedback Service Profile Dialog. |
Index—Binary (Standard Skins) |
You can create a binary index for your project. Binary indexes are intended for merging multiple CHM files when you build a target. The index keywords in the CHM files are sorted alphabetically and numerically for display in the output. |
Index—Bookmarks (Standard Skins) |
If you want index term links to point to the exact spot in the topic where the index marker has been set, you need to specify this in the Skin Editor. Otherwise, the index term links will point to the topic in general. However, by pointing to the individual index markers, the index may not display the way you want if the index term points to multiple topics and you also have created a binary index. In other words, index entries pointing to multiple topics will display the index terms repeated instead of the topic title. A workaround is to deselect the binary index option in the Skin Editor. However, keep in mind that a binary index is required if you want to merge CHM files. |
Localization and UI Text (HTML5 and Standard Skins) |
As an alternative to using language skins, you can use the UI Text tab in the Skin Editor to perform all of the localization tasks for HTML5 targets. This tab not only lets you enter text in other languages, but it lets you change the substance of text strings altogether, whether they are in your primary language or another. If you are using a standard skin, you can use the Styles tab to localize skin settings. |
Mediums (HTML5 Skins) |
To support responsive output, HTML5 skins come equipped with three mediums—Web, Tablet, and Mobile. You can use these mediums to specify different looks when necessary for the different devices people might be using to view your output. See Responsive Web Design and HTML5 Skin Styles. |
Micro Content (HTML5 Skins) |
You can include micro content containers (e.g., featured snippets, Knowledge Panel) for HTML5 search results output. However, you can also use more advanced micro content proxies (e.g., FAQ, Knowledge, Promotion) and related skin components for more choices and control over your micro content. |
Navigation Link—Standalone Topics (HTML5 Tripane and Standard Skins) |
You can add a link to the top or bottom of topics in HTML5, WebHelp, or WebHelp Plus outputs. This link will not display unless the output topic is opened as a standalone (outside of the main navigation framework of the output). By clicking the link, a user can view the standalone topic in the main navigation framework. |
Navigation Pane (HTML Help) (Standard Skins) |
You can specify navigation pane settings for Microsoft HTML Help output. This includes setting the width of the navigation pane and determining whether it shown or hidden under different circumstances. The navigation pane is used to hold elements such as TOCs and indexes. |
Navigation Pane (HTML5 and WebHelp) (HTML5 and Standard Skins) |
You can specify navigation settings for HTML5, WebHelp, or WebHelp Plus output. For some of these outputs, the navigation pane is used to hold the TOC, Index, Search, Glossary, Browse Sequences, and Favorites in an accordion-type structure. For HTML5 Side and Top Navigation outputs, the navigation pane settings let you choose the main menu and slide-out position, fixed header, depth level of menu items (Top Navigation only), slide-out menu style, and a URL for a logo. |
Preview (HTML5 and Standard Skins) |
You can see how your skin settings look in each of the online output types. |
Print Medium (HTML5) |
The print medium in skin files is for styling printed pages from the generated online target (i.e., a browser function). |
Responsive Output—Enable (HTML5 Skins) |
Responsive web design (RWD) is a way to construct your HTML5 output so that the display and content are adjusted automatically depending on the device. Therefore, on tablets and mobile devices such as smart phones, users will see a condensed look and perhaps different text that is more appropriate for those devices, compared with larger monitors. You can get the same effect if you shrink your browser to a smaller size. See Responsive Skins. |
Skin ID (HTML5 Skins) |
You can assign skin IDs to your skin if you want to use a specific skin for context-sensitive Help. Skin IDs are also used to allow users to choose from multiple skins to change the display of the output.
|
Styles (HTML5 and Standard Skins) |
For certain elements of the online output window (e.g., menu, search, navigation pane, TOC or browse sequence entries, index keywords) you can determine skin style settings. The styles available depend on the type of skin. |
Tabs/Accordions/Links (HTML5 Tripane and Standard Skins) |
You can determine which navigation elements from your project (e.g., TOC, Index, Glossary, Browse Sequences) that you want users to have access to in the output. If you are creating Microsoft HTML Help output, these elements will display as tabs in the output window (except for a glossary, which is included in the TOC as a book). If you are creating HTML5 Tripane, WebHelp, or WebHelp Plus, these elements will display as accordion items in the output window. In some outputs, you can select one of the navigation elements to serve as the default in the output. This feature is not supported in HTML5 Top Navigation output. |
TOC—Binary (Standard Skins) |
You can create a binary table of contents (TOC) for your project. Binary TOCs are intended for very large compiled Microsoft HTML Help projects, reducing the amount of time it takes to load a TOC. |
TOC—Look (Standard Skins) |
You can specify the look and feel of your table of contents (TOC). This includes adding plus/minus squares next to entries, changing the book/folder icons, adding border around the TOC, and more. |
TOC—Reduce Flicker/Embed Visible TOC Entries (HTML5 Side and Top Navigation Skins) |
For frameless output (HTML5 Side or Top Navigation) you can reduce "flicker" effects that users might see when clicking in the main table of contents (TOC) navigation. This can be done by selecting the "Embed Visible TOC Entries" option on the Setup tab of the Skin Editor. When this option is enabled, the top-level (i.e., parent) TOC items are preloaded (i.e., embedded) into the output topics. Because of this, the movement (or "flicker") when opening topics is less significant. |
TOC—Synchronize (HTML5 and Standard Skins) |
You can customize your output so that users can always see where the current topic belongs in the table of contents (TOC), even if they did not access the topic via the TOC. This can be done by selecting the "Automatically Synchronize TOC" option on the Setup tab of the Skin Editor. When users navigate from topic to topic in the output, the TOC automatically changes accordingly, highlighting the topic that is open. |
Topic Toolbar Custom Settings (Standard Skins) |
In addition to the regular web toolbars that can be included in all most online outputs, you have another option for including toolbars. This option lets you insert toolbars anywhere in any topics. |
Web Toolbar—Add for HTML Help (Standard Skins) |
You can add a web toolbar that displays at the top of each topic. This toolbar is added automatically if you have enabled MadCap Feedback in the target, but you can add the toolbar manually in the Skin Editor, even if you are not using MadCap Feedback. |
Web Toolbar Custom Settings (HTML5 Tripane and Standard Skins) |
You can specify web toolbar settings for some online outputs. This includes determining which buttons are displayed in the web toolbar. You can also add custom JavaScript for the toolbar. |
Window—Size/Position (HTML5 Tripane and Standard Skins) |
You can set the size and position of the output window. The size refers to the height and width of the output window. The position refers to the distance that the output window is placed from the top, bottom, left, and right of the user's computer screen. |
Window—User-defined Size/Position (Standard Skins) |
You can let end users control the position and size of the output window by using an option on the HTML Help Setup tab of the Skin Editor. This option causes an HTML Help (CHM) file to save its window position and size after its first use. The next time, it will open at the same window position and size. |
Note If you want to display the output user interface in a particular language, you can modify styles in a language skin instead of a regular skin. As an alternative to using language skins, you can use the UI Text tab in the Skin Editor to perform all of the localization tasks for HTML5 targets. This tab not only lets you enter text in other languages, but it lets you change the substance of text strings altogether, whether they are in your primary language or another.
Note You can download a variety of free skins with different looks from the MadCap Software website.
http://madcapsoftware.com/downloads/flareskingallery.aspx
After downloading the skin, you can import it into your project.
See Importing Skins.
What’s Next?
After you have finished editing skin settings, you need to make sure the skin is associated with a target that you want to build. See Associating Skins With Targets.
If you add HTML5 skin components, you also have the option of associating them with proxies and targets.
- Creating a Central Account Link
- Adding an eLearning Toolbar Proxy
- Creating a Topic Menu
- Creating a Search Bar
- Creating Search Results
- Customizing a Results Page
- Inserting Topic Proxies (i.e., FAQ Proxy, Knowledge Proxy, Promotion Proxy)
- Inserting and Editing a Topic Toolbar Proxy
- Associating Skin Components With Targets
The Favicons skin component is the only one that is not associated with a proxy. Simply by adding and editing this type of skin component, your HTML5 output will include favicons (“favorite icons”) in the appropriate locations.