HTML5 Skin Styles

There are many ways to style your HTML5 skin, whether it be a Side Navigation, Top Navigation, or Tripane skin, or one of the skin components. In addition, if you enable the skin to produce responsive output—meaning that the look of the output can automatically adjust depending on the size of the end user's device—there are some additional features for making the output look the way you want in those circumstances. See Responsive Web Design and Responsive Skins.

Mediums

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.

  • Web When you first open an HTML5 skin, Web Medium is selected. With that medium chosen, any changes you make to the styles are applied to that medium. This means that when users are viewing your output on a regular browser, that's the look they will see.
  • Tablet If you want to change the look that users see when viewing your output on a tablet, select Tablet Medium and make your style changes.
  • Mobile If you want to change the look that users see when viewing your output on a mobile device, select Mobile Medium and make your style changes.

Similar to cascading stylesheets (CSS), there is a system of inheritance at work with skin mediums. The Web medium is the default. Most settings in that medium are inherited by the Tablet medium. In turn, settings in the Tablet medium are inherited by the Mobile medium. Therefore, if you want all of the mediums to share the same look (e.g., your company logo), you can set it once in the Web medium and it will automatically be used in all three. If you make any changes in the Tablet medium, those settings will override whatever had been inherited from the Web medium. Likewise, you can make changes in the Mobile medium, which will override any settings inherited from the Tablet medium.

Note An exception to this inheritance is with navigation icon images. Because these icon images are often different sizes in the Web medium than in the other mediums, most navigation icon images do not pass down from the Web medium to the Tablet medium. However, the Tablet medium does inherit the icon image used for the "Mark as New" feature from the Web medium. Also, icon images are passed down from the Tablet medium to the Mobile medium.

Note Within each medium, the icons under the TOC Entry style inherit from the icon settings in the Navigation Panel > TOC. Therefore, if no icons are set in the TOC Entry style classes in the Web medium, Flare will use the Navigation Panel > TOC icons in that medium. The same holds true for the Tablet medium; if no icons are set in the TOC Entry classes in the Tablet medium, they will be inherited from the Navigation Panel > TOC icons in the Tablet medium. And the same is the case with the Mobile medium.

Enabling Responsive Output

Enabling responsive output for HTML5 Tripane skins can be accomplished by clicking a check box in the Setup tab. You do not need to enable responsive output for Side Navigation, Top Navigation, or skinless output, because it is always enabled in those cases. However, you can adjust settings in the Target Editor. See Responsive Web Design.

  1. Open an HTML5 Tripane skin and select the Setup tab.
  2. In the Responsive Output Settings section, select Enable responsive output.
  3. (Optional) Responsive output works by automatically changing the display once the viewer reaches a certain width. You can change the maximum width at which the display changes from one medium to the next. Use the following to specify responsive settings for a skin. For more information about making topic content responsive, see Responsive Content.
    • Tablet Max-Width Enter the number of pixels for the maximum width of a Tablet view.
    • Mobile Max-Width Enter the number of pixels for the maximum width of a Mobile view.

    Example You keep the default settings of 1279 pixels for the Tablet maximum width and 767 pixels for the Mobile maximum width.

    If you generate output and view it in a regular browser with the window maximized, you will see the skin style settings for the Web medium.

    You then click and drag the browser window to reduce it. Once the width of the browser window reaches 1279 pixels of width, the display changes to show the skin style settings associated with the Tablet medium.

    You continue to reduce the size of the browser window. Once the width reaches 767 pixels, the display changes to show the settings for the Mobile medium.

    Therefore, the Web medium is named as it is because the largest size is usually meant for a regular web browser. The next size down is often used for tablets, such as iPads, so that medium is called "Tablet." And the smallest size is controlled by the Mobile medium, because a display that small is usually seen in mobile phones.

  4. Click to save your work.

Interactive Live Preview

The preview area in the Styles tab of the HTML5 Skin Editor is more than just a static image. You can click in the preview to move around and open different areas.

