Toolbox.html template

Update the template for the toolbox output include section
links.
fix left right images
style updates.

diff --git a/Toolkit/Template/Image/Left.php b/Toolkit/Template/Image/Left.php
index 81eb650..e49c8c8 100644 (file)
--- a/Toolkit/Template/Image/Left.php
+++ b/Toolkit/Template/Image/Left.php
@@ -45,14 +45,15 @@ class Toolkit_Template_Image_Left extends Toolkit_Template_Image_ImageAbstract
        {
                $imageData = $this->_adapter->getImageSize($size . $this->_src);
 
-               $html  = '<figure>';
+               $html  = '<div class="left small-12 medium-4 columns">'
+            . '<figure>';
                $html .=        parent::getImage($size);
                if (!empty($this->_caption)) {
                        $html .=        '<figcaption>';
                        $html .=                $this->_caption;
                        $html .=        '</figcaption>';
                }
-               $html .= '</figure>';
+               $html .= '</figure></div>';
 
                return $html;
        }

diff --git a/Toolkit/Template/Image/Right.php b/Toolkit/Template/Image/Right.php
index c115068..057fce6 100644 (file)
--- a/Toolkit/Template/Image/Right.php
+++ b/Toolkit/Template/Image/Right.php
@@ -45,14 +45,14 @@ class Toolkit_Template_Image_Right extends Toolkit_Template_Image_ImageAbstract
        {
                $imageData = $this->_adapter->getImageSize($size . $this->_src);
 
-               $html  = '<figure>';
+               $html  = '<div class="right small-12 medium-4 columns"><figure>';
                $html .=        parent::getImage($size);
                if (!empty($this->_caption)) {
                        $html .=        '<figcaption>';
                        $html .=                $this->_caption;
                        $html .=        '</figcaption>';
                }
-               $html .= '</figure>';
+               $html .= '</div></figure>';
 
                return $html;
        }

diff --git a/js/pageSetup.js b/js/pageSetup.js
index c1f4f79..6398f55 100644 (file)
--- a/js/pageSetup.js
+++ b/js/pageSetup.js
@@ -4,5 +4,5 @@ $(document).ready(function() {
         $(this).toggleClass('open');
         $(this).siblings('ul').toggleClass('open');
     });
-    $("#main .row .small-12 p").attr("class", "small-12 columns");
+    //$("#main .row .small-12 p").attr("class", "small-12 columns");
 });
\ No newline at end of file

diff --git a/styles.css b/styles.css
index 2a63fa2..6f44f0a 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -404,7 +404,7 @@ nav.top-bar .top-bar-section > ul > li .dropdown {
   background-position: 20px 20px;
 }
 nav.top-bar .top-bar-section > ul > li .dropdown li {
-  width: auto;
+  /*width: auto;*/
   white-space: nowrap;
   background: white !important;
 }
@@ -421,7 +421,7 @@ nav.top-bar .top-bar-section > ul > li .dropdown li a:not(.has-form), nav.top-ba
   color: black;
 }
 nav.top-bar .top-bar-section > ul > li .dropdown li a:hover {
-  color: #f27225 !important;
+  color: #25c2e6 !important;
 }
 nav.top-bar .top-bar-section > ul > li .dropdown li a#active {
   color: #25c2e6;
@@ -606,13 +606,15 @@ aside.right-off-canvas-menu ul.off-canvas-list li > ul.open {
   text-align: center;
   margin: 0 auto 20px auto;
 }
-
 .container#interior #main {
   background-color: white;
   padding: 0 20px 20px 20px;
 }
+.mainNavLiImgContainer img {
+    position: absolute; left: 19px; top: 19px; border: solid 1px orange;
+}
 .container#interior #main h1, .container#interior #main h2 {
-  width: auto;
+  width: 100%;
   margin-top: 0;
   margin-bottom: 20px;
   clear: right;
@@ -628,16 +630,29 @@ aside.right-off-canvas-menu ul.off-canvas-list li > ul.open {
   margin-bottom: 20px;
 }
 .container#interior #main > div {
-  float: left;
+  /*float: left;*/
   width: auto;
 }
 .container#interior #main > div p {
   margin-bottom: 10px;
-  float: left;
+  text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
+  /*float: left;*/
+  font-size: 14px;
+  line-height: 130%;
 }
 .container#interior #main img {
   margin-bottom: 15px;
 }
