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.
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="http://www.straygoat.co.uk/accordion-demo/Foundation%206%20Accordion%20Menu.flprjzip%22" 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]
I've made various versions of this project, and I reckon the easiest way to get it to work with different content is to:
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.
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.
Use the Foundation-responsive-offcanvas.flmsp master page. Make sure it is set as the Master Page in the Target's Advanced settings.
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.)
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).
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.
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]
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).
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.
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.
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.
The footer content is stored in a footer snippet (Resources > Snippets). So easy enough to change.
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.
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.
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.
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:
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 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.
_new_hue.svg.png)
Registered Number: 08029184
Straygoat logo design by Bristol graphic designer, Nik Jones.
© Straygoat Writing Services Ltd.