If you click Highlight in the local toolbar, the mode changes. As a result, different areas of the preview area become highlighted as you move the mouse over them. And when you click on an area, the corresponding style on the left is also selected. This makes it easier to know what styles you need to change in order to affect that part of the skin. The reverse is also true; as you click on styles, the corresponding area in the preview comes into focus if it is visible in the preview area.

After you make style changes, the preview changes accordingly.

You can also click the full preview option in the local toolbar of the Skin Editor (see Previewing the Skin for a Specific Output Type).

This full preview respects the responsive output setting in the skin. If you have responsive output enabled, the preview is also responsive. If you have the responsive output disabled, the preview is static.

Style Sections and Root/Child Properties

When you open the Skin Editor to make changes to skin styles, you will see the styles organized in different sections.

Within these sections are the different styles you can adjust. You can expand any of these styles to see the properties within it that can be changed.

You may see two kinds of properties under a style—root and children.

Root properties are at the first level. If you make changes to a root style, all of the children styles below inherit those changes. So if you want all of the children to have the same setting, it's best to make your modifications to the root properties. The easiest way to tell the difference between root and children styles is by looking at the expand/collapse icons next to them; root styles have a white triangle icon, whereas children styles have a blue triangle icon.

Example You have a Tripane skin and want to change the background color of all of your navigation panels from black to dark red in the Web medium. First, in the Navigation section, you expand the Navigation Panel style. Under this style, you see three root property nodes—Background, Padding, and Border. Under these root nodes are five child nodes that represent each of the five kinds of panels you can include in your output—Browse Sequences, Community, Glossary, Index, TOC. (In the Tablet and Mobile mediums you would see Browse Sequences, Glossary, Index, Search Filters, and TOC.)

Because you want each of those five panels to have the same color, you expand the root Background node. There are a few different fields that can control the background color. There are Gradient fields that let you add an effect where the progresses from one to another in the panel. There is a Color field, which lets you add a color without a gradient. And then there is an Image field, which lets you select an image to display in the background. The Image field has the highest precedence, which means that if you enter settings in all of the Background fields, the image will win. Gradient has the next highest precedence. If you want to use the Color field, you need to make sure the Gradient fields are set to transparent and that there is no image selected.

Let's say you use the Color field to choose a dark red color.

Regardless of the panel you select, it is red.

If you expand a child node, you will see the same properties that you see above in the root node.

If you make changes to child properties, those settings override anything inherited from the root, and they pertain only to that child.

Example You have set the root Background property to show the navigation panel in dark red, as described in the previous example.

If you want the Glossary panel to show in green instead, you can expand the Glossary node, and then expand the Background property within it.

In the Color field, you select a green color.

As a result, the Glossary pane is green.

But all of the other panes remain red.

Default Values in Gray

When making changes to skin styles in HTML5 skins, you may notice that some fields display text or numbers in gray. This is the default value for that particular field. If you enter a different value, the font displays in a darker font.

Medium-Specific Styles

Responsive output lets you place settings on styles using any of the three mediums—Web, Tablet, and Mobile. However, not all styles and properties are necessarily pertinent to all mediums. That's why only see some styles and properties when you have a particular medium selected and not another.

Example You have a Top Navigation skin and want to change the slide out button that you see when the output is shown in a tablet or mobile phone size.

When you select either the Tablet or Mobile Medium, you can see and adjust the Navigation Slide Out Button.

But when you select the Web medium, this style is not available because it isn't used in larger web browser views of the output.

Activities for HTML5 Skins and Components

You might perform the following style activities if you are working in an HTML5 skin or a skin component.

Global—All HTML5 Skins

This section contains the Main Page style for Side Navigation, Top Navigation, and Tripane skins. See Main Page in HTML5 Skins.

Side and Top Side Navigation Skins

For Side and Top Navigation skins, you can control the padding and maximum width for the page.

Tripane Skins

For Tripane skins, you can control the font and background color for the page.

Header—All HTML5 Skins

This is the area at the top of the screen for Side Navigation, Top Navigation, and Tripane skins. See Headers in HTML5 Skins.

