Hero Page

e.meneses · May 11th 2020

I am creating a personalized page with a "hero" section.

I created a custom css "noheader" and added to the page CSS Class Name:

CSS: Custom CSS

.noheader .pageHeaderFacade{
    display:none;
}

.noheader .pageNavigation{
    display:none;
}

.noheader .contentHeader{
    display:none;
}

.noheader .pageTitle {
    display: flex;
    height: 100%;
    width: 50%;
    flex-direction: column;
    align-items: flex-start;
    -webkit-box-pack: center;
    justify-content: center;
    line-height: 0.82;
    font-family: Biotif-Bold;
    font-weight: 900;
    //font-size: 8.75em;
    //font-size: 105pt;
      font-size: calc(60px + (150 - 60) * ((100vw - 300px) / (1600 - 300)));
    color: rgb(246, 83, 31);
    margin: 0px;
}

.noheader .headerTitle {
    //padding-top: 20px !important;
    font-family: Biotif-Bold;
    font-size: 50px;
    //font-size: 2vw;
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
    line-height: 0.05;
    letter-spacing: normal;
    text-align: left;
    color: rgb(209, 73, 34);
    margin: 0;
}

.noheader .pageText {
    max-width: 960px;
    font-family: Biotif-Medium;
    word-break: break-word;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.07;
    letter-spacing: 4.1px;
    text-align: justify;
    color: rgb(0, 0, 0);
    margin: 0px;    
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

/* fix white space */
.noheader .main  {
    padding: 0 !important;
    margin: 0 !important;
}
.noheader .main>.layoutBoundary  {
    padding: 0 !important;
    margin: 0 !important;
}
/* fix white space */

Display More

I need to remove the "pageHeaderFacade" and the "pageNavigation" sections...

Here is my page custom HTML

Code: Page HTML

<div class="boxesHero">
    <div class="imagem1">
        <div class="pageTitle">small<br />steps
        </div>
    </div>
</div>

<div class="fixLayout bg-red">
    <span class="pageHeader fg-orange">The Header</span>
    <p class="pageText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc erat sem, faucibus quis nunc ultricies, molestie interdum erat. Ut vestibulum velit lacus, et tristique neque vehicula eget. Mauris ante arcu, ultrices et tincidunt ut, iaculis dapibus odio. Cras euismod tellus sit amet arcu egestas consectetur. Cras eu augue eget erat viverra molestie id ut leo. Aenean sed orci eros. Integer ut fringilla enim.</p>
    <p class="pageText">Curabitur id enim semper, euismod quam non, tempor erat. Curabitur lacinia lorem egestas quam malesuada auctor. Cras accumsan sem semper varius sodales. Curabitur gravida leo sed turpis ornare, non ullamcorper nibh egestas. Phasellus iaculis dictum molestie. Quisque libero nunc, tempor sed eros ac, ultrices aliquam massa. Proin cursus imperdiet ligula.
        <br /><br /><button class="pageButton">JOIN US</button></p>
    
</div>

Display More

The first time I got some "white space" at the top and left.

So I add the "fix white space" in my custom css.

And it works nice...

But I can't fix the right white space after the red section...

Any ideas how to fix it?

**Alexander Ebert** · May 12th 2020

Quote from e.meneses

But I can't fix the right white space after the red section...

It would not even take a minute to figure that out when being able to see the page. The developer tools of the browser are extremly powerful

e.meneses · May 12th 2020

Quote from Alexander Ebert

It would not even take a minute to figure that out when being able to see the page. The developer tools of the browser are extremly powerful

Yes... It is.

But this time, can't figure it out.

There's nothing that I change there to fix it...

Should be really simple... But...

**Alexander Ebert** · May 12th 2020

Well, that's why I asked to see the page

e.meneses · May 12th 2020

Quote from Alexander Ebert

Well, that's why I asked to see the page

It's localhost. But here the HTML Page:

Smarty

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
        
    <title>Teste Hero - Test Page</title>
    
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta property="og:site_name" content="Test Page">
<meta property="og:title" content="Teste Hero - Test Page">
<meta property="og:url" content="http://localhost:8080/wcf/index.php?test-hero/">
<meta property="og:type" content="website">

<!-- Stylesheets -->
    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/wcf/style/style-2.css?m=1589235973">


<script>
    var SID_ARG_2ND    = '';
    var WCF_PATH = 'http://localhost:8080/wcf/';
    var WSC_API_URL = 'http://localhost:8080/wcf/';
    var SECURITY_TOKEN = '9044a205cf928627f15b865931ebb34b06b7dd44';
    var LANGUAGE_ID = 1;
    var LANGUAGE_USE_INFORMAL_VARIANT = false;
    var TIME_NOW = 1589236060;
    var LAST_UPDATE_TIME = 1589209622;
    var URL_LEGACY_MODE = false;
    var ENABLE_DEBUG_MODE = false;
    var ENABLE_PRODUCTION_DEBUG_MODE = true;
    var ENABLE_DEVELOPER_TOOLS = false;
    var WSC_API_VERSION = 2019;
    
    var REACTION_TYPES = {"1":{"title":"Like","renderedIcon":"<img\n\tsrc=\"http:\/\/localhost:8080\/wcf\/images\/reaction\/like.svg\"\n\talt=\"Like\"\n\tclass=\"reactionType\"\n\tdata-reaction-type-id=\"1\"\n>","iconPath":"http:\/\/localhost:8080\/wcf\/images\/reaction\/like.svg","showOrder":1,"reactionTypeID":1,"isAssignable":1},"2":{"title":"Thanks","renderedIcon":"<img\n\tsrc=\"http:\/\/localhost:8080\/wcf\/images\/reaction\/thanks.svg\"\n\talt=\"Thanks\"\n\tclass=\"reactionType\"\n\tdata-reaction-type-id=\"2\"\n>","iconPath":"http:\/\/localhost:8080\/wcf\/images\/reaction\/thanks.svg","showOrder":2,"reactionTypeID":2,"isAssignable":1},"3":{"title":"Haha","renderedIcon":"<img\n\tsrc=\"http:\/\/localhost:8080\/wcf\/images\/reaction\/haha.svg\"\n\talt=\"Haha\"\n\tclass=\"reactionType\"\n\tdata-reaction-type-id=\"3\"\n>","iconPath":"http:\/\/localhost:8080\/wcf\/images\/reaction\/haha.svg","showOrder":3,"reactionTypeID":3,"isAssignable":1},"4":{"title":"Confused","renderedIcon":"<img\n\tsrc=\"http:\/\/localhost:8080\/wcf\/images\/reaction\/confused.svg\"\n\talt=\"Confused\"\n\tclass=\"reactionType\"\n\tdata-reaction-type-id=\"4\"\n>","iconPath":"http:\/\/localhost:8080\/wcf\/images\/reaction\/confused.svg","showOrder":4,"reactionTypeID":4,"isAssignable":1},"5":{"title":"Sad","renderedIcon":"<img\n\tsrc=\"http:\/\/localhost:8080\/wcf\/images\/reaction\/sad.svg\"\n\talt=\"Sad\"\n\tclass=\"reactionType\"\n\tdata-reaction-type-id=\"5\"\n>","iconPath":"http:\/\/localhost:8080\/wcf\/images\/reaction\/sad.svg","showOrder":5,"reactionTypeID":5,"isAssignable":1}};
    
    </script>

<script src="http://localhost:8080/wcf/js/WoltLabSuite.Core.min.js?v=1589209622"></script>
<script>
requirejs.config({
    baseUrl: 'http://localhost:8080/wcf/js', 
    urlArgs: 't=1589209622'
    
});

window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        window.location.reload();
    }
});

