Creating "Branded" HTML5 output

[Eric Lachance]

Hey all!

I haven't been really up to date on new Flare technologies and in fact I'm still currently using Flare 7. We actually went to Adobe Robohelp for a while but there's just a few things that really, really bother me about it and of the 2 features that pushed us towards going to Robohelp, we're not really using one (merging outputs, since our new product is in one project) and a little checkmark called "Exclude non-referenced topics in the output"... but that one doesn't work in all situations. yay.

So now, after 3 years of trying to figure out so many different things in Robohelp, I'd like to start convincing the powers that be to convert our single robohelp project to Flare... But there's only one thing I am not sure about, one thing that we critically need, and that I haven't found how to do through my online searches.

So basically we want to generate HTML5 output, and we want this output to be branded. That is to say, that one project is generating 2 different outputs, one called "BrandX User Guide", the other called "BrandZ User Guide". The brands have different colors (orange and red), different logos, and feature sets that are 90% similar (that last one is easily handled by conditions in the output, no biggie).

But, as far as I can tell from "Customizing HTML5 Output", that's almost impossible in Flare. I mean, from what I can tell, the HTML5 "skin" is a single folder in the program files that is literally shared between all the projects. In Robohelp, you can create responsive html5 skins, for different screen profiles (computer, cell, tablet, etc) and have individual "skins" (you can have as many as you want) that are selected in output generation.

Maybe I'm missing something, maybe I can actually do everything I need to do using CSS styling on that skin in the output, but the things I need, essentially, are to change the overall colors of the skin (as in, not that black/green color I saw) as well as the logos and names within the skin itself.

Has anyone managed this? Could someone be generous enough to perhaps build a small example project that does this? (I can get a trial version going to be able to check it out). Once I get this working, we'd be able to get the latest version of Flare, convert the projects we have, and be merry.

[emsachs]

In Flare, the skin is selected in the Target file, which controls the output. Similarly, you can select different stylesheets for different targets. So you can definitely have different skins. If you look at the Flare samples page, there's a company there that has Web, Mobile, and Print output - the Mobile version is responsive. You can also see that everyone has branded the skin for their own company:

http://www.madcapsoftware.com/products/ ... mples.aspx

Also check out this post:

viewtopic.php?f=12&t=19584

[Eric Lachance]

Hi emsachs,

I had seen that page. The issue isn't branding the page. The issue is having more than one brand per project. That's what I'm not sure about, especially if it's a single html file for all outputs (as far as I could tell in my last trial which was I think v10?)

[doc_guy]

You can have as many different skins as you want. Then, in your target you select which skin to use for a given output.

So yes, you can have many different look and feel HTML5 skins living in the same project. Then in the target file you specify which of those skins to use.

Does that make sense?

Also, the two features you mention are also in Flare: Merged output, and Excluding topics not linked.

Hope this helps.

-Paul

[Eric Lachance]

Is this new? I tried Flare 10 a few months ago (I think it was 10) and I don't remember seeing anything about skins. Or maybe I was rushing a little to much and blinded by all the stuff I had to do at the time

[doc_guy]

I'v been using Flare since 2006 (V2, I believe), and we've always had the ability to create and use multiple skins in a single project, so no, this isn't new. But hey, I've found several things over the years that have been there and I just didn't know to look for it! So I've been there too!

[doc_guy]

I'm sure if you contact your sales person, they would be happy to set up a demo of both of these features in Flare. They are really helpful that way.

[Eric Lachance]

The one I got last time (and I think the same when I filled in the trial request) was not able to answer me on this. Forwarded me to tech support and that's when I got really busy.

But maybe this is where I was blind: Aren't "skins" for WebHelp output? I remember that this was the issue I saw: I could create as many webhelp outputs as I wanted, but only one HTML5 responsive output. I'll take a look in a virtual machine right now, actually.

[Nita Beck]

Aren't "skins" for WebHelp output? I remember that this was the issue I saw: I could create as many webhelp outputs as I wanted, but only one HTML5 responsive output.

Same deal is for HTML5 output. You can most definitely have more than one HTML5 target in the same project, with each of those targets associated with "branded" skins, master pages, and stylesheets.

[Eric Lachance]

Also, the two features you mention are also in Flare: Merged output, and Excluding topics not linked.

Hope this helps.

-Paul

Oh right! The issue wasn't topics as much as it was resources. Files that I wanted to have in one version still were output, even if they weren't linked from an included topic. The workaround was to add conditions to the files themselves, which is not the worst annoyance in the world... not compared to the little **** problems I have to deal with in Robohelp, anyways. Such as topic/chapter conditions being completely ignored in printed output (yes, you read that right. ugh).

[Eric Lachance]

So after some tinkering around:

• OMG direct import of my robohelp project in like 30 seconds. Whoa!
• Flare 11's inteface looks awesome compared to both Flare 7 and Robohelp 11 (but RH is worse)
• The default HTML5 template looks pretty awesome
• Indeed I can make more than one skin easily.
• However... The skin editing is done through an XML or the interface, which means I don't have full power over it (I like to tinker in the html!), and also that our web integrators and designers are going to bitch about having to work in Flare (or I'm gonna bitch about figuring out what goes where and how to duplicate their design)... Any tips?

[doc_guy]

If you use the TopNav output from Flare 11, then you can just show your designers the output and let them write the CSS however they want. Then you just copy their CSS into your project and when it builds, it will look like what they want.

Additionally, here is a thread that talks about how you can add your own style sheet to the HTML5 skin. Again, show your designers the HTML5 output, and let them tinker with the CSS, and then add that CSS to your Flare project.

Finally, you can always hire somebody to design a skin to match your desired standard. It's not the cheapest way to go, but it is probably the quickest.

[Eric Lachance]

I certainly don't expect I'll ever need to pay someone else to design a template, we have all the knowledge in-house to create any website or design from scratch. However, in this regards Robohelp does seem to offer more power in template generation. In fact, their "skin" is a folder containing CSS, Images and javascripts, along with a few "template" files that look like this : http://pastebin.com/N1mGty3T

Not full control either, and I don't that there's 5 templates that are essentially the same (glossary, index, search results, table of contents and the topic itself), but it's certainly better than using jQuery to edit the design after, at least performance-wise. I mean, I can certainly do this, and I've done it in Flare 7 already by adding custom code to the MasterPages: Take a look at the buttons at the top, they query an sqlite db on the backend through an ajax request to build a version list and "related" user guides (there's 5 for this software suite).

The kind of thing I have to do with jQuery isn't the end of the world, really, simply:

• Changing the logo to text, seen in the template I put on pastebin, and output here
• Adding custom buttons somewhere in the interface (probably the navigation toolbar, actually) for version/related user guides.
• Possibly, if this is required of me by the company (and it might), add a custom "site-wide" navigation toolbar to match the other sites the training department is publishing, such as learn or demo.
• Integrate OLARK feedback service

Actually I found This custom skin example that does that kind of thing with jQuery. Just wanted to know if it was possible in the source rather than client-side in the output.

But hey, thanks everyone for your help, I really did learn a lot thanks to you all and I'm expecting a full recovery from my robohelpanitis within the next 6 months, as well as a return to sanity!

[ToddPh]

That custom skin example you linked was written by Dave Lee, who frequents these forums. He has been a remarkable resource to me over the years and multiple versions of Flare. I highly recommend looking at his posts for things related to JQuery.
There are some extremely knowledgeable folks here who will always go the extra mile to help out. I feel like I learn something new every time I visit.

[Eric Lachance]

I... I actually feel like I've learned more from this forum than I ever did from tech support. You guys are the free Silver tech support plan!