Layout help

Pamb10 · Post by **Pamb10** » Tue Nov 03, 2015 9:02 am

Hey everyone,

Looking for some help with layout needs. I am familiar with Flare but not with all the new layouts and skins that are available.

My needs are very simplistic at this point; A simple menu bar on the left, search bar above content are on the left.... please see image.

basic help layout.png

How do I accomplish this?

Initially I used the old tripane, but realized that I cannot move the search bar out of the header area (am I wrong?)....

Thanks.
Pam

Post by **NorthEast** » Tue Nov 03, 2015 9:11 am

Pamb10 wrote:Initially I used the old tripane, but realized that I cannot move the search bar out of the header area (am I wrong?)....

Do you want to move the search bar out the header? (where to?)

Just it doesn't look like that in your image - it just looks like the search bar is aligned left instead of right.

Either way, what you're suggesting looks like it's a lot closer to tripane.
If you didn't use tripane, you could use the new search bar and menu proxies in that layout; however the menu proxy is static and very different to what you get with the tripane contents pane.

Pamb10 · Post by **Pamb10** » Tue Nov 03, 2015 11:09 am

Hi Dave,

Yes, this layout will not necessarily have a header or at least must look like there is none as it will be fit into a specific area in a web app.

If I was to move the search bar out of the header, it would appear above the content in the content pane. Is it possible to move the search bar in tripane and make the header look invisible or the same as the content area?

Here is another look at the web page. The help output will have to fit under the blueish header in the area denoted by the red box. The blue box is the top of the web page. Hope this makes more sense.

HelpSupport (003).png

Pamb10 · Post by **Pamb10** » Wed Nov 04, 2015 12:56 pm

I tried to use the Search bar proxy with the Tripane layout but apparently that does not work. The help says that it is not supported.

StraygoatWriting · Post by **StraygoatWriting** » Thu Nov 05, 2015 8:03 am

Use the top-nav skin for the basic layout. Set the page to whatever width you need, and then turn the top-nav menu off and shrink the header size down to just enough to allow for the mobile menu icon. Then, in your master page, create a layout that has a header div at the top, menu div to the left, a search proxy top right, and the body proxy below the search proxy. For the menu, use the smartmenus plug in. I have created a similar layout myself - http://straygoat-technicalauthor.co.uk/ ... re-layout/. For the smartmenus bit, follow Dave Lee's excellent instructions. There are links to it on the page of that link above. The content of the page describes what I managed to achieve (it was thrown together somewhat hastily though). It is very similar to what you want, only you want the search proxy to be narrower, simple enough with CSS.

There are compromises though - no index, no glossary, unless you make a topic to contain them (never looked into that, but assume it is possible).

Pamb10 · Post by **Pamb10** » Thu Nov 05, 2015 10:08 am

Thank you. I will check this out.

Pamb10 · Post by **Pamb10** » Thu Nov 05, 2015 10:35 am

Hi Craig,

Then, in your master page, create a layout that has a header div at the top, menu div to the left, a search proxy top right, and the body proxy below the search proxy.

Can you show me what this looks like in the mp text?

Thanks

StraygoatWriting · Post by **StraygoatWriting** » Fri Nov 06, 2015 12:04 am