Side Navigation Skins

For Side Navigation skins, this area displays a logo, search bar, and Central account link (if you are producing private output).

Top Navigation Skins

For Top Navigation skins, this area displays a logo, the search bar, top menu, and Central account link (if you are producing private output).

Tripane Skins

For Tripane skins, this area displays a logo, search bar, and Central account link (if you are producing private output).

Note If you want to style items for search results, you can use the Search section in the Skin Editor. Alternatively, you can use the Search Results skin component, which works with a Search Results proxy.

Note The Tripane skin you are using applies a theme to the header and search bar. Tripane Light uses a light gray header and search bar; Tripane uses a dark gray header and search bar. See Skins.

Central Account Link Skin Component

One of the tasks that the Header area in Side Navigation, Top Navigation, and Tripane skins lets you perform is modifying the look of the Central account link that is used for private outputs. Alternatively, you can use a Central Account Link proxy to add the link some place other than the header, and you can use a Central Account Link skin component to control the look for it. See Private Outputs on MadCap Central.

The options in the skin component are the same as the Central account link options in the Side Navigation, Top Navigation, and Tripane skins.

Search Bar Skin Component

One of the tasks that the Header area in Side Navigation, Top Navigation, and Tripane skins lets you perform is modifying the look of the search bar at the top of pages. Alternatively, you can use a Search Bar proxy to add a custom search bar elsewhere, and you can use a Search Bar skin component to control the look for it. See Creating a Search Bar.

The options in the skin component are the same as the search bar options in the Side Navigation, Top Navigation, and Tripane skins.

The Search Results skin component is not available if you are generating Tripane output. It is only available when you are producing Side Navigation, Top Navigation, or skinless output.

Menu—Side/Top Navigation Skins, Menu Skin Components

You can control the look of the menu that is included with a Side or Top Navigation skin, as well as additional menus that you add through the Menu proxy. See Menus in HTML5 Skins.

Side Navigation Skins

For Side Navigation skins, the Side Navigation section is used to control the look of the menu that is displayed on the left or right side of topics.

In the Side Navigation section, you can specify settings for the entire menu and submenu areas. In the “Menu Item” sections, you can specify settings for the individual items within menus and submenus.

If you place settings on the properties under the first node—e.g., Side Navigation Menu, Side Navigation Menu Item, Side Navigation Menu Item (hover)—they are applied to the root (top) level of the menu, which is the same as the first-level items in your TOC file.

If you place settings on the properties under the second node—1st Level—they are applied to the first submenu under the top menu, which is the second-level items in your TOC file. Therefore, the 2nd Level is the same as the third-level items in your TOC file, the 3rd Level is the same as the fourth-level items in your TOC file, and the 4th Level is the same as the fifth-level items in your TOC file.

If you place settings on the properties under the second node—1st Level—the 2nd, 3rd, and 4th Levels inherit them. If you set values under the 2nd Level, the 3rd and 4th Levels inherit them, and so on.

Top Navigation Skins

For Top Navigation skins, the Top Navigation section is used to control the look of the menu that is displayed at the top of topics.

In the Top Navigation section, you can specify settings for the entire menu and submenu areas. In the “Menu Item” sections, you can specify settings for the individual items within menus and submenus.

If you place settings on the properties under the first node—e.g., Top Navigation, Top Navigation Item, or Top Navigation Item (hover)—they are applied to the root (top) level of the menu, which is the same as the first-level items in your TOC file.

If you place settings on the properties under the second node—1st Level—they are applied to the first submenu under the top menu, which is the second-level items in your TOC file. Therefore, the 2nd Level is the same as the third-level items in your TOC file, the 3rd Level is the same as the fourth-level items in your TOC file, and the 4th Level is the same as the fifth-level items in your TOC file.

If you place settings on the properties under the second node—1st Level—the 2nd, 3rd, and 4th Levels inherit them. If you set values under the 2nd Level, the 3rd and 4th Levels inherit them, and so on.

Menu Skin Components

