Are you looking for a way to build Flare help with the layout of a tripane, but the looks of a top nav? This post will help.

Here, I’m going to give you with a demo project that will give you an output like the image shown here. This works in Flare 2017r3 and is based on the previous accordion menu project that Dave Lee put together for me back in 2016. (The 2016 project does not work with Flare 2017).

On mobile phones and tablets, the layout changes to include a menu bar. This works in the same way as the slide-in mobile menu that you find in Flare’s ‘Top Nav’ output.

I’ve made a couple of changes to the 2016 project. In the header, I’ve added a logo and image, and the image will disappear on smaller devices.

I’ve also put the search bar in its own <div> and set it to 80% width.

I’ll give a brief overview of what you need to do to customise the layout. But first, download the zipped Flare project.

Bring In Your Own Content

I’ve made various versions of this project, and I reckon the easiest way to get it to work with different content is to:

  • Copy and paste your topics from a Flare project into this project.
  • Copy and paste your toc into the TOCs folder.
  • Copy and paste your variables, snippets, conditions, etc., into the equivalent folders in the project.

There may be some things that won’t work, as I’ve not tested everything. For example, I’m not sure how menu proxies inside topics will behave. If you run into problems and come up with solutions, please post them in the comments – other people may find them helpful.

What Needs to Be In Place?

Much of the project can be set up in the same way as any other Flare project. The only things you need to make sure are in place are the target settings.

Master Page

Use the Foundation-responsive-offcanvas.flmsp master page. Make sure it is set as the Master Page in the Target’s Advanced settings.

Target > Skin Components

You need the target to point to (none), Menu.flskn, SearchBar.flskn, SearchResults.flskn.

If you want your project to use components that use different names, you will need to edit the script too. (Edit the foundation-menu-off-canvas-initialisation.js script so that it refers to your components instead of Menu.flskn, SearchBar.flskn, and SearchResults.flskn.)

Master TOC and Stylesheet

In the Target, make sure the Master TOC is set to your table of contents file. Set the Master Stylesheet to TopicStyles.css. Make sure Allow local stylesheets is selected (ticked/checked).

Flare uses the TopicStyles.css to create the layout. I’ve set up the FlareStyles.css for your own font styles etc, so you can copy your styles into that (or edit the existing ones).

Custsomise the Look and Feel

Changing the Styles

You’re going to need to customise the layout to use your own images and styles. For the most part, I recommend that you build the project and use the browser’s inspect (or equivalent) tool to find the classes you want to change, and the stylesheets where they are defined. Below, I’ve included the basic info you need.

1. Don’t Edit TopicStyles.css in Flare.

Some of the styles for the layout are set in the TopicStyles.css file. For most of the look and feel stuff, you shouldn’t need to edit these, but there may be a couple of things you decide to alter. If you are going to change anything in this file DON’T DO IT IN FLARE’S BUILT-IN EDITOR. There’s some sort of glitch that occurs if you edit this stylesheet in Flare and It stops the output from working as we want it.

If you need to make changes to any of the classes or ids in this stylesheet, open it in some other text editor, such as Notepad++ and make the changes there.

Made a tit of yourself and opened it in Flare’s editor? Not to worry, you can download just the TopicStyles.css file using the button below.

 

2. Modify the Look of your Content by Editing the FlareStyles.css in Flare

The FlareStyles.css file is called last in the master page, and so you can edit the styles in it without messing up the workings of the layout. If you need to change heading levels, paragraph fonts, and the like, this is the place to do it. Of course, you can edit these outside of Flare if you want. (I tend to only use the Flare editor when I want to make sure the path to an image or other file is correct).

3. Change Foundation styles by Editing the Foundation.css file

If you use the browser’s inspect mode (or equivalent), you can see the styles for each element, and the css file that contains the style definitions. If you find that you need to change a style in foundation.css, you can edit that in Resources > foundation > css.

4. Logo Change

To change the logo image in the top-left, edit the master page and change the references to  <img src=”../Images/straygoat-writing-services.png” /> to your logo image.  

5. Header Image Change

To change the header image (the computer), edit the FlareStyles.css file. You need to change the (Identifiers) > no-padding element, and set its background-image property to the image you want. The background-position: right aligns the image to the right of the div in the header, and background-repeat:no-repeat ensures it is only displayed once.

6. Footer Changes

The footer content is stored in a footer snippet (Resources > Snippets). So easy enough to change.

Things I’d Like to Improve

There are some parts of the demo project that I’m not quite happy with. If time allows, I may revisit these in the future.

Social Icons

The footer uses the foundation icons for social media. I think they look a bit shit. I had a quick look on the Zurb playground and saw some better ones,, but my initial attempt to get them to work failed. I’m sure it is possible though.

Random Flicker

Sometimes, when I select an option in the accordion menu, the page reloads and there is a slight flicker. But I can’t seem to get this to happen consistently. Not a big deal, really. But perhaps it will be more prominent on a larger project.

Watch Out for XY Grid Support

Zurb Foundation has released a new type of grid system called the XY grid, which is different to the float grid used in this project. The script and master page in this project may need to be reworked to allow for different class names in the foundation grid if:

  • Future releases of MadCap Flare are based on the XY grid and this causes some sort of conflict
  • The float grid becomes obsolete.

