Formatting issue with TopNav template, Home page

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
whunter
Sr. Propeller Head
Posts: 429
Joined: Thu Mar 12, 2009 4:49 pm
Location: Portland, OR

Formatting issue with TopNav template, Home page

Post by whunter »

I created some TopNav output using Flare's TopNav template. I customized the Home page to remove the slide-show under the search bar and the video section at the bottom of the page, and made some other little tweaks to colors and such.

I still have the middle section with a text blurb on the left and PDFs on the right, including the more info "buttons" at the bottom of each section. I only needed 1 button under the text section so I adjusted for that. My problem is this: If you resize the browser thinner (and presumably also in mobile/tablet view), the text in the left section starts to flow under the button (this is before it gets small enough to start showing the right section underneath the left section). I don't know enough about CSS to figure out why this is happening after my changes and why it doesn't happen in the original TopNav template. I have compared the original and adjusted style sheets side by side but cannot figure out what it is.

I know this will be hard to answer without knowing exactly what I did to the style sheet and home page, but I'm wondering if anyone has general guidance about things to look at for this kind of issue, or if anyone experienced a similar issue after making their own customizations to the template.
chrisj
Propeller Head
Posts: 87
Joined: Thu Jun 26, 2014 8:08 am
Location: Omaha, NE

Re: Formatting issue with TopNav template, Home page

Post by chrisj »

Assuming you are using the latest version:

Not sure I know the exact problem you are having - it could be anything from a container div being deleted in the topic file, to you accidentally entering children elements in a container div which throws off the nth-child() selectors that Flare uses. But, I was able to download the template and create the functionality I think you are going for. Maybe having this to copy and paste into a topic and test will be helpful to you.

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="8" MadCap:lastHeight="840" MadCap:lastWidth="1440" class="HomePage" style="mc-master-page: url('Resources\MasterPages\HomePage.flmsp');">
    <head>
        <link href="Resources/Stylesheets/StylesForHomePage.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="topichero">
            <div class="title-text">
                <div class="HomeHeroSection">
                    <div class="centered-text">
                        <h1 class="whiteheader">Welcome to <MadCap:variable name="General.ProductName" />'s Online Help
						</h1>
                        <h2 class="whiteheader">The Place to Find Information, Tutorials, FAQs, and More</h2>
                    </div>
                </div>
                <MadCap:searchBarProxy data-mc-skin="/Project/Skins/HomeSearchBar.flskn" />
            </div>
        </div>
        <div id="content-section" class="mc-blurb">
            <div class="HomeWelcomePDFSection outer-row">
                <div class="left-section">
                    <div class="left-content">
                        <h2 class="SubCenter">Meet <MadCap:variable name="General.ProductName" /></h2>
                        <p><MadCap:variable name="General.ProductName" /> gives you the following: </p>
                        <ul class="mc-bullets">
                            <li>State-of-the-art interface</li>
                            <li>Quality widgets</li>
                            <li>Fun for the whole family</li>
                            <li>Flexible, easy to use, and quite pretty</li>
                            <li>Full support for this, that, and the other thing</li>
                            <li>No batteries required</li>
                        </ul>
                    </div>
                    <div class="button-group center HomeWelcomeButtons">
						
                        <div class="button black"><a href="A_Getting Started/Basic Steps.htm" class="BlackText">Basic Steps</a>
                        </div>
                    </div>
                </div>
                <div class="right-section">
                    <div class="right-content">
                        <h2 class="SubCenter">PDF Guides</h2>
                        <div class="table-images center HomePDFSection">
                            <div><a href="http://docs.madcapsoftware.com/FlareTemplates/UserGuideAGreen.pdf" target="_blank"><img src="Resources/Images/PDF Cover.png" class="Hyperlinked" /></a>
                            </div>
                            <div><a href="http://docs.madcapsoftware.com/FlareTemplates/UserGuideAGreen.pdf" target="_blank"><img src="Resources/Images/PDF Cover.png" class="Hyperlinked" /></a>
                            </div>
                            <div><a href="http://docs.madcapsoftware.com/FlareTemplates/UserGuideAGreen.pdf" target="_blank"><img src="Resources/Images/PDF Cover.png" class="Hyperlinked" /></a>
                            </div>
                        </div>
                        <div class="table-images center HomePDFSection">
                            <div><a href="http://docs.madcapsoftware.com/FlareTemplates/UserGuideAGreen.pdf" target="_blank"><img src="Resources/Images/PDF Cover.png" class="Hyperlinked" /></a>
                            </div>
                            <div><a href="http://docs.madcapsoftware.com/FlareTemplates/UserGuideAGreen.pdf" target="_blank"><img src="Resources/Images/PDF Cover.png" class="Hyperlinked" /></a>
                            </div>
                            <div><a href="http://docs.madcapsoftware.com/FlareTemplates/UserGuideAGreen.pdf" target="_blank"><img src="Resources/Images/PDF Cover.png" class="Hyperlinked" /></a>
                            </div>
                        </div>
                    </div>
                    <div class="button-group center HomePDFButton">
                        <div class="button black"><a href="E_Footer Topics/PDF Downloads.htm" class="BlackText">View More PDFs</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
Chris Jones
Product Content Manager - TEAM Software
Image
whunter
Sr. Propeller Head
Posts: 429
Joined: Thu Mar 12, 2009 4:49 pm
Location: Portland, OR

Re: Formatting issue with TopNav template, Home page

Post by whunter »

Sorry, forgot to specify: I am using Flare 2017 (not r2 or r3).

Thanks for the assistance. What I realized after looking at your test is that the Flare template does do the same thing, you just have to get it really unreasonably skinny before it happens. They have less text than I do and more space between the text and the button. So I just made my section taller and that seems to take care of it. I assumed they were working some magic that I wasn't getting, but it's just a case of manually adjusting for content I guess.
Post Reply