How have they done it? Big search bar & drop-down menus

[charleybrown]

Hi!

Looking at the Customer Samples on the MadCap website, I've come across this documentation website from a company called Rediker Software. You can check it out here: http://redikersupport.com/documentation/

I'm quite astonished this has been done in Flare! How did they make this big seach bar on the start page?

And when you dig deeper, you get here: http://redikersupport.com/documentation ... guides.htm

And from there on to something like this: http://redikersupport.com/documentation ... /index.htm

How can you do these drop-down menus in the bar at the top of the page? I assume this is something that you'd have to do directly in JavaScript, right? Or is there a way to do something similar directly in Flare?

Thanks!

[NorthEast]

Well, the bad news is that you can't add any of those features using Flare, it's achieved using third-party tools/scripts.
If you want your help to look like that, it's going to require some effort, and you need a basic knowledge of web development/scripting.

The site is produced as a 'skin-less' design.
Flare's normal HTML5/WebHelp outputs have a skin container with a navigation pane (with the TOC) and a header (with toolbar and search), and the topics are displayed inside a frame (or iframe) inside this container.
In a skin-less design, you just don't use this skin container at all, and open the topics standalone. That means you can't use the skin's navigation and search, so you need to create your own controls and integrate them in actual topics, usually by including them in the master page. So the challenging part of this is how you create things like the navigation controls and search yourself, either from scratch or using using third-party tools.

For some examples of what's involved see:
* Bomgar's webinar - https://www.madcapsoftware.com/demos/si ... 1111021845
* The upcoming Overdrive webinar (which I guess will cover similar ground) - https://www.madcapsoftware.com/demos/si ... 9277498737
* My blog post on creating a menu navigation control here: http://ukauthor.wordpress.com/2014/08/0 ... c-as-menu/

[kellyh_hochanadel]

I really wanted to check out the OverDrive webinar but they're all at 10 CST and I have meetings at that time EVERY day. Any chance they're recording this one?

[Lydia]

There is a recording in the video section - http://www.madcapsoftware.com/videos/?v ... size=small. I also missed it and tracked it down there. It's not in the recorded webinar section where I first looked and expected it to be.
A note: I watched the video and this is a different animal than the bomgar site or what Dave has implemented. Putting topics in the right places is automated in this case, based on meta data in the topics. Several tools are used in the process, including a custom one. They've done a great job there. It's not something you just do from scratch.

[kellyh_hochanadel]

Thanks for sharing this, Lydia! I'm anxious to check this out. While I'm sad I can't do all this in Flare, I'll count my lucky stars that I am surrounded by front end developers.

[jbrock]

The http://redikersupport.com/documentation/ website structure does look similar to what we did on the Bomgar site with Flarestrap. I'd be intrigued to know if that's what they used.

The Overdrive help site is awesome. So awesome, actually, that I called them to find out how in the world they did it. The short version of it is that the people there are just brilliant. Period. If I recall correctly, (and I don't think I'm disclosing anything I shouldn't be) they're using API magic to pull topics into Salesforce Desk.com. None of the styling is really happening in Flare.

One thing that our site, the Rediker site, and the Overdrive site demonstrate is that you don't have to use Flare's CSS. You can use anything you want to style your masterpages or topics.

That said, it's not terribly difficult to make dropdowns happen in Flare.

I'm updating the Flarestrap project. One modification I thought of making was to have CSS and snippet samples for doing layouts like that within the default Flare targets, in addition to the standalone target that lives outside of the frame. Anyway, I'd love more requests for features and elements to include. Here's the forum topic for feedback.

[charleybrown]

Thanks for all your answers - and thanks for the link to Flarestrap, Justin! I will definitely check this out.

In the meantime I have managed to modify the size and position of the search bar with a post-building/pre-publishing hack to the stylesheet and also managed to create bigger dropdown menus. So at least this was accomplished, even if it's just a workaround.

Patrick

[NorthEast]

In the meantime I have managed to modify the size and position of the search bar with a post-building/pre-publishing hack to the stylesheet and also managed to create bigger dropdown menus. So at least this was accomplished, even if it's just a workaround.

If you want to modify the skin styles without any post-build steps, I've written a blog post on customising the HTML5 skin:
http://ukauthor.wordpress.com/2014/08/0 ... tml5-skin/

[charleybrown]

Thanks Dave! I had actually seen this blog post of yours before but did not really have the time to dive in and check out how I can apply this to my project. Will give it more time soon.

Congrats on your blog, by the way! Keep it up!

[jbrock]

I think you owe it to yourself to check out Flare 11. I'm really happy with how they've enabled a truly frameless output. You can use the Top Navigation output to make your dropdowns.