A common formatting type to make content more readable by users is formatting every other row or column in a table.  Flare currently supports this functionality using Table Style Sheets in most outputs.

Although not currently supported in the Flare Editor or Print outputs you can extend this functionality to almost any other object using CSS3’s “nth-of-type“.

In this example we will be setting the nth-of-type on every even list item in a list using complex selectors.

Every Other List Item

Do This First

  • Set up a style for the list so that not every list is affected in the project
  • Set up a complex selector for list items only if they ‘live’ in the list style that is created above

Create the Styles

To save some time, copy the code below and paste it into the CSS that you are using. This will create a unordered list style called “even” that we can use in the editor.

  • In the Content Explorer, go to the Resources Folder
  • In the Resources Folder you should see a Stylesheets Folder
  • Right-click the style sheet that you are using and open it it using the Internal Text Editor
  • Copy and Paste the code below into it.
  • Save and Close the Internal Text Editor
ul.even 
{
}

ul.even li:nth-of-type(even)
{
      background:#d0d0d0;
}

 Apply the Styles

  • Create a unordered list in the topic editor
  • Right-click the UL in the block bar
  • Apply the ‘even’ style from the UI
    Apply UL Style

The Topic Editor and Preview will not render the style but the “web” outputs will show it fine.  This is CSS3 so older browsers will not display the style either, but the content will still be displayed.

What you will see in our Topic Editor:

Topic Editor View

What you will see in our in our outputs for web:

Every Other List Item

Note: You may get a message in the Messages Pane when opening the style sheet in the Stylesheet Editor, but you can just ignore it as it will not cause any problems.

 

About The Author

Jennifer White

About Jennifer White

Jennifer White, a Product Evangelist at MadCap Software, has over 15 years of experience in writing, broadcasting, public speaking, marketing and social media management. Jennifer has also served as a social media manager, blogger, on-air host, writer and content provider for CBS Radio and Fox TV.

Last Modified: October 28, 2013

This entry was posted in MadCap Flare, Tips & Tricks and tagged , . Bookmark the permalink.

Comments

  • Sue April 30, 2014 at 2:40 PM

    I have been unable to get nth-of-type() or nth-child() to work in the PDF target (it works just fine in the webhelp target). Is it supported in print targets?

    • Jennifer White Jennifer White May 1, 2014 at 10:08 AM

      Hi Sue! This is not currently supported in print outputs, but I have put in a feature request for you.

  • Angelina July 2, 2014 at 5:38 AM

    Has the CSS3 nth-of-type support feature request been approved and implemented?

    • Jose Sermeno Jose Sermeno July 2, 2014 at 9:57 AM

      Unfortunately, not yet. Your email address is tied to the feature suggestion, so you’ll receive an email when the support is added. Thanks!

Have Something to Say?

Your email address will not be published. Required fields are marked *