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.
This is Part 6 of a series of posts on how to create the following layout, complete with accordion menu and slide-in drill-down menu, in MadCap Flare.
If you missed the previous parts, here are links:
In this post, I'm going to cover a few of the problems I ran into when I tried to implement the solution on an existing project. I'll list the issues first, so that you can skip to parts that are relevant to you:
There is a bug in the Flare editor that means if you edit a non-Flare css file, it will cause incorrect code when saved. This is a problem in Flare 11 - it may have been fixed in Flare 12. I have not upgraded yet, so if it still persists in 12, let me know in the comments. The problem is that the Flare editor substitutes the full stop (period) in 'not(.' with 00002E', which breaks a few things that are valid CSS.This can be a bit of a problem when you have to hand over the project to other users, as they may not be aware of the limitation. Also, it is a bit of a downer if you prefer to use the Flare editor because you're not so comfortable editing css as code. I usually prefer editing css as code, but I do use the editor for some editing, especially for linking the stylesheet to files.The workaround I used was this:
The Foundation menu layout uses a Target that has no skin and the Master Stylesheet set to (default). As a result, the topics in the project are not associated with a stylesheet. This can be a bit of a problem if you want your topics in Flare to look similar to how they will appear in your HTML5 output. But there's an easy way to fix it:
This was a deal-breaker for my client - the Foundation menus just wouldn't work on their iPads and iPhones. A bit embarrassing, as I don't have an iPhone or iPad to test on (I'm android-only at the moment). Thankfully, the web developers that help me with lots of little niggles on my site were able to help (Web Book Studio - you can find them here on freelancer.com).Web Book Studio looked into the problem and pinned it down to a missing line of code in the foundation.css file, provided in the Foundation download. The missing line is:
-webkit-overflow-scrolling: touch;
and it needs to go before the closing } at line 2126.You can edit it yourself in a text editor and then paste it in place of the foundation.css file in the project. The location for the file is:Content\Resources\foundation\cssI wasn't able to test it myself, but Nita Beck took a look at a test site on her iPad and iPhone and reported that they both work as expected. Thanks, Nita.
Of all the problems I encountered, this one was by far the most frustrating. I triple-checked all the Foundation stuff was right, went through the Master Page with a fine tooth-comb and ran build after build. Annoying, because the solution was so simple.The problem was that the Foundation menus just weren't appearing. All of the styles I'd set in the project were right, but the menu was just an unformatted list sitting at the top of the page. It was caused by the Project Properties having settings in place from the previous version of the project. To fix it, all you need to do is:
That should do the trick. If it doesn't, there is something wrong in the Master Page, the stylesheets, the Target, or the foundation files are missing. Go back through the various posts in this series and try and find out what is wrong.Okay, that just about wraps this series up. Hopefully, you have enough information to get the demo Foundation menu project up and running and to start customising it to meet your own needs.I don't have time to offer support for this, but if you have questions, run into problems, or have suggestions, by all means add a comment or post to the MadCap forum. I'll do my best to help if/when I can.Now that I have Foundation menus working and Smartmenus working, I'm wondering if it might be possible to get Flare topic content into tabs. That's a project for another day.
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.
Registered Number: 08029184
Straygoat logo design by Bristol graphic designer, Nik Jones.
© Straygoat Writing Services Ltd.