Single-Sourcing Micro Content Using Styles

Example You have a topic with a set of steps that looks like this, with the list being used as micro content:

When viewed as a full topic in HTML5 output, you want the topic to look almost exactly like this. The only exception is that the second note under step 2 should not be displayed.

However, when a user searches for "Procedure 1," you want the steps in the micro content to look a little different. First, you want there to be less space between the list items. Second, you want the first comment to be hidden, while the second comment is shown.

In your main stylesheet, you set the following. The first two generic style classes provide a way to indicate which content should be shown in which form of output. And the other selectors provide the spacing between the items in lists.

.topic-only
{
    
}

.micro-content-only
{
    display: none;
}

li,
li p
{
    margin-bottom: 24px;
    margin-top: 24px;
}

You then add a second stylesheet. Its only purpose is to specify areas where content should look different when viewed as micro content.

In the second stylesheet, you set the following. Notice that the settings for the generic style classes are the opposite (hiding "topic-only" content and displaying "micro-content-only" content), and the margin settings for list items are much lower.

.topic-only
{
    display: none;
}

.micro-content-only
{
    display: block;
}

li,
li p
{
    margin-bottom: 3px;
    margin-top: 3px;
}

In the topic, you apply the topic-only class to the first comment and the micro-content-only class to the second comment.

But you're not done yet. You need to make sure the correct stylesheets are used for each circumstance. First, because your main stylesheet is set at the project level, you open the Project Properties dialog (Project > Project Properties). In this dialog, you make sure that Allow local stylesheets is enabled.

Next, you open the Properties dialog for your micro content file.

On the Stylesheet Links tab of that dialog, you move your special micro content stylesheet to the right side, which means that the responses in that micro content file will give priority to the style settings in that stylesheet. You leave the check box at the bottom disabled, because you still want to use other styles from your main stylesheet as well.

Then you build and publish the HTML5 output.

If users view the full topic in the output, it looks like this. Notice the wider spacing, and the fact that only one comment is shown under step 2.

But if they view the micro content in the search results, it looks like this. Notice the list items are closer together, and only the second comment is shown under step 2.

It's the same content, originating from the same place, but it displays differently depending on the situation.

Example All of your style settings are contained in a primary stylesheet set at the project level. At some point, you add a micro content file to your project, and you want the micro content responses to use almost all of the same style settings from that project stylesheet. The only exceptions are the h2 headings and paragraphs, where you want the font size to be slightly smaller.

Therefore, you create a separate stylesheet for your micro content, and in it you provide the smaller text sizes for the "h2" and "p" styles. You don't need to provide any other settings.

In your output, the micro content will continue to use all of styles from the project-level stylesheet, including various settings for the h2 headings and paragraphs. The only difference is that the font sizes of those headings and paragraphs will be smaller, using the settings from the micro content stylesheet and ignoring the settings from the project stylesheet.

Example You have three stylesheets in your project. Two of them are local stylesheets—one at the micro content level and the other at the topic level (for some topics). The third one is a primary stylesheet that is set at the project level. (This example does not include a branding stylesheet.)

• In the micro content stylesheet, you specify that paragraph text should be red.
• In the topic stylesheet, you specify that the paragraph text should be blue.
• In the project stylesheet, you specify that the paragraph text should be black.

What is the result in the output?

• In the micro content search results, the paragraph text will be red, overriding the other colors.
• In a full topic that is associated with the topic stylesheet, the paragraph text will be blue, because it is not being viewed as micro content and it has precedence over the project stylesheet.
• In full topics that are not associated with the topic stylesheet, the text will be black, because it is not being viewed as micro content.