+.container#interior #main figure img {
+    margin-bottom: 0;
+}
+.container#interior #main > div figcaption {
+    background-color:  #f27225;
+    padding: 10px;
+    margin-bottom: 15px;
+    color: white;
+    font-weight:bold;
+}
 .container#interior .breadcrumbs {
   border: none;
   border-radius: 0px;
@@ -668,7 +683,10 @@ aside.right-off-canvas-menu ul.off-canvas-list li > ul.open {
 #main a:hover {
   color: #25c2e6;
 }
-
+ul#paragraphLinks li {
+    font-size: 14px;
+    padding-bottom: 15px;
+}
 /* Homepage Video */
 #home_video_wrapper {
 /*     float: left;*/
@@ -904,7 +922,7 @@ footer > .columns {
     margin: 0 auto !important;
   }
 }
-@media only screen and (max-width: 40.063em) { 
+@media only screen and (max-width: 40.063em) {
   .play {
       background: none;
   }

diff --git a/templates/toolbox.html b/templates/toolbox.html
index fd335a9..33be442 100644 (file)
--- a/templates/toolbox.html
+++ b/templates/toolbox.html
@@ -1,24 +1,27 @@
+<div id="toolbox"></div>
 {if:isHomePage}
     <!-- ######### Placeholder content ######### -->
     <h2 class="trees">{toolboxContent.primaryParagraph[title]}</h2>
     {toolboxContent.primaryParagraph[description]:h}
     <!-- ######### /Placeholder content ######### -->
 {else:}
+
     <!-- ######### Placeholder content ######### -->
     <div class="row">
+        <div class="small-12 columns" flexy:if="toolboxContent.primaryParagraph[links]">
+            {toolboxContent.primaryParagraph[links]:h}
+        </div>
         {if:toolboxContent.primaryParagraph[image]}
-        <div class="small-12 medium-4 columns">
             {toolboxContent.primaryParagraph[image]:h}
-        </div>
-        <div class="small-12 medium-8 columns">
-            <h2 class="left">{toolboxContent.primaryParagraph[title]}</h2>
-            {toolboxContent.primaryParagraph[description]:h}
-        </div>
+            <div class="small-12 medium-8 columns">
+                <h2 class="left text-left">{toolboxContent.primaryParagraph[title]}</h2>
+                {toolboxContent.primaryParagraph[description]:h}
+            </div>
         {else:}
-        <div class="small-12 columns">
-            <h2 class="left">{toolboxContent.primaryParagraph[title]}</h2>
-            {toolboxContent.primaryParagraph[description]:h}
-        </div>
+            <div class="small-12 columns">
+                <h2 class="left text-left">{toolboxContent.primaryParagraph[title]}</h2>
+                {toolboxContent.primaryParagraph[description]:h}
+            </div>
         {end:}
     </div>
 
@@ -42,25 +45,38 @@
     </div>
     {end:}
 
-
-    <div class="row" flexy:foreach="toolboxContent.secondaryParagraphs,section">
+    {foreach:toolboxContent.secondaryParagraphs,section}
+    <div class="row" id="sect-{section[id]}">
         {if:section[image]}
-        <div class="small-12 medium-4 columns">
             {section[image]:h}
-        </div>
-        <div class="small-12 medium-8 columns">
-            <h3>{section[title]}</h3>
-            {section[description]:h}
-            {section[files]:h}
-        </div>
+            <div class="small-12 medium-8 columns">
+                <h3>{section[title]}</h3>
+                {section[description]:h}
+            </div>
         {else:}
-        <div class="small-12 columns">
-            <h3>{section[title]}</h3>
-            {section[description]:h}
-            {section[files]:h}
-        </div>
+            <div class="small-12 columns">
+                <h3>{section[title]}</h3>
+                {section[description]:h}
+            </div>
         {end:}
+
     </div>
+        {if:section[files]}
+        <div class="row">
+            <div class="small-12 columns">
+                {section[files]:h}
+            </div>
+        </div>
+        {end:}
+        {if:section[back_to_top]}
+        <div class="row">
+            <div class="small-12 columns">
+                {section[back_to_top]:h}
+            </div>
+        </div>
+        {end:}
+    {end:}
+
     {if:toolboxContent.photos}
       {toolboxContent.photos:h}
     {end:}