</script>
<noscript>
    <style>
        .jsOnly {
            display: none !important;
        }
        
        .noJsOnly {
            display: block !important;
        }
    </style>
</noscript>

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "http:\/\/localhost:8080\/wcf\/",
"potentialAction": {
"@type": "SearchAction",
"target": "http:\/\/localhost:8080\/wcf\/index.php?search\/&amp;q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>

<!-- Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="http://localhost:8080/wcf/images/favicon/2.apple-touch-icon.png">
<link rel="manifest" href="http://localhost:8080/wcf/images/favicon/2.manifest.json">
<link rel="shortcut icon" href="http://localhost:8080/wcf/images/favicon/2.favicon.ico">
<meta name="msapplication-config" content="http://localhost:8080/wcf/images/favicon/2.browserconfig.xml">
<meta name="theme-color" content="#020304">

<link rel="canonical" href="http://localhost:8080/wcf/index.php?test-hero/">
        
                    </head>

<body id="tpl_wcf_cms"
    itemscope itemtype="http://schema.org/WebPage" itemid="http://localhost:8080/wcf/index.php?test-hero/"    data-template="cms" data-application="wcf" data-page-id="57" data-page-identifier="com.woltlab.wcf.generic57"        class="noheader heroImage">

<a id="top"></a>

<div id="pageContainer" class="pageContainer">
    
    
    <div id="pageHeaderContainer" class="pageHeaderContainer">
    <header id="pageHeader" class="pageHeader">
        <div id="pageHeaderPanel" class="pageHeaderPanel">
            <div class="layoutBoundary">
                <div class="box mainMenu" data-box-identifier="com.woltlab.wcf.MainMenu">
            
        
    <div class="boxContent">
        <nav aria-label="Main Menu">
    <ol class="boxMenu">
        
        
                    <li class="" data-identifier="com.woltlab.wcf.Dashboard">
                <a href="http://localhost:8080/wcf/" class="boxMenuLink">
                    <span class="boxMenuLinkTitle">Dashboard</span>
                                    </a>
                
                </li>                
                                    <li class="" data-identifier="com.woltlab.wcf.ArticleList">
                <a href="http://localhost:8080/wcf/index.php?article-list/" class="boxMenuLink">
                    <span class="boxMenuLinkTitle">Articles</span>
                                    </a>
                
                </li>                
                                    <li class="active" data-identifier="280d490fe79711027d0d5755adddf82db067faa1">
                <a href="http://localhost:8080/wcf/index.php?test-hero/" class="boxMenuLink" aria-current="page">
                    <span class="boxMenuLinkTitle">Test Hero</span>
                                    </a>
                
                </li>                
                                                                    
        
    </ol>
</nav>    </div>
</div>                
                <nav id="topMenu" class="userPanel userPanelLoggedIn">
            <span class="userPanelAvatar"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiPjxwYXRoIGZpbGw9IiM4MzlhNGQiIGQ9Ik0wIDBoMTZ2MTZIMHoiLz48dGV4dCB4PSI4IiB5PSI4IiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjciPkVWPC90ZXh0Pjwvc3ZnPg==" width="32" height="32" alt="" class="userAvatarImage"></span>
        
    <ul class="userPanelItems">
                    <!-- user menu -->
            <li id="userMenu">
                <a class="jsTooltip" href="http://localhost:8080/wcf/index.php?user/1-evandrocarneiro/" title="Control Panel"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiPjxwYXRoIGZpbGw9IiM4MzlhNGQiIGQ9Ik0wIDBoMTZ2MTZIMHoiLz48dGV4dCB4PSI4IiB5PSI4IiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjciPkVWPC90ZXh0Pjwvc3ZnPg==" width="32" height="32" alt="" class="userAvatarImage"> <span>evandrocarneiro</span></a>
                <div class="interactiveDropdown interactiveDropdownStatic interactiveDropdownUserMenu">
                    <div class="interactiveDropdownHeader">
                        <span class="interactiveDropdownTitle">Control Panel</span>
                        
                        
                    </div>
                    <div class="interactiveDropdownItemsContainer">
                        <ul class="interactiveDropdownItems interactiveDropdownItemsUserMenu">
                            <li>
                                <div class="box48">
                                    <a href="http://localhost:8080/wcf/index.php?user/1-evandrocarneiro/" aria-hidden="true"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiPjxwYXRoIGZpbGw9IiM4MzlhNGQiIGQ9Ik0wIDBoMTZ2MTZIMHoiLz48dGV4dCB4PSI4IiB5PSI4IiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjciPkVWPC90ZXh0Pjwvc3ZnPg==" width="48" height="48" alt="" class="userAvatarImage"></a>
                                    
                                    <div class="containerHeadline">
                                        <h3>
                                            <a href="http://localhost:8080/wcf/index.php?user/1-evandrocarneiro/">evandrocarneiro</a>
                                                                                                                                                <span class="badge userTitleBadge blue">Administrator</span>
                                                                                                                                                                                    </h3>
                                        
                                        <ul class="inlineList dotSeparated">
                                            <li><a href="http://localhost:8080/wcf/index.php?user/1-evandrocarneiro/">My Profile</a></li>
                                            <li><a href="http://localhost:8080/wcf/index.php?user/1-evandrocarneiro/&amp;editOnInit=true#about" class="jsUserPanelEditProfile">Edit Profile</a></li>                                            <li><a href="http://localhost:8080/wcf/acp/index.php?index/">Administration</a></li>                                        </ul>
                                    </div>
                                </div>
                            </li>
                            
                            
                            
                                                            <li class="interactiveDropdownUserMenuItem">
                                    <div class="box48">
                                        <div><span class="icon icon48 fa-user"></span></div>
                                        
                                        <div class="containerHeadline">
                                            <h3>User Account</h3>
                                            
                                            <ul class="inlineList dotSeparated">
                                                                                                    <li><a href="http://localhost:8080/wcf/index.php?account-management/">Account Management</a></li>
                                                                                                    <li><a href="http://localhost:8080/wcf/index.php?avatar-edit/">Avatar</a></li>
                                                                                                    <li><a href="http://localhost:8080/wcf/index.php?signature-edit/">Signature</a></li>
                                                                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                                            <li class="interactiveDropdownUserMenuItem">
                                    <div class="box48">
                                        <div><span class="icon icon48 fa-cog"></span></div>
                                        
                                        <div class="containerHeadline">
                                            <h3>Settings</h3>
                                            
                                            <ul class="inlineList dotSeparated">
                                                                                                    <li><a href="http://localhost:8080/wcf/index.php?settings/">General</a></li>
                                                                                                    <li><a href="http://localhost:8080/wcf/index.php?settings/&amp;category=privacy">Privacy</a></li>
                                                                                                    <li><a href="http://localhost:8080/wcf/index.php?notification-settings/">Notifications</a></li>
                                                                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                                            <li class="interactiveDropdownUserMenuItem">
                                    <div class="box48">
                                        <div><span class="icon icon48 fa-globe"></span></div>
                                        
                                        <div class="containerHeadline">
                                            <h3>Community</h3>
                                            
                                            <ul class="inlineList dotSeparated">
                                                                                                    <li><a href="http://localhost:8080/wcf/index.php?notification-list/">Notifications</a></li>
                                                                                                    <li><a href="http://localhost:8080/wcf/index.php?following/">Users I Follow</a></li>
                                                                                                    <li><a href="http://localhost:8080/wcf/index.php?ignored-users/">Blocked Users</a></li>
                                                                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                                        
                            
                        </ul>
                    </div>
                    <a class="interactiveDropdownShowAll" href="http://localhost:8080/wcf/index.php?logout/&amp;t=9044a205cf928627f15b865931ebb34b06b7dd44" onclick="WCF.Dropdown.Interactive.Handler.close('userMenu'); WCF.System.Confirmation.show('Do you really want to log out?', $.proxy(function (action) { if (action == 'confirm') window.location.href = $(this).attr('href'); }, this)); return false;">Logout</a>
                </div>
                </li>
            
            <!-- user notifications -->
                            <li id="userNotifications" data-count="0">
                    <a class="jsTooltip" href="http://localhost:8080/wcf/index.php?notification-list/" title="Notifications"><span class="icon icon32 fa-bell-o"></span> <span>Notifications</span></a>
                                            </li>
                            
                                    <li id="outstandingModeration" data-count="0">
                    <a class="jsTooltip" href="http://localhost:8080/wcf/index.php?moderation-list/" title="Moderation">
                        <span class="icon icon32 fa-exclamation-triangle"></span>
                        <span>Moderation</span>
                                            </a>
                                            </li>
                        
                <li id="unreadConversations" data-count="0">
        <a class="jsTooltip" href="http://localhost:8080/wcf/index.php?conversation-list/" title="Conversations"><span class="icon icon32 fa-comments"></span> <span>Conversations</span> </a>
                    </li>
                
        <!-- page search -->
                    <li class="jsOnly">
                <a href="#" id="userPanelSearchButton" class="jsTooltip" title="Search"><span class="icon icon32 fa-search"></span> <span>Search</span></a>
            </li>
            </ul>
</nav>
            </div>
        </div>
        
        <div id="pageHeaderFacade" class="pageHeaderFacade">
            <div class="layoutBoundary">
                <div id="pageHeaderLogo" class="pageHeaderLogo">
        
    <a href="http://localhost:8080/wcf/">
        <img src="http://localhost:8080/wcf/images/styleLogo-a156b86a1ee4be307b6912cb53bd25484fafa401.svg" alt="" class="pageHeaderLogoLarge" style="">
        <img src="http://localhost:8080/wcf/images/styleLogo-mobile-a156b86a1ee4be307b6912cb53bd25484fafa401.svg" alt="" class="pageHeaderLogoSmall">
        
        
    </a>
</div>
                
                    


<div id="pageHeaderSearch" class="pageHeaderSearch">
    <form method="post" action="http://localhost:8080/wcf/index.php?search/">
        <div id="pageHeaderSearchInputContainer" class="pageHeaderSearchInputContainer">
            <div class="pageHeaderSearchType dropdown">
                <a href="#" class="button dropdownToggle"><span class="pageHeaderSearchTypeLabel">Everywhere</span></a>
                <ul class="dropdownMenu">
                    <li><a href="#" data-extended-link="http://localhost:8080/wcf/index.php?search/" data-object-type="everywhere">Everywhere</a></li>
                    <li class="dropdownDivider"></li>
                    
                    
                    
                                                                        <li><a href="#" data-extended-link="http://localhost:8080/wcf/index.php?search/&amp;types%5B%5D=com.woltlab.wcf.article" data-object-type="com.woltlab.wcf.article">Articles</a></li>
                                                                                                <li><a href="#" data-extended-link="http://localhost:8080/wcf/index.php?search/&amp;types%5B%5D=com.woltlab.wcf.page" data-object-type="com.woltlab.wcf.page">Pages</a></li>
                                                                                                <li><a href="#" data-extended-link="http://localhost:8080/wcf/index.php?search/&amp;types%5B%5D=com.woltlab.wcf.conversation.message" data-object-type="com.woltlab.wcf.conversation.message">Conversations</a></li>
                                                                
                    <li class="dropdownDivider"></li>
                    <li><a class="pageHeaderSearchExtendedLink" href="http://localhost:8080/wcf/index.php?search/">More Options</a></li>
                </ul>
            </div>
            
            <input type="search" name="q" id="pageHeaderSearchInput" class="pageHeaderSearchInput" placeholder="Search …" autocomplete="off" value="" required>
            
            <button class="pageHeaderSearchInputButton button" type="submit">
                <span class="icon icon16 fa-search pointer" title="Search"></span>
            </button>
            
            <div id="pageHeaderSearchParameters"></div>
            
                        
            <input type="hidden" name="t" value="9044a205cf928627f15b865931ebb34b06b7dd44">        </div>
    </form>
</div>

    </div>
        </div>
        
        </header>
    
    
</div>
    
    
    
    
    
    <div class="pageNavigation">
    <div class="layoutBoundary">
            <nav class="breadcrumbs" aria-label="Breadcrumb">
        <ol itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
            <li title="Test Page" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                            <a href="http://localhost:8080/wcf/" itemprop="item"><span itemprop="name">Test Page</span></a>
                                                            <meta itemprop="position" content="1">
                                                                                    </li>
        </ol>
    </nav>
        
        
    </div>
</div>
    
    
    
    <section id="main" class="main" role="main">
        <div class="layoutBoundary">
            
            
            <div id="content" class="content">
                                
                                                                                    
                                                    <header class="contentHeader">
                                <div class="contentHeaderTitle">
                                    <h1 class="contentTitle">Teste Hero</h1>
                                                                    </div>
                                
                                                                    <nav class="contentHeaderNavigation">
                                        <ul>
                                            <li><a href="http://localhost:8080/wcf/acp/index.php?page-edit/57/" class="button"><span class="icon icon16 fa-pencil"></span> <span>Edit Page</span></a></li>
                                        </ul>
                                    </nav>
                                
                            </header>
                                                                            
                
                
                
            <div class="boxesHero">
    <div class="imagem1">
        <div class="pageTitle">small<br />steps
        </div>
    </div>
</div>

<div class="fixLayout bg-red">
    <span class="pageHeader fg-orange">The Header</span>
    <p class="pageText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc erat sem, faucibus quis nunc ultricies, molestie interdum erat. Ut vestibulum velit lacus, et tristique neque vehicula eget. Mauris ante arcu, ultrices et tincidunt ut, iaculis dapibus odio. Cras euismod tellus sit amet arcu egestas consectetur. Cras eu augue eget erat viverra molestie id ut leo. Aenean sed orci eros. Integer ut fringilla enim.</p>
    <p class="texto">Curabitur id enim semper, euismod quam non, tempor erat. Curabitur lacinia lorem egestas quam malesuada auctor. Cras accumsan sem semper varius sodales. Curabitur gravida leo sed turpis ornare, non ullamcorper nibh egestas. Phasellus iaculis dictum molestie. Quisque libero nunc, tempor sed eros ac, ultrices aliquam massa. Proin cursus imperdiet ligula.
        <br /><br /><button class="botao">JOIN US</button></p>
    
</div>    
<footer class="contentFooter">
    
</footer>


                
                
                
                
                            </div>
                
                            
                    </div>
    </section>
    
    
    
    
    
    <footer id="pageFooter" class="pageFooter">
        
                        
            <div class="boxesFooter">
            <div class="layoutBoundary">
                                                    <div class="boxContainer">
                        <div class="box" data-box-identifier="com.woltlab.wcf.FooterMenu">
            
        
    <div class="boxContent">
        <nav aria-label="Footer Menu">
    <ol class="boxMenu">
        
        
                    <li class="" data-identifier="com.woltlab.wcf.PrivacyPolicy">
                <a href="http://localhost:8080/wcf/index.php?privacy-policy/" class="boxMenuLink">
                    <span class="boxMenuLinkTitle">Privacy Policy</span>
                                    </a>
                </li>                
    </ol>
</nav>    </div>
</div>
                    </div>
                
            </div>
        </div>
        
            <div id="pageFooterCopyright" class="pageFooterCopyright">
            <div class="layoutBoundary">
                <div class="copyright"><a href="https://www.woltlab.com" rel="nofollow">Powered by <strong>WoltLab Suite&trade; 5.2.6</strong></a></div>
            </div>
        </div>
    
</footer>
</div>

<div id="pageMainMenuMobile" class="pageMainMenuMobile menuOverlayMobile" data-page-logo="http://localhost:8080/wcf/images/styleLogo-a156b86a1ee4be307b6912cb53bd25484fafa401.svg">
    <ol class="menuOverlayItemList" data-title="Menu">
        
        
        <li class="menuOverlayTitle">Navigation</li>
                    
            <li class="menuOverlayItem" data-mobile-identifier="com.woltlab.wcf.Dashboard">
                                <a href="http://localhost:8080/wcf/" class="menuOverlayItemLink">
                    <span class="menuOverlayItemTitle">Dashboard</span>
                                    </a>
                
                </li>                    
                                        
            <li class="menuOverlayItem" data-mobile-identifier="com.woltlab.wcf.ArticleList">
                                <a href="http://localhost:8080/wcf/index.php?article-list/" class="menuOverlayItemLink">
                    <span class="menuOverlayItemTitle">Articles</span>
                                    </a>
                
                </li>                    
                                        
            <li class="menuOverlayItem" data-mobile-identifier="280d490fe79711027d0d5755adddf82db067faa1">
                                <a href="http://localhost:8080/wcf/index.php?test-hero/" class="menuOverlayItemLink active">
                    <span class="menuOverlayItemTitle">Test Hero</span>
                                    </a>
                
                </li>                    
                                                                                <li class="menuOverlayItemSpacer"></li>
        <li class="menuOverlayItem" data-more="com.woltlab.wcf.search">
            <a href="#" class="menuOverlayItemLink box24">
                <span class="icon icon24 fa-search"></span>
                <span class="menuOverlayItemTitle">Search</span>
            </a>
        </li>
        <li class="menuOverlayTitle" id="pageMainMenuMobilePageOptionsTitle">Options</li>
        
        
        
                    <li class="menuOverlayTitle">Current Location</li>
            <li class="menuOverlayItem">
                        <a href="http://localhost:8080/wcf/" class="menuOverlayItemLink">
                            <span class="box24">
                                <span class="icon icon24 fa-home"></span>
                                <span class="menuOverlayItemTitle">Test Page</span>
                            </span>
                        </a>
                    </li>
        
        
        
    </ol>
</div>


<div id="pageUserMenuMobile" class="pageUserMenuMobile menuOverlayMobile" data-page-logo="http://localhost:8080/wcf/images/styleLogo-a156b86a1ee4be307b6912cb53bd25484fafa401.svg">
    <ol class="menuOverlayItemList" data-title="User Menu">
        
        
                    
            <li class="menuOverlayTitle">User Menu</li>
            <li class="menuOverlayItem">
                <a href="http://localhost:8080/wcf/index.php?user/1-evandrocarneiro/" class="menuOverlayItemLink box24">
                    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiPjxwYXRoIGZpbGw9IiM4MzlhNGQiIGQ9Ik0wIDBoMTZ2MTZIMHoiLz48dGV4dCB4PSI4IiB5PSI4IiBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjciPkVWPC90ZXh0Pjwvc3ZnPg==" width="24" height="24" alt="" class="userAvatarImage">                    <span class="menuOverlayItemTitle">evandrocarneiro</span>
                </a>
            </li>
            <li class="menuOverlayItem">
                <a href="http://localhost:8080/wcf/index.php?settings/" class="menuOverlayItemLink box24">
                    <span class="icon icon24 fa-cog"></span>
                    <span class="menuOverlayItemTitle">Settings</span>
                </a>
                <ol class="menuOverlayItemList">
                    
                    
                                            <li class="menuOverlayTitle">User Account</li>
                                                    <li class="menuOverlayItem">
                                <a href="http://localhost:8080/wcf/index.php?account-management/" class="menuOverlayItemLink">Account Management</a>
                            </li>
                                                    <li class="menuOverlayItem">
                                <a href="http://localhost:8080/wcf/index.php?avatar-edit/" class="menuOverlayItemLink">Avatar</a>
                            </li>
                                                    <li class="menuOverlayItem">
                                <a href="http://localhost:8080/wcf/index.php?signature-edit/" class="menuOverlayItemLink">Signature</a>
                            </li>
                                                                    <li class="menuOverlayTitle">Settings</li>
                                                    <li class="menuOverlayItem">
                                <a href="http://localhost:8080/wcf/index.php?settings/" class="menuOverlayItemLink">General</a>
                            </li>
                                                    <li class="menuOverlayItem">
                                <a href="http://localhost:8080/wcf/index.php?settings/&amp;category=privacy" class="menuOverlayItemLink">Privacy</a>
                            </li>
                                                    <li class="menuOverlayItem">
                                <a href="http://localhost:8080/wcf/index.php?notification-settings/" class="menuOverlayItemLink">Notifications</a>
                            </li>
                                                                    <li class="menuOverlayTitle">Community</li>
                                                    <li class="menuOverlayItem">
                                <a href="http://localhost:8080/wcf/index.php?notification-list/" class="menuOverlayItemLink">Notifications</a>
                            </li>
                                                    <li class="menuOverlayItem">
                                <a href="http://localhost:8080/wcf/index.php?following/" class="menuOverlayItemLink">Users I Follow</a>
                            </li>
                                                    <li class="menuOverlayItem">
                                <a href="http://localhost:8080/wcf/index.php?ignored-users/" class="menuOverlayItemLink">Blocked Users</a>
                            </li>
                                                                
                    
                </ol>
            </li>
                            <li class="menuOverlayItem">
                    <a href="http://localhost:8080/wcf/acp/index.php?index/" class="menuOverlayItemLink box24">
                        <span class="icon icon24 fa-wrench"></span>
                        <span class="menuOverlayItemTitle">Administration</span>
                    </a>
                </li>
                        <li class="menuOverlayItemSpacer"></li>
            <li class="menuOverlayItem" data-more="com.woltlab.wcf.notifications">
                <a href="http://localhost:8080/wcf/index.php?notification-list/" class="menuOverlayItemLink menuOverlayItemBadge box24" data-badge-identifier="userNotifications">
                    <span class="icon icon24 fa-bell-o"></span>
                    <span class="menuOverlayItemTitle">Notifications</span>
                                    </a>
            </li>
                            <li class="menuOverlayItem" data-more="com.woltlab.wcf.moderation">
                    <a href="#" class="menuOverlayItemLink menuOverlayItemBadge box24" data-badge-identifier="outstandingModeration">
                        <span class="icon icon24 fa-exclamation-triangle"></span>
                        <span class="menuOverlayItemTitle">Moderation</span>
                                            </a>
                </li>
                        
                <li class="menuOverlayItem" data-more="com.woltlab.wcf.conversation">
        <a href="http://localhost:8080/wcf/index.php?conversation-list/" class="menuOverlayItemLink menuOverlayItemBadge box24" data-badge-identifier="unreadConversations">
            <span class="icon icon24 fa-comments"></span>
            <span class="menuOverlayItemTitle">Conversations</span>
                    </a>
    </li>
            
            <li class="menuOverlayItemSpacer"></li>
            <li class="menuOverlayItem">
                <a href="http://localhost:8080/wcf/index.php?logout/&amp;t=9044a205cf928627f15b865931ebb34b06b7dd44" class="menuOverlayItemLink box24">
                    <span class="icon icon24 fa-sign-out"></span>
                    <span class="menuOverlayItemTitle">Logout</span>
                </a>
            </li>
                
        
    </ol>
</div>



<div class="pageFooterStickyNotice">
        
    
    
    <noscript>
        <div class="info" role="status">
            <div class="layoutBoundary">
                <span class="javascriptDisabledWarningText">Your browser has JavaScript disabled. If you would like to use all features of this site, it is mandatory to enable JavaScript.</span>
            </div>
        </div>    
    </noscript>
</div>

<script>
    require(['Language', 'WoltLabSuite/Core/BootstrapFrontend', 'User'], function(Language, BootstrapFrontend, User) {
        Language.addObject({
            '__days': [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
            '__daysShort': [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
            '__months': [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ], 
            '__monthsShort': [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
            'wcf.clipboard.item.unmarkAll': 'Unmark All',
            'wcf.clipboard.item.markAll': 'Mark All Objects',
            'wcf.clipboard.item.mark': 'Mark Object',
            'wcf.date.relative.now': 'A moment ago',
            'wcf.date.relative.minutes': '{if $minutes > 1}{#$minutes} minutes{else}A minute{\/if} ago',
            'wcf.date.relative.hours': '{if $hours > 1}{#$hours} hours{else}An hour{\/if} ago',
            'wcf.date.relative.pastDays': '{if $days > 1}{$day}{else}Yesterday{\/if}, {$time}',
            'wcf.date.dateFormat': 'M jS Y',
            'wcf.date.dateTimeFormat': '%date%, %time%',
            'wcf.date.shortDateTimeFormat': '%date%',
            'wcf.date.hour': 'Hour',
            'wcf.date.minute': 'Minute',
            'wcf.date.timeFormat': 'g:i a',
            'wcf.date.firstDayOfTheWeek': '0',
            'wcf.global.button.add': 'Add',
            'wcf.global.button.cancel': 'Cancel',
            'wcf.global.button.close': 'Close',
            'wcf.global.button.collapsible': 'Expand and Collapse',
            'wcf.global.button.delete': 'Delete',
            'wcf.global.button.disable': 'Disable',
            'wcf.global.button.disabledI18n': 'monolingual',
            'wcf.global.button.edit': 'Edit',
            'wcf.global.button.enable': 'Enable',
            'wcf.global.button.hide': 'Hide',
            'wcf.global.button.insert': 'Insert',
            'wcf.global.button.next': 'Next »',
            'wcf.global.button.preview': 'Preview',
            'wcf.global.button.reset': 'Reset',
            'wcf.global.button.save': 'Save',
            'wcf.global.button.search': 'Search',
            'wcf.global.button.submit': 'Submit',
            'wcf.global.button.upload': 'Upload',
            'wcf.global.confirmation.cancel': 'Cancel',
            'wcf.global.confirmation.confirm': 'OK',
            'wcf.global.confirmation.title': 'Confirmation Required',
            'wcf.global.decimalPoint': '.',
            'wcf.global.error.timeout': 'Did not receive a response from server, request aborted.',
            'wcf.global.form.error.empty': 'Please fill in this field.',
            'wcf.global.form.error.greaterThan': 'The entered value has to be greater than {#$greaterThan}.',
            'wcf.global.form.error.lessThan': 'The entered value has to be less than {#$lessThan}.',
            'wcf.global.form.error.multilingual': 'Please fill in this field for all languages.',
            'wcf.global.form.input.maxItems': 'Maximum items reached',
            'wcf.global.language.noSelection': 'No Selection',
            'wcf.global.loading': 'Loading …',
            'wcf.global.noSelection': '(No Selection)',
            'wcf.global.select': 'Select',
            'wcf.page.jumpTo': 'Go to Page',
            'wcf.page.jumpTo.description': 'Enter a value between “1” and “#pages#”.',
            'wcf.global.page.pagination': 'Navigation',
            'wcf.global.page.next': 'Next Page',
            'wcf.global.page.previous': 'Previous Page',
            'wcf.global.pageDirection': 'ltr',
            'wcf.global.reason': 'Reason',
            'wcf.global.scrollUp': 'Go to Page Top',
            'wcf.global.success': 'The action completed successfully.',
            'wcf.global.success.add': 'The entry has been saved.',
            'wcf.global.success.edit': 'Your changes have been saved.',
            'wcf.global.thousandsSeparator': ',',
            'wcf.page.pagePosition': 'Page {#$pageNo} of {#$pages}',
            'wcf.style.changeStyle': 'Change Style',
            'wcf.user.activityPoint': 'Points',
            'wcf.user.panel.markAllAsRead': 'Mark All as Read',
            'wcf.user.panel.markAsRead': 'Mark as Read',
            'wcf.user.panel.settings': 'Settings',
            'wcf.user.panel.showAll': 'Display All',
            'wcf.menu.page': 'Menu',
            'wcf.menu.user': 'User Menu',
            'wcf.global.button.showMenu': 'Show Menu',
            'wcf.global.button.hideMenu': 'Hide Menu',
            'wcf.date.datePicker': 'Choose Date',
            'wcf.date.datePicker.previousMonth': 'Previous Month',
            'wcf.date.datePicker.nextMonth': 'Next Month',
            'wcf.date.datePicker.month': 'Month',
            'wcf.date.datePicker.year': 'Year',
            'wcf.date.datePicker.hour': 'Hour',
            'wcf.date.datePicker.minute': 'Minute'
                            ,'wcf.like.button.like': 'Like',
                'wcf.like.button.dislike': 'Dislike',
                'wcf.like.tooltip': '{if $likes}{#$likes} Like{if $likes != 1}s{/if}{if $dislikes}, {/if}{/if}{if $dislikes}{#$dislikes} Dislike{if $dislikes != 1}s{/if}{/if}',
                'wcf.like.summary': '{if $others == 0}{@$users.slice(0, -1).join(", ")}{if $users.length > 1} and {/if}{@$users.slice(-1)[0]}{else}{@$users.join(", ")} and {if $others == 1}one{else}{#$others}{/if} other{if $others > 1}s{/if}{/if} like{if $users.length == 1}s{/if} this.',
                'wcf.like.details': 'Details',
                'wcf.reactions.react': 'React'
                        
            
        });
        
        BootstrapFrontend.setup({
            backgroundQueue: {
                url: 'http://localhost:8080/wcf/index.php?background-queue-perform/',
                force: false            },
            enableUserPopover: true,
            styleChanger: false        });
        
        User.init(1, 'evandrocarneiro', 'http:\/\/localhost:8080\/wcf\/index.php?user\/1-evandrocarneiro\/');
    });
    
    // prevent jQuery and other libraries from utilizing define()
    __require_define_amd = define.amd;
    define.amd = undefined;
</script>



<script src="http://localhost:8080/wcf/js/WCF.Combined.min.js?v=1589209622"></script>


<script>
    define.amd = __require_define_amd;
    $.holdReady(true);
    
    WCF.User.init(1, 'evandrocarneiro');
</script>





<script>
    $(function() {
        WCF.System.PageNavigation.init('.pagination');
        WCF.User.Profile.ActivityPointList.init();
        
                    require(['WoltLabSuite/Core/Ui/User/Trophy/List'], function (UserTrophyList) {
                new UserTrophyList();
            });
                
        
        
                
                    new WCF.System.KeepAlive(1740);
            
                            require(['WoltLabSuite/Core/Notification/Handler'], function(NotificationHandler) {
                    NotificationHandler.setup({
                        enableNotifications: true,
                        icon: 'http://localhost:8080/wcf/images/favicon/2.apple-touch-icon.png',
                        sessionKeepAlive: 1740                    });
                });
                        });
</script>

    
<script>
        var $imageViewer = null;
        $(function() {
            WCF.Language.addObject({
                'wcf.imageViewer.button.enlarge': 'Full Screen Mode',
                'wcf.imageViewer.button.full': 'View Source Image',
                'wcf.imageViewer.seriesIndex': '{literal}{x} of {y}{/literal}',
                'wcf.imageViewer.counter': 'Image {x} of {y}',
                'wcf.imageViewer.close': 'Close',
                'wcf.imageViewer.enlarge': 'View Full Image',
                'wcf.imageViewer.next': 'Next Image',
                'wcf.imageViewer.previous': 'Previous Image'
            });
            
            $imageViewer = new WCF.ImageViewer();
        });
        
        // WCF 2.0 compatibility, dynamically fetch slimbox and initialize it with the request parameters
        $.widget('ui.slimbox', {
            _create: function() {
                var self = this;
                head.load('http://localhost:8080/wcf/js/3rdParty/slimbox2.min.js', function() {
                    self.element.slimbox(self.options);
                });
            }
        });
    </script>
    
    
<script>
    WCF.Language.addObject({
        
        'wcf.global.error.title': 'Error Message'
        
        
        
    });
</script>





<script>
    $(function() {
        
        
    });
</script>

    
            
<script>
                    $(function() {
                        new WCF.User.Panel.UserMenu();
                    });
                </script>
            
<script>
                            $(function() {
                                new WCF.User.Panel.Notification({
                                    noItems: 'You have no recent notifications.',
                                    settingsLink: 'http://localhost:8080/wcf/index.php?notification-settings/',
                                    showAllLink: 'http://localhost:8080/wcf/index.php?notification-list/',
                                    title: 'Notifications'
                                });
                            });
                        </script>
                                    
<script>
                            $(function() {
                                new WCF.User.Panel.Moderation({
                                    deletedContent: 'Display Deleted Content',
                                    deletedContentLink: 'http://localhost:8080/wcf/index.php?deleted-content-list/',
                                    noItems: 'You have no recent items.',
                                    showAllLink: 'http://localhost:8080/wcf/index.php?moderation-list/',
                                    title: 'Moderation'
                                });
                            });
                        </script>
                                    
<script src="http://localhost:8080/wcf/js/WCF.Conversation.min.js?v=1589209622"></script>
            
<script>
                $(function() {
                    new WCF.User.Panel.Conversation({
                        newConversation: 'Create Conversation',
                        newConversationLink: 'http://localhost:8080/wcf/index.php?conversation-add/',
                        noItems: 'You have no recent conversations.',
                        showAllLink: 'http://localhost:8080/wcf/index.php?conversation-list/',
                        title: 'Conversations',
                        canStartConversation: true                    });
                });
            </script>
            
<script>
        require(['WoltLabSuite/Core/Ui/Search/Page'], function(UiSearchPage) {
            UiSearchPage.init('everywhere');
        });
    </script>
            
<script>
            require(['WoltLabSuite/Core/Ui/Page/Header/Fixed'], function(UiPageHeaderFixed) {
                UiPageHeaderFixed.init();
            });
        </script>
    


<a id="bottom"></a>

</body>
</html>

Display More

e.meneses · May 13th 2020

Alexander Ebert is there a way to create a custom page before the "main" section?

I found out that if the page goes inside "main" -> "layoutBoundary" -> "content" there are no easy way to fix it.

But if the page exists before "main" section all works just fine.

The Woltlab home page the content itself the content is before the "main" section...

But I can't figure that out... =/

ReeN · May 13th 2020

Quote from e.meneses

The Woltlab home page the content itself the content is before the "main" section...

WoltLab used boxes.

ACP -> Content -> Boxes

The first box has the position "Hero" and the other boxes have the position "Below header".

e.meneses · May 13th 2020

Quote from ReeN

WoltLab used boxes.

ACP -> Content -> Boxes

The first box has the position "Hero" and the other boxes have the position "Below header".

Seems to work! LOL

Thanks!

Hero Page

Participate now!

Share

Tags