Accordion Menu Layout for MadCap Flare 2017 R3

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.

[et_pb_button button_url="" url_new_window="on" button_text="Download the Demo Project" button_alignment="center" module_class="et-download-button"  custom_button="on" button_text_color="#ffffff" button_bg_color="#e05343" button_font="||||||||" box_shadow_style="preset1"][/et_pb_button]

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.[et_pb_button button_url="/accordion-demo/TopicStyles.css" url_new_window="on" button_text="Download TopicStyles.css" button_alignment="center" background_layout="dark" module_class="et-download-button"  custom_button="on" button_bg_color="#e05343" button_font="||||||||" box_shadow_style="preset1"][/et_pb_button]

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.

Craig Wright technical author

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.

Phone +44 07954141761

Straygoat Writing Services Ltd
26 Wheatlands Road

Registered Number: 08029184

Straygoat logo design by Bristol graphic designer, Nik Jones.

© Straygoat Writing Services Ltd.