Tip: Styling conditions in HTML5 help

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.
Post Reply
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Tip: Styling conditions in HTML5 help

Post by NorthEast »

I found a trick to style conditions in the HTML5 help output (note - this doesn't work for any other output type).

This might be of use to people who want to highlight things like comments in review versions of help.

For example, say you had a condition named Condition.Comment

In your stylesheet, add the following:

Code: Select all

[data-mc-conditions*="Condition.Comment"] { background-color: yellow; }
Your conditions will now be styled; whether it's a paragraph, span, or even a whole topic (html tag).

This works because HTML5 help includes the condition markers in the output as data- attributes; e.g.

Code: Select all

<p data-mc-conditions="Condition.Comment">My comment</p>
So the CSS will apply the style to any element with that data attribute.
atomdocs
Sr. Propeller Head
Posts: 308
Joined: Tue Jun 18, 2013 3:00 am
Location: Eastern Seaboard, Thailand
Contact:

Re: Tip: Styling conditions in HTML5 help

Post by atomdocs »

Nice one Dave, I think a lot of people will like this. I'll give it a go.
Tom
Flare 2022, Capture 7
Image
Matt Collins
Propeller Head
Posts: 33
Joined: Thu Apr 17, 2014 7:01 am
Location: Columbus, Georgia, United States.

Re: Tip: Styling conditions in HTML5 help

Post by Matt Collins »

I'm having some trouble implementing this approach. When I add your example into my CSS as is, I get a message about invalid CSS, "Bad token in selector: =".
The reasonable man adapts himself to the world,
the unreasonable man persists in trying to adapt the world to himself.
Therefore all progress depends on the unreasonable man.

- George Bernard Shaw
Matt Collins
Propeller Head
Posts: 33
Joined: Thu Apr 17, 2014 7:01 am
Location: Columbus, Georgia, United States.

Re: Tip: Styling conditions in HTML5 help

Post by Matt Collins »

Also thought this might help, this is how the conditions look in the html tags (in Flare v10.2.1's text editor):
<p MadCap:conditions="Conditions.Comment">
The reasonable man adapts himself to the world,
the unreasonable man persists in trying to adapt the world to himself.
Therefore all progress depends on the unreasonable man.

- George Bernard Shaw
Matt Collins
Propeller Head
Posts: 33
Joined: Thu Apr 17, 2014 7:01 am
Location: Columbus, Georgia, United States.

Re: Tip: Styling conditions in HTML5 help

Post by Matt Collins »

Ok, disregard, I see what's going on now. What appears as "<p MadCap:conditionalText="Default.Comment">" in the topic in Flare will become something like "<MadCap:conditionalText data-mc-conditions="Default.Comments">".

The issue I am having is that the conditional tag formatting I am trying to apply is not showing up in the XML editor view.
The reasonable man adapts himself to the world,
the unreasonable man persists in trying to adapt the world to himself.
Therefore all progress depends on the unreasonable man.

- George Bernard Shaw
atomdocs
Sr. Propeller Head
Posts: 308
Joined: Tue Jun 18, 2013 3:00 am
Location: Eastern Seaboard, Thailand
Contact:

Re: Tip: Styling conditions in HTML5 help

Post by atomdocs »

Hi Matt

I haven't had a chance to try this yet, but as I understand it, it works on the output files, post-build. So you won't be able to see it in the XML editor, only in the output.
Tom
Flare 2022, Capture 7
Image
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Tip: Styling conditions in HTML5 help

Post by NorthEast »

Yes this applies to the HTML5 output.

Whilst it doesn't style the content in the XML editor, bear in mind that they're already indicated with coloured makers (and will have coloured background too if you set Conditional Indicators).
tschwoeppe
Jr. Propeller Head
Posts: 2
Joined: Mon Oct 06, 2014 7:29 am

Re: Tip: Styling conditions in HTML5 help

Post by tschwoeppe »

Just a small addition to this.
The CSS selector won't match when you have put multiple conditions on an element.

For that to work, you'd need to do:

Code: Select all

[data-mc-conditions*="Condition.Comment"] { background-color: yellow; }
Notice the "*=" instead of just "=".
Then it matches when "Condition.Comment" appears anywhere in the data-mc-conditions attribute.

I only wish this trick would also work for print output, but sadly Flare ignores this (and even used to complain about it being invalid CSS until I upgraded to version 10 about two months ago).
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Tip: Styling conditions in HTML5 help

Post by NorthEast »

Thanks, I hadn't thought about that.

I guess you could make the match a little looser too; e.g. *="Comment" to match any condition tag name (in any file) that includes 'Comment' in its title.
CPrsson
Jr. Propeller Head
Posts: 1
Joined: Fri Nov 21, 2014 8:09 am

Re: Tip: Styling conditions in HTML5 help

Post by CPrsson »

Hello,
I love this idea! I've tried to implement it but didn't succeed... I'm quite new to CSS and don't understand where I go wrong. I would like to make the “old content” that needs a thorough technical review visible in my HTML5 output. I’ve applied the condition in the TOC.

This is the code I’ve added to my style sheet opened in the text editor:

Code: Select all

[data-mc-conditions*="Default.OldContent"] { background-color: yellow; }
Is something wrong with it? Do I need to update any other settings as well? Do I need to define colors somewhere?
The name of the condition in the Condition Tag Set Editor is “OldContent”.

Thanks in advance for any tips :)
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Tip: Styling conditions in HTML5 help

Post by NorthEast »

This will only highlight conditions that are applied to the topics (i.e. in topic properties) or text within a topic.

It won't highlight items in the TOC that you've marked with conditions.
ghillerson
Propeller Head
Posts: 85
Joined: Wed Mar 05, 2014 10:22 pm
Location: Near Santa Cruz, CA
Contact:

Re: Tip: Styling conditions in HTML5 help

Post by ghillerson »

Exactly what I needed, works as advertised, and saved me a bean-load of time and trouble. Thank you, Dave!
nielsf
Propeller Head
Posts: 86
Joined: Mon Feb 02, 2015 5:44 am
Location: Copenhagen, Denmark

Re: Tip: Styling conditions in HTML5 help

Post by nielsf »

Like! :D
I might add that you can style the conditions as a whole in the style sheet editor so they are for instance yellow in the XML Editor, but this does not make it through to the html5 output.
Thanks for this solution.
-Niels
-----
Flaring in Copenhagen, Denmark
jmcgill
Propeller Head
Posts: 20
Joined: Thu May 14, 2015 3:35 pm

Re: Tip: Styling conditions in HTML5 help

Post by jmcgill »

Just to clarify...we can only style condition tags for HTML5 output? If I want to add a background color to a condition tag for PDF output, my only option is to tag the text with a condition and tag it with a style. Correct?
tschwoeppe
Jr. Propeller Head
Posts: 2
Joined: Mon Oct 06, 2014 7:29 am

Re: Tip: Styling conditions in HTML5 help

Post by tschwoeppe »

jmcgill wrote:Just to clarify...we can only style condition tags for HTML5 output? If I want to add a background color to a condition tag for PDF output, my only option is to tag the text with a condition and tag it with a style. Correct?
I'm not sure whether it's just HTML5 output, but PDF for sure doesn't work. This kind of style is dynamically applied by the browser in which you view the output, unfortunately not by Flare itself when producing the output. Hence, it might work with other online outputs in case the CSS stylesheets are included in the output and utilized by the viewer application.
So, yes, for PDF, your only option at the moment is to tag the text with a condition and a style.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Tip: Styling conditions in HTML5 help

Post by NorthEast »

Yep, this is for HTML5 ouput only - I do mention that in the first line of my post.
rheck
Jr. Propeller Head
Posts: 4
Joined: Wed Dec 31, 2014 3:27 pm

Re: Tip: Styling conditions in HTML5 help

Post by rheck »

Very helpful tip that saved me a lot of time trying to make this happen using other methods. Thanks for sharing.

I originally entered the code within a style (e.g., within the <p> tag definition) and it did not work. So just fyi to place the code as a standalone item anywhere within your .css file.
RiverMonster
Sr. Propeller Head
Posts: 148
Joined: Fri May 09, 2008 8:51 am
Location: Alicante, Spain
Contact:

Re: Tip: Styling conditions in HTML5 help

Post by RiverMonster »

I found a way to extend this idea to "rough" PDFs....e.g if you want a single PDF with all text of a particular condition highlighted for your own information

1. Create an XHTML output and look for the largest htm output file - you will see this contains all the topics from the TOC. Let's say it's called Chicken.html.
2. Copy the Chicken.html OUTPUT file into the project's CONTENT folder
3. Set up the HTML5 conversion - a) Edit the CSS as Dave describes b) Create a TOC that only has one topic - the Chicken.html file - and set the target to use this TOC c) Set the target to "Ignore content not linked directly or indirectly from the Target"
5. Create a HTML5 output and open the folder structure in Explorer. The Topics folder should have a single topic file inside it.
6. Using Acrobat Professional create a PDF from this output html file
Post Reply