One of my master pages is as follows (just bear in mind I have some extra divs in there, for other tweaks I've made to the top nav output):

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="7" MadCap:lastHeight="1146" MadCap:lastWidth="1048">
    <head>
        <link href="../smartmenus-1.0.0-beta1/css/sm-core-css.css" rel="stylesheet" type="text/css" />
        <link href="../smartmenus-1.0.0-beta1/css/sm-clean/sm-clean-accordion-modified-breakpoint.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="wrapper">
            <div class="headerbanner">
                <div class="logohere">
                </div>
                <div class="bannerhere">
                </div>
            </div>
            <div class="purplebar">
                <div class="searchcontainer">
                    <MadCap:searchBarProxy data-mc-skin="/Project/Skins/Official_Search1.flskn" />
                </div>
            </div>
            <div class="bodywrap">
                <div class="tricontainer">
                    <div class="tocmenu">
                        <div id="smartmenu-accordion">
                            <MadCap:menuProxy style="mc-toc-depth: -1;mc-context-sensitive: False;mc-include-parent: True;mc-include-siblings: True;mc-include-children: True;" data-mc-skin="/Project/Skins/Menu.flskn" />
                        </div>
                        <div class="toc_content">
                        </div>
                    </div>
                    <div class="bodycontainer">
                        <MadCap:bodyProxy />
                    </div>
                </div>
            </div>
            <div class="push">
            </div>
        </div>
        <div class="footersection">
            <div class="purplebar">
            </div>
            <div class="footercontainer">
                <MadCap:snippetBlock src="../Snippets/Layout Snippets/Sidebargeneric.flsnp" />
            </div>
        </div>
        <!-- scripts -->
        <script type="text/javascript" src="../Scripts/tables-fix.js">
        </script>
        <script src="../smartmenus-1.0.0-beta1/jquery.smartmenus-modified.js" type="text/javascript">
        </script>
        <script src="../smartmenus-1.0.0-beta1/initialise-accordion.js" type="text/javascript">
        </script>
    </body>
</html>

Post by **NorthEast** » Fri Nov 06, 2015 1:17 am

This is a bit more of an advanced option though.

If you don't use the tripane skin, you can create a master page which includes a menu proxy (for the left navigation) and a search bar proxy.

If you're happy with what the default menu proxy provides, then you don't need the smartmenus.
The smartmenus example I developed (my examples are here) is just a way to modify the menu proxy so it behaves like an accordion rather than a static list.

StraygoatWriting · Post by **StraygoatWriting** » Fri Nov 06, 2015 1:38 am

That's true Dave, but I find it hard to imagine people being satisfied with the menu proxy as it currently is. It really needs further development.

And while it is an advanced option, don't do your instructions a disservice - they're pretty good! Apart from that issue with indenting the second level items, I didn't run into any trouble. Once you have the menu in place, you don't really have to worry about it apart from styling it. (For anyone else reading - the smartmenu has 2 css files and uses styles in both. Use developer tools on the browser to find, and test, the style change and then you will find the style in one of the two css files).

I have linked to your examples from that page I posted btw and linked to your blog. I was just too lazy to look it up again on here, sorry.

Pamb10 · Post by **Pamb10** » Fri Nov 06, 2015 7:07 am

Ok thanks so much guys.

My test is very simplistic (without using smartmenus). Here is what I have so far using the TopNav style...

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="3" MadCap:lastHeight="236" MadCap:lastWidth="1236">
    <head>
    </head>
    <body>
        <div class="menubar">
            <MadCap:menuProxy style="mc-context-sensitive: True;mc-include-parent: True;mc-include-siblings: True;mc-include-children: True;" />
        </div>
        <div class="contentpane">
			<div class="searchbar">
               <MadCap:searchBarProxy />
			</div>	
			<div class="content">
               <MadCap:bodyProxy />
			</div>	
        </div>
    </body>
</html>

The right side div with search and body work fine. I just dont see any menu on the left. What am I missing?

Looking at the source for the page, I do see the menu items in the html code.

StraygoatWriting · Post by **StraygoatWriting** » Fri Nov 06, 2015 7:33 am

Hmm, hard to tell...does the menubar div appear at all? If it is there, but empty, I'd guess there is a problem with the setup of the menu proxy or maybe an issue with the size not being adequate to contain the menu.

Pamb10 · Post by **Pamb10** » Fri Nov 06, 2015 9:22 am

Upon further inspection of the source, the menu code that was generated is ignored because I turned that part of the skin off on the top nav. However, where my div is added, there is no generated menu items.

Code: Select all

                    <section class="main-section">
                        <div class="row outer-row" data-mc-content-body="True">


                            <div class="menubar">    < this is where my menuproxy should appear  "<MadCap:menuProxy style="mc-context-sensitive: True;mc-include-parent: True;mc-include-siblings: True;mc-include-children: True;" mc-linked-toc="/Project/TOCs/OnlineOutput.fltoc" />"
                            </div>


                            <div class="contentpane">
                                <div class="searchbar">
                                    <form class="search" action="#">
                                        <div class="search-bar search-bar-container needs-pie">
                                            <input class="search-field needs-pie" type="search" placeholder="Search" />
                                            <div class="search-filter-wrapper">
                                                <div class="search-filter">
                                                    <div class="search-filter-content">
                                                        <ul>
                                                            <li>All Files</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="search-submit-wrapper" dir="ltr">
                                                <div class="search-submit" title="Search">
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="content">
                                  ...

Post by **NorthEast** » Fri Nov 06, 2015 10:36 am

The HTML code you posted is invalid, where you added the comment:

<div class="menubar"> < this is where my menuproxy should appear "<MadCap:menuProxy style="mc-context-sensitive: True;mc-include-parent: True;mc-include-siblings: True;mc-include-children: True;" mc-linked-toc="/Project/TOCs/OnlineOutput.fltoc" />"

Pamb10 · Post by **Pamb10** » Fri Nov 06, 2015 11:47 am

That was just a comment i added for the sake of the forum. That line of code actually reads:

<div class="menubar">
</div>

The pseudo comment is what appears in the master page.

Pamb10 · Post by **Pamb10** » Wed Nov 11, 2015 9:08 am

Any further input or ideas on this?

Post by **NorthEast** » Thu Nov 12, 2015 7:08 am

Going back to basics, have you created a skin for the menu proxy?
i.e. go to Project Organizer > Skins, then add a HTML 5 Component - Menu.

MadCap Software Forums

Layout help

Layout help

Re: Layout help

Re: Layout help

Re: Layout help

Re: Layout help

Re: Layout help

Re: Layout help

Re: Layout help

Re: Layout help

Re: Layout help

Re: Layout help

Re: Layout help

Re: Layout help

Re: Layout help

Re: Layout help

Re: Layout help

Re: Layout help