Replicating MadCap's New Top Nav Topic Layout

This forum is for all Flare issues related to styles, stylesheets and XML.

Replicating MadCap's New Top Nav Topic Layout

Postby tkilpatrick on Thu Mar 22, 2018 11:53 am

Hello all,

I LOVE MadCap's new design for their Top Nav online help. Specifically, I like how they moved the Side Menu from the right (default) side of the page to the left: http://help.madcapsoftware.com/flare2017r3/Content/Flare/Introduction/Features/Editor-Tools.htm

In addition, they moved the Breadcrumbs and created a Search Bar to the left, to sit above the Side Menu. The last touch that pulls it all together is having all three of these items fixed on the page, so you always have easy access to them.

Referencing the link above, can someone please explain how to replicate their Topic layout? So, (1) fixed Side Menu on the left, (2) search bar above the Side Menu, (3) breadcrumbs above the search bar, and (4) keeping the Topic Toolbar buttons (Print, Expand All buttons) at the top-right of the page.

I've already tried the simple trick of setting the 'div.sideContent' style to float LEFT instead of RIGHT, but that simply moves the Side Menu AND the Topic Toolbar buttons to the left.

Thanks so much for any help/isight,
Troy
tkilpatrick
Jr. Propeller Head
 
Posts: 3
Joined: Thu Mar 22, 2018 7:02 am

Re: Replicating MadCap's New Top Nav Topic Layout

Postby Michelle_Gardner on Tue Oct 23, 2018 3:48 pm

Did you find the answers to your questions, tkilpatrick? I'd like to see what this looks like. :D
Michelle_Gardner
Propeller Head
 
Posts: 13
Joined: Mon Apr 14, 2014 10:22 am

Re: Replicating MadCap's New Top Nav Topic Layout

Postby Dave Lee on Wed Oct 24, 2018 1:21 am

Create a new master page.

In your master page, create a two column layout - I'd guess MadCap used a responsive layout.
Responsive layout: https://help.madcapsoftware.com/flare20 ... ayouts.htm

In the left column, insert the breadcrumbs proxy, search bar proxy, and a menu proxy.
About proxies: https://help.madcapsoftware.com/flare20 ... roxies.htm

Create a menu skin (HTML5 Component - Menu) and set this to be fixed - on the skin Setup tab, set Fixed Menu - All.
Make sure the menu proxy in your master page is set to use this menu skin.

In the right column in your master page, insert the topic toolbar proxy, and the topic body proxy underneath.
Dave Lee
Master Propellus Maximus
 
Posts: 5413
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Replicating MadCap's New Top Nav Topic Layout

Postby tkilpatrick on Tue Oct 30, 2018 10:50 am

Hi Dave,

Thanks for the reply; you set me on the right path. The only ran into one issue: The side menu was fixed, while the breadcrumb and search proxies were not. What I ended up doing is simply making the entire left column fixed (I set its position to "fixed" in the stylesheet); I then tweaked the margins and widths of the two responsive columns and the various proxies to line them up. Works like a charm.

The issue I'm having now is with the responsive nature of the web output: As I shrink my browser, the three proxies in the left column aren't behaving as I would expect:

**NOTE: I had these responsive design issues before creating this new master page, so I don't think the two are related**

    The side menu (MadCap | menuProxy) isn't collapsing into a hamburger menu like it should.
    The search bar is basically static.
    The breadcrumbs do act responsively insofar as they get scrunched, but they basically turn into a tall vertical column that pushes the other two proxies down.

In addition, the body content in the right column ends up bleeding under these three proxies.

I spent some time scouring the forums but haven't had any luck getting help on these particular issues...would you be able to explain how to get these three proxies to behave responsively? I really just want the topic pages to act responsively like they do on the Madcap Flare help site. Any insight would be greatly appreciated!

Regards,
-Troy
tkilpatrick
Jr. Propeller Head
 
Posts: 3
Joined: Thu Mar 22, 2018 7:02 am

Re: Replicating MadCap's New Top Nav Topic Layout

Postby Dave Lee on Wed Oct 31, 2018 12:45 am

tkilpatrick wrote:
    The side menu (MadCap | menuProxy) isn't collapsing into a hamburger menu like it should.
    The search bar is basically static.
    The breadcrumbs do act responsively insofar as they get scrunched, but they basically turn into a tall vertical column that pushes the other two proxies down.


In Flare's help the menu proxy and search bar proxy are put inside a div, and that div is set to display: none in the tablet and mobile mediums. So they're only displayed for default (desktop).

The search in the skin header is displayed for the tablet and mobile mediums, and is hidden for desktop.

To display the breadcrumbs above the topic, I'd guess that their responsive layout is set up so that the two columns are stacked in Tablet and Mobile - i.e. each of your columns has a Cell Width of 12.
Dave Lee
Master Propellus Maximus
 
Posts: 5413
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Replicating MadCap's New Top Nav Topic Layout

Postby Folkie on Fri Nov 02, 2018 9:03 am

Glad I spotted this, I really like Madcap's help layout as well. I'm using sidenav at the moment but our online help isn't live outside the company yet and I have pretty much carte blanche over its design, so after I've got our next release guide finished I might just start having a play :)
Folkie
Jr. Propeller Head
 
Posts: 8
Joined: Sun Oct 27, 2013 8:55 am


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 4 guests