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.

Tip: Styling conditions in HTML5 help

Postby Dave Lee on Thu Sep 11, 2014 8:24 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5657
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Tip: Styling conditions in HTML5 help

Postby atomdocs on Thu Sep 11, 2014 5:31 pm

Nice one Dave, I think a lot of people will like this. I'll give it a go.
Tom
Flare 2019, Capture 7
Image
User avatar
atomdocs
Sr. Propeller Head
 
Posts: 307
Joined: Tue Jun 18, 2013 3:00 am
Location: Eastern Seaboard, Thailand

Re: Tip: Styling conditions in HTML5 help

Postby Matt Collins on Fri Sep 19, 2014 9:17 am

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

Postby Matt Collins on Fri Sep 19, 2014 9:37 am

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

Postby Matt Collins on Fri Sep 19, 2014 9:49 am

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
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

Postby atomdocs on Fri Sep 19, 2014 5:42 pm

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 2019, Capture 7
Image
User avatar
atomdocs
Sr. Propeller Head
 
Posts: 307
Joined: Tue Jun 18, 2013 3:00 am
Location: Eastern Seaboard, Thailand

Re: Tip: Styling conditions in HTML5 help

Postby Dave Lee on Mon Sep 22, 2014 1:15 am

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).
Dave Lee
Master Propellus Maximus
 
Posts: 5657
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Tip: Styling conditions in HTML5 help

Postby tschwoeppe on Mon Oct 06, 2014 7:37 am

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).
tschwoeppe
Jr. Propeller Head
 
Posts: 2
Joined: Mon Oct 06, 2014 7:29 am

Re: Tip: Styling conditions in HTML5 help

Postby Dave Lee on Mon Oct 06, 2014 8:24 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5657
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Tip: Styling conditions in HTML5 help

Postby CPrsson on Fri Nov 21, 2014 8:20 am

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 :)
CPrsson
Jr. Propeller Head
 
Posts: 1
Joined: Fri Nov 21, 2014 8:09 am

Re: Tip: Styling conditions in HTML5 help

Postby Dave Lee on Fri Nov 21, 2014 9:03 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5657
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Tip: Styling conditions in HTML5 help

Postby ghillerson on Wed Jan 28, 2015 7:09 pm

Exactly what I needed, works as advertised, and saved me a bean-load of time and trouble. Thank you, Dave!
ghillerson
Propeller Head
 
Posts: 85
Joined: Wed Mar 05, 2014 10:22 pm
Location: Near Santa Cruz, CA

Re: Tip: Styling conditions in HTML5 help

Postby nielsf on Thu Apr 23, 2015 4:06 am

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
nielsf
Propeller Head
 
Posts: 86
Joined: Mon Feb 02, 2015 5:44 am
Location: Copenhagen, Denmark

Re: Tip: Styling conditions in HTML5 help

Postby jmcgill on Thu May 14, 2015 3:40 pm

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?
jmcgill
Propeller Head
 
Posts: 17
Joined: Thu May 14, 2015 3:35 pm

Re: Tip: Styling conditions in HTML5 help

Postby tschwoeppe on Fri May 15, 2015 4:26 am

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.
tschwoeppe
Jr. Propeller Head
 
Posts: 2
Joined: Mon Oct 06, 2014 7:29 am

Re: Tip: Styling conditions in HTML5 help

Postby Dave Lee on Sat May 23, 2015 9:47 am

Yep, this is for HTML5 ouput only - I do mention that in the first line of my post.
Dave Lee
Master Propellus Maximus
 
Posts: 5657
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Tip: Styling conditions in HTML5 help

Postby rheck on Thu Jan 07, 2016 12:49 pm

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.
rheck
Jr. Propeller Head
 
Posts: 4
Joined: Wed Dec 31, 2014 3:27 pm

Re: Tip: Styling conditions in HTML5 help

Postby RiverMonster on Mon Mar 06, 2017 7:37 am

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
User avatar
RiverMonster
Sr. Propeller Head
 
Posts: 133
Joined: Fri May 09, 2008 8:51 am
Location: Bristol, UK


Return to Tips and Tricks

Who is online

Users browsing this forum: No registered users and 2 guests