Editing (v7+)

Toolbar at top of page not working (it's there just not working)

Permalink November 28, 2015 at 12:25 PM

Hi! Really new to Concrete5, so please excuse!!

I'm trying to install a custom theme into concrete5 using the documentation (http://documentation.concrete5.org/developers/designing-for-concrete5/building-a-concrete5-theme/converting-an-html-template-to-a-concrete5-theme)

Been going really well until now..

I've managed to add

<?php Loader::element('header_required') ?>

and

<?php Loader::element('footer_required') ?>

. The tool bar turns up on the page, however the menu bar on the site is now behind the toolbar and the Toolbar buttons don't work.

Attached is a screenshot of the site.

My code for full.php:

<!DOCTYPE HTML>
<!--
   Spectral by HTML5 UP
   html5up.net | @n33co
   Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
   <head>
       <?php Loader::element('header_required') ?> 
      <link rel="stylesheet" href="<?= $view->getThemePath() ?>/css/main.css" />
      <!--[if lte IE 8]><link rel="stylesheet" href="<?= $view->getThemePath() ?>/css/ie8.css" /><![endif]-->
      <!--[if lte IE 9]><link rel="stylesheet" href="<?= $view->getThemePath() ?>/css/ie9.css" /><![endif]-->
   </head>
   <body class="landing">
<div class="<?= $c->getPageWrapperClass() ?>">

Viewing 15 lines of 164 lines. View entire code block.

 <!DOCTYPE HTML>
<!--
   Spectral by HTML5 UP
   html5up.net | @n33co
   Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
 
<html>
   <head>
 
       <?php Loader::element('header_required') ?> 
      <link rel="stylesheet" href="<?= $view->getThemePath() ?>/css/main.css" />
      <!--[if lte IE 8]><link rel="stylesheet" href="<?= $view->getThemePath() ?>/css/ie8.css" /><![endif]-->
      <!--[if lte IE 9]><link rel="stylesheet" href="<?= $view->getThemePath() ?>/css/ie9.css" /><![endif]-->
   </head>
   <body class="landing">
<div class="<?= $c->getPageWrapperClass() ?>">
      <!-- Page Wrapper -->
         <div id="page-wrapper">
 
            <!-- Header -->
 
 
               <header id="header" class="alt">
                  <h1><a href="<?= $view->getThemePath() ?>/index.html">Spectral</a></h1>
                  <nav id="nav">
                     <ul>
                        <li class="special">
                           <a href="/#menu" class="menuToggle"><span>Menu</span></a>
                           <div id="menu">
                              <ul>
                                 <li><a href="<?= $view->getThemePath() ?>/index.html">Home</a></li>
                                 <li><a href="<?= $view->getThemePath() ?>/generic.html">Generic</a></li>
                                 <li><a href="<?= $view->getThemePath() ?>/elements.html">Elements</a></li>
                                 <li><a href="<?= $view->getThemePath() ?>/#">Sign Up</a></li>
                                 <li><a href="<?= $view->getThemePath() ?>/#">Log In</a></li>
                              </ul>
                           </div>
                        </li>
                     </ul>
                  </nav>
               </header>
 
            <!-- Banner -->
               <section id="banner">
                  <div class="inner">
                     <h2>Spectral</h2>
                     <p>Another fine responsive<br />
                     site template freebie<br />
                     crafted by <a href="http://html5up.net">HTML5 UP</a>.</p>
                     <ul class="actions">
                        <li><a href="<?= $view->getThemePath() ?>/#" class="button special">Activate</a></li>
                     </ul>
                  </div>
                  <a href="<?= $view->getThemePath() ?>/#one" class="more scrolly">Learn More</a>
               </section>
 
            <!-- One -->
               <section id="one" class="wrapper style1 special">
                  <div class="inner">
                     <header class="major">
                        <h2>Arcu aliquet vel lobortis ata nisl<br />
                        eget augue amet aliquet nisl cep donec</h2>
                        <p>Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend<br />
                        fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper.</p>
                     </header>
                     <ul class="icons major">
                        <li><span class="icon fa-diamond major style1"><span class="label">Lorem</span></span></li>
                        <li><span class="icon fa-heart-o major style2"><span class="label">Ipsum</span></span></li>
                        <li><span class="icon fa-code major style3"><span class="label">Dolor</span></span></li>
                     </ul>
                  </div>
               </section>
 
            <!-- Two -->
               <section id="two" class="wrapper alt style2">
                  <section class="spotlight">
                     <div class="image"><img src="<?= $view->getThemePath() ?>/images/pic01.jpg" alt="" /></div><div class="content">
                        <h2>Magna primis lobortis<br />
                        sed ullamcorper</h2>
                        <p>Aliquam ut ex ut augue consectetur interdum. Donec hendrerit imperdiet. Mauris eleifend fringilla nullam aenean mi ligula.</p>
                     </div>
                  </section>
                  <section class="spotlight">
                     <div class="image"><img src="<?= $view->getThemePath() ?>/images/pic02.jpg" alt="" /></div><div class="content">
                        <h2>Tortor dolore feugiat<br />
                        elementum magna</h2>
                        <p>Aliquam ut ex ut augue consectetur interdum. Donec hendrerit imperdiet. Mauris eleifend fringilla nullam aenean mi ligula.</p>
                     </div>
                  </section>
                  <section class="spotlight">
                     <div class="image"><img src="<?= $view->getThemePath() ?>/images/pic03.jpg" alt="" /></div><div class="content">
                        <h2>Augue eleifend aliquet<br />
                        sed condimentum</h2>
                        <p>Aliquam ut ex ut augue consectetur interdum. Donec hendrerit imperdiet. Mauris eleifend fringilla nullam aenean mi ligula.</p>
                     </div>
                  </section>
               </section>
 
            <!-- Three -->
               <section id="three" class="wrapper style3 special">
                  <div class="inner">
                     <header class="major">
                        <h2>Accumsan mus tortor nunc aliquet</h2>
                        <p>Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend<br />
                        fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper.</p>
                     </header>
                     <ul class="features">
                        <li class="icon fa-paper-plane-o">
                           <h3>Arcu accumsan</h3>
                           <p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
                        </li>
                        <li class="icon fa-laptop">
                           <h3>Ac Augue Eget</h3>
                           <p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
                        </li>
                        <li class="icon fa-code">
                           <h3>Mus Scelerisque</h3>
                           <p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
                        </li>
                        <li class="icon fa-headphones">
                           <h3>Mauris Imperdiet</h3>
                           <p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
                        </li>
                        <li class="icon fa-heart-o">
                           <h3>Aenean Primis</h3>
                           <p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
                        </li>
                        <li class="icon fa-flag-o">
                           <h3>Tortor Ut</h3>
                           <p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
                        </li>
                     </ul>
                  </div>
               </section>
 
            <!-- CTA -->
               <section id="cta" class="wrapper style4">
                  <div class="inner">
                     <header>
                        <h2>Arcue ut vel commodo</h2>
                        <p>Aliquam ut ex ut augue consectetur interdum endrerit imperdiet amet eleifend fringilla.</p>
                     </header>
                     <ul class="actions vertical">
                        <li><a href="<?= $view->getThemePath() ?>/#" class="button fit special">Activate</a></li>
                        <li><a href="<?= $view->getThemePath() ?>/#" class="button fit">Learn More</a></li>
                     </ul>
                  </div>
               </section>
 
            <!-- Footer -->
               <footer id="footer">
                  <ul class="icons">
                     <li><a href="<?= $view->getThemePath() ?>/#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                     <li><a href="<?= $view->getThemePath() ?>/#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                     <li><a href="<?= $view->getThemePath() ?>/#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
                     <li><a href="<?= $view->getThemePath() ?>/#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
                     <li><a href="<?= $view->getThemePath() ?>/#" class="icon fa-envelope-o"><span class="label">Email</span></a></li>
                  </ul>
                  <ul class="copyright">
                     <li>© Untitled</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
                  </ul>
 
               </footer>
 
         </div>
 
      <!-- Scripts -->
         <script src="<?= $view->getThemePath() ?>/js/jquery.min.js"></script>
         <script src="<?= $view->getThemePath() ?>/js/jquery.scrollex.min.js"></script>
         <script src="<?= $view->getThemePath() ?>/js/jquery.scrolly.min.js"></script>
         <script src="<?= $view->getThemePath() ?>/js/skel.min.js"></script>
         <script src="<?= $view->getThemePath() ?>/js/util.js"></script>
         <!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
         <script src="<?= $view->getThemePath() ?>/js/main.js"></script>
<?php Loader::element('footer_required') ?>
   </body>
</html>

1 Attachment

MrKDilkington replied on Nov 28, 2015 at 1:54 pm Permalink Reply

Hi pk004233,

It looks like you did not close <div class="<?= $c->getPageWrapperClass() ?>">.

That page wrapper class adds padding-top to push everything down to make room for the toolbar.

div.ccm-page {
    padding-top: 49px !important;
}

pk004233 replied on Nov 29, 2015 at 6:08 am Permalink Reply

Hi, really appreciate your reply! I've tried adding the close class statement in but can't find the logical place to put it. Can you help with that? Where should it go?

Kindest regards

MrKDilkington replied on Nov 29, 2015 at 8:59 am Permalink Reply

@pk004233

Try adding the closing div tag on line 167. This is the line right before your "Scripts" comment.

This will enclose the contents of your site, allowing the CSS to push it down.

Forums

Editing (v7+)

Toolbar at top of page not working (it's there just not working)

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?