Happy Reverse-Engineering!

Now it’s over to you. Have a play with the demo and see what you can come up with. If you break it, you can always come back and download again and start from scratch.

If you manage to improve it, come back and tell me – post your comments or email me.

Techncial Writer, Craig Wright

Craig Wright is an experienced technical writer based in Chesterfield, UK.  He hates writing about himself in the third person, so I shall stop now.

Always interested in new content writing opportunities. Remote working preferred.

12 Comments

  1. Rob

    Craig,

    This is a wonderful gift to the Flare community! I had a lot of trouble sifting through the forum discussions about accordion menus. We’re using R3, and your sample project was easy to test with our content. We’ll have to make some tweaks, but this gives us a big boost!

    Rob

    Reply
    • Craig

      No problem, Rob. I’d received a lot of emails about the older version not working in R3, so thought it was about time to make a demo available. The fix didn’t actually take much – just a couple of lines of code, which Rob Hollinger at MadCap provided. Just took me a while to get around to making the demo!

      I’d be interested to know/see what changes you make.

      Reply
  2. Eric Johnson

    Craig, I love your design and instructions. This is exactly what I was looking for!

    Is it possible to use your design for individual Topic MasterPages? I have tried applying your design to an individual topic page via Properties> Topic Properties> Masterpage, but it doesn’t seem to work. I’m wondering if there is something different between the setting for MasterPages in a Topic Properties and the Global setting in the Target.

    Reply
    • Craig

      Thanks, Eric. I think if you only want to apply it to one topic, you are going to get all sorts of inconsistencies. The script is turning the toc into the side menu, so to only have that for one page and not others would be messy. What sort of thing are you trying to achieve? I only pursued this type of layout because clients saw the top nav and wanted that, but it wasn’t suitable for their content as they had so many top-level menus and the in-topic menu proxies weren’t to their liking.

      Reply
  3. Eric Johnson

    In the past, I have been using MasterPages for all of the manual-specific items, like revision changes. I suppose I could use a snippet for all of that stuff instead. I just like using multiple master pages to keep things easy to manage.

    Perhaps its possible to remove your nav menu and turn that into a snippet instead??? I’ll have to play around with it.

    Reply
  4. Christina

    Hi Craig,
    I used your project as a base for my own. I have run into a little issue though when adding more than one menu to a page.

    One is “foundation.js:180 Tried to initialize accordion-menu on an element that already has a Foundation plugin.”

    The other is that on those pages with the two accordions, I have times that one is randomly expanded on load. If the page is refreshed, it rolls back up.

    I am wondering if the warning and the random behavior don’t have some correlation. Would you have any thoughts about this? I am fairly new to Foundation and very new to Flare. I come from a WordPress & Bootstrap background. Thanks in advance for any ideas you can provide that will help me resolve my random menu issue. I am a little bit lost on this one.

    Hope you’re enjoying the solstice!

    Reply
    • Craig

      Hi Christina,

      I’m not sure what you are trying to achieve with the two accordion menus. Could you elaborate? I think the script that makes the accordion menu possible will only work with one menu, because of how the script is set up. If you have access to someone who knows js, they will probably be able to confirm that. The latest release of Flare has a side menu option built-in, I think. Maybe try downloading the trial version and see if you can achieve the two menu output with that. If you can, the easiest solution would be to upgrade. If you can’t, maybe check it out with Flare support?

      Enjoy the solstice? Didn’t even notice it was today – there’s a world cup on 🙂

      Reply
  5. Yonatan

    Hi
    First of all – thanks for providing this.

    As much as I was disappointed that Flare 2018 only provided a left menu as a skin – and not as a proxy menu – I was thrilled to find your implementation.

    So far I’ve managed to get it more or less working (on Flare 2018).

    My main problem at the moment is that in my current pages, that uses the Flare Proxy menu in the master page, the tree nodes can also be pages, from what I can see in your implementation – only clicking on the menu tree leaves, changes the content – clicking on a node opens it and does not redirect the content to the content defined for that node.

    Is this how it was designed or is an issue with the way I integrated it?

    If the that’s the way it works then is it a big deal to make clicking on a node switch the content as well as opening the tree (or perhaps leave expanding/colapssing the tree only to the open/close icon)

    Thanks again
    Yonatan

    Reply
    • Craig

      Hi Yonatan,

      Are you able to provide some screenshots so I can see the problem? I think what you are describing is one of the limitations of this approach – that you can’t have a parent menu option linked to a topic that contains content. I’m not 100% sure that’s what you mean though.

      Reply
  6. S Ham

    Craig,

    Would you be able to update this for 2018r2? They upgraded to the newest JQuery, and there’s something in the version of foundation included with this that does not get along with the new JQuery.

    Reply
  7. John Taylor

    Hi Craig,

    It seems that Flare 2018r2 has broken this again, in a new and exciting way. 🙁 (The project still works in 2018r1.)

    Don’t suppose you could update this for the new version of Flare?

    Reply
    • Craig

      Sorry, I’m not intending to update this for Flare 2018r2. The latest version of Flare has a knowledgebase layout with a side menu (as far as I am told, I haven’t used it yet), so I think using that for the layout is the best way to go.

      Reply

Submit a Comment

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

Share This