A Menu skin component can work in tandem with a Menu proxy that you insert into a topic or master page. This feature is most useful in Top Navigation and skinless outputs. See Creating a Topic Menu.

The styles for a Menu skin component are quite similar to those for the full Top Navigation skin. However, there are some differences and some options that are unique to each.

The primary thing to remember about a Menu component is that it can be context-sensitive, meaning it refers only to the topic that is open and, depending on your settings, the parent, sibling, and child items from the TOC as well. On the other hand, the menu styles in the full Top Navigation skin are always concerned with your TOC file structure as a whole.

That being said, the menu item style levels in a Menu component can mean something different than they do for the full Top Navigation skin.

When you set values directly under the Menu Item or Menu Item (hover) node, you are controlling the look for the menu items that are at the top level of the menu. If you insert a context-sensitive Menu proxy that includes the parent, the root Menu Item style refers to the parent topic.

If you don't include the parent, but you do include the siblings, the root Menu Item style refers to those sibling topics in the TOC.

The 1st Level style refers to the first level under the root, followed by 2nd Level, 3rd Level, and 4th Level. The same kind of inheritance used for menu items in the full Top Navigation skin is used for a Menu component.

There is also a style called "Selected" for Menu components. This lets you apply a unique look to the menu item that refers to the topic that is currently open.

Navigation—All HTML5 Skins

For Side Navigation, Top Navigation, and Tripane skins, this section is used to control the look of navigation elements, which allow users to open different parts of your output. See Navigation in HTML5 Skins.

Side and Top Navigation Skins

For Side and Top Navigation skins, this section is used to control the look of the side flyout navigation pane when being displayed on a tablet or mobile device. Therefore, it is not shown if you are working in Web Medium view in the Skin Editor, but rather only in the Tablet and Mobile mediums.

Tripane Skins

For Tripane skins, this section is available in all three mediums, although there are different options available for the Tablet and Mobile mediums.

Topic—Tripane Skins

For Tripane skins, this section is used to control the look of the topic area of the output. This includes the container holding the topic content. It also includes the toolbar just above the topic content. See Topics in HTML5 Skins.

Search Results—All HTML5 Skins, Search Results Components

You can use a Side Navigation, Top Navigation, or Tripane skin to change the appearance of search result items. You can also do this with a smaller Search Results skin component. See Search Results in HTML5 Skins.

Side and Top Navigation Skins

For Side and Top Navigation skins, you can control the look of search result elements such as the heading, abstract (i.e., descriptive text of the file), links, glossary terms, micro content, and pagination. Search highlighting is controlled in your regular stylesheet by modifying special classes under the span style. See Search Highlighting and Customizing the Highlight Color for Search Hits.

Tripane Skins

For Tripane skins, you can control the look of search result elements such as the heading, search highlighting, abstract (i.e., descriptive text of the file), links, glossary terms, and pagination.

Search Results Skin Components

Alternatively, you can use the Search Results skin component and its related proxy to design a custom container to display search results. See Creating Search Results.

The options in the skin component are the same as those in the Side or Top Navigation skin. Chances are good that you will never need to use a Search Results skin component, but it is available in case you want the flexibility of having another page showing search results.

The Search Results skin component is not available if you are generating Tripane output. It is only available when you are producing Side Navigation, Top Navigation, or skinless output.

Note If you want to style the search bar and its elements, you can use the Header section in the Skin Editor, or you can use a Search Bar skin component.

Feedback—Tripane Skins

For Tripane skins, these are styles for elements that are displayed if you integrate your output with MadCap Feedback. See Feedback in HTML5 Skins.

Topic Toolbar Skin Components

In Topic Toolbar skin components, you can use skin styles used to control the look of a toolbar you add via a proxy. See Topic Toolbars in HTML5 Skin Components and Inserting and Editing a Topic Toolbar Proxy.

What’s Noteworthy?

Note If you want to change labels for some of these styles, or if you want to display the output user interface in a particular language, you can use the UI Text tab in the Skin Editor. See Changing Text Strings in HTML5 Skins.