Users have asked if there is a way to style a condition so that it appears a certain way in Flare’s outputs.  Here is a little trick to accomplish just that.

The first step is to make sure that you have a condition applied to an element in your topic.  In this sample, we’ll use the “Default” Conditonal File Set and the PrintOnly Condition in it. Then follow these steps:

  1. Create an “Empty” Flare Project (Using the Empty Template Provided)
  2. Choose WebHelp as the output type
  3. Open the only topic in the editor
  4. Select the text or paragraph that you want to apply the Conditional Tag to.
  5. Go to Format > Condtions… and select “PrintOnly”
  6. Click “Ok” and save
  7.  In the Content Explorer, Open the Stylesheets folder
  8. Right-click on the Styles.css and open with Notepad
  9. Copy the CSS code from below and paste it at the end of the stylesheet
  10. Save and close Notepad
  11. Build the WebHelp output and view the results. You should see the text or paragraph that you selected with a grey background.

CSS code:

For WebHelp:

[MadCap\:conditions*="Default.PrintOnly"]
     {
          background-color: #C0C0C0;
     }

For HTML5 Output:

[data-mc-conditions*="Default.PrintOnly"]
     {
          background-color: #C0C0C0;
     }

For both outputs:

[MadCap\:conditions*="Default.PrintOnly"], [data-mc-conditions*="Default.PrintOnly"]
     {
          background-color: #C0C0C0;
     }

Remember, if you apply this to a condition that is set to be removed in the Target, it will not appear at all in the output.

Note: The CSS to achieve this is not yet supported in our internal CSS editor, so if you want to make a change, edit, or create a more, you will have to use notepad or another CSS editor.

About The Author

Jose Sermeno

About Jose Sermeno

With over 10 years of experience in the software industry, Mr. Sermeno brings a wealth of knowledge and expertise to the product evangelist team, helping introduce new users to everything MadCap Software. In his spare time, Jose is the Project Director for San Diego City Robotics, the San Diego community college systems robotics program, and enjoys working in software design and open source hardware development. Prior to joining MadCap in late 2010, Jose ran a Drupal development shop, and was an application manager for Temple University Health System.

Last Modified: June 5, 2012

This entry was posted in MadCap Flare, Tech Comm, Tips & Tricks. Bookmark the permalink.

Comments

  • Ginny R December 20, 2011 at 2:11 PM

    Great tip!! Any way to do the reverse? Add a condition setting to a style? Several of my styles are for screenonly paragraphs. It would be great if the condition got set automatically when I applied the style. Something like:
    p.screenlinks
    {
    madcap_conditions: “Default.ScreenOnly”;
    }

  • owen August 14, 2013 at 8:37 AM

    thanks, we have been using this awesome hack with webhelp for some time. just tested it with html5 output, but no dice. have you dreamed up a similar fudge for html5 output? would also be great if you had a pdf friendly version :)

    thanks
    owen

  • owen August 14, 2013 at 8:38 AM

    duh. on second reading, you already answered my question. you simply rock.

  • fowlesp May 7, 2014 at 7:46 AM

    This is a great tip

    Is there a way to apply conditions to print output. For example adding a background image when a “Draft” condition is set?

  • Chris April 22, 2016 at 7:04 AM

    Its been a while since this post but would love to know how to make this work with PDF outputs.

    I tried both code examples in my CSS but no impact.

    Any suggestions?

    • Jennifer Morse Jennifer Morse April 27, 2016 at 2:49 PM

      Hi Chris! Thanks for your comment. After some testing, we discovered that there isn’t a way to preserve this in PDF. We have submitted this to R&D on your behalf, I do hope we can support it soon.

  • Laurie Little November 2, 2016 at 1:05 PM

    Hi, I don’t remember where I found the “add-on” to your fix that can work with Word output, but I have added the following to my print media section in my CSS:
    MadCap|conditionalText
    {
    background-color: #f8fc7e;
    }
    This works great, except that it is applied to all conditional text – I want it to just apply to my “Comment” condition (the one I use for SME questions). Is there a way to specify just that condition in the css? I’m not a CSS wizard, so I apologize if this is elementary!

    • Rachel Kim Rachel Kim November 3, 2016 at 1:00 PM

      Hello Laurie,

      Thanks for your comment! It seems it currently isn’t supported to declare a specific conditional tag to be styled by Flare. However, we’ve submitted this as a feature request and you’ll receive an email if it’s include in a future release.

      Thanks!
      Rachel

Have Something to Say?

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