Where to start - getting my top nav to look like HP

[sjb2016]

Hi All,

I'm still on my trial of Flare as we're evaluating a few different options for the tool we're going to replace our existing Doc-to-Help set up with. Flare seems like it can tick almost all the boxes for us, assuming I can create an output similar to the HP help center used in Flare's promotional case studies. I'm gaining confidence, but I've been struggling for a couple hours trying to get a side navigation like in this (once you click one of the options at the top):

http://octane-help.saas.hpe.com/en/12.5 ... v_Home.htm

Currently, I've got a slightly customized default HTML5 Top Nav skin and hae created a new menu component skin which calls a menu proxy, which is this case is actually just the same TOC as used to create the navigation menus as the top. However, I can only get the menu to insert before the topic text rather than at the side.

I'm aware of this topic below, but I think I need to back a bit further than that.

viewtopic.php?f=9&t=28363&p=124398&hili ... av#p124398

Any help, much appreciated.

[Nita Beck]

Hi. Welcome to the forums!

Check out this discussion, which might yield some ideas: viewtopic.php?f=9&t=27639

[sjb2016]

Thanks for the link. I hadn't seen that discussion. I was hoping there would be an out of the box solution. Mucking about getting things to work just how I want them is my favorite part of my job, but as I've only got a time limited trial at the moment, I'm conscious of the time required to get things set up. Anyway, it's good to see that it is indeed possible if we go down the Flare route.

[sjb2016]

Thanks to the fixed menu option available in Flare 2017 R2, I can make the HP look very easily. It's not as slick the process laid out above, but to be honest, it's dead easy and should fit the bill for us. Thanks MadCap! Now, just need to speak with my manager about why we need to purchase some licences....

[NorthEast]

This very simple to do without having Flare 2017r2 - if you have v11 onwards, you can use the built-in Foundation Grid classes (which is what HP's help is doing).

MadCap Flare already includes the Foundation Grid, so you don't have to do anything to start using it.

So for a very simple 2-column page with a menu column on the left and body content on the right, you'd have this in your master page:

Code: Select all

<div class="row">
   <div class="small-4 columns">
      <p>Insert your menu proxy here</p>
   </div>
   <div class="small-8 columns">
      <p>Insert your body proxy here</p>
   </div>
</div>

The grid styles make it really flexible - e.g. you can change column widths for screen sizes, or hide columns on certain screen sizes (HP's help hides the menu for small screens).

See: http://foundation.zurb.com/sites/docs/v ... /grid.html

[sjb2016]

Thanks David. By the end of faffing about with Flare yesterday, I had worked out what they were doing. I love how open things are with everything being XML, really makes it feel like you can do anything you want to!

[NorthEast]

Thanks David. By the end of faffing about with Flare yesterday, I had worked out what they were doing. I love how open things are with everything being XML, really makes it feel like you can do anything you want to!

No problem.

I think they could do more to raise awareness that Foundation Grid is sitting there ready to be used.

Just a side note if you look at Foundation Grid docs -
* Flare 2017r2 now uses Foundation 6.2 (http://foundation.zurb.com/sites/docs/grid.html)
* Older Flare versions (at least up til v12) use Foundation 5.5 (http://foundation.zurb.com/sites/docs/v ... /grid.html)

[LookingForHelp]

Just a side note if you look at Foundation Grid docs -
* Flare 2017r2 now uses Foundation 6.2 (http://foundation.zurb.com/sites/docs/grid.html)
* Older Flare versions (at least up til v12) use Foundation 5.5 (http://foundation.zurb.com/sites/docs/v ... /grid.html)

Hey Dave - I'm looking at the Foundation 6.2 and wanted to try a Tabbed layout: http://foundation.zurb.com/sites/docs/tabs.html

Flare throws me an error at this line: <ul class="tabs" data-tabs id="example-tabs"> -- it doesn't like the data-tabs part and displays:
'id' is an unexpected token. The expected token is '='.

I'm a little headscratching how to get this to be "compliant" - ideas? Hopefully an easy one?

[NorthEast]

Hey Dave - I'm looking at the Foundation 6.2 and wanted to try a Tabbed layout: http://foundation.zurb.com/sites/docs/tabs.html

Flare doesn't include all of the Foundation framework, they've only included the parts of Foundation that they use for HTML5 help.

They definitely include the Foundation Grid (as it was for v6.2.2), but I can't be sure what other components they've included.

[LookingForHelp]

Just to close out my slight derailment - I ended up solving by qualifying the attribute like so data-tabs="" so Flare XML editor would allow it.
I downloaded the full foundation framework and dropped the two files:
C:\Program Files\MadCap Software\MadCap Flare 13\Flare.app\Resources\WebHelp2\Desktop\Skins\Fluid\Stylesheets\foundation.6.3.1.min.css
C:\Program Files\MadCap Software\MadCap Flare 13\Flare.app\Resources\WebHelp2\Desktop\Skins\Fluid\Scripts\foundation.6.3.1.min.js
Then updated the Template.flmsp to point to those two files instead here:
C:\Program Files\MadCap Software\MadCap Flare 13\Flare.app\Resources\WebHelp2\Desktop\Skins\Fluid\Template.flmsp
Published = worked.

** Edit - while this does work with tab function; it does cause complications with responsive css menus. Might pull a more targeted css instead of the whole suite.