Styled the blog rotator.

diff --git a/Toolkit/Page.php b/Toolkit/Page.php
index ede62cb..b26921f 100755 (executable)
--- a/Toolkit/Page.php
+++ b/Toolkit/Page.php
@@ -366,6 +366,12 @@ class Toolkit_Page
         } else {
             $this->isHomePage = false;
         }
+        
+        if($this->isHomePage) {
+            $GLOBALS['bottomScripts'][] = $this->glmAppBaseURL . "libjs/plugins/cycle/2.73/jquery.cycle.all.min.js";
+            $GLOBALS['bottomScripts'][] = $this->baseURL . "libjs/blogRotate.js";
+        }
+        
         if ($this->_catid != HOME_ID) {
             $this->parentPageId = $this->_pageGateway->findTopParent($this->_catid);
             $this->pageId = $this->_catid;

diff --git a/libjs/blogRotate.js b/libjs/blogRotate.js
new file mode 100755 (executable)
index 0000000..62aac48
--- /dev/null
+++ b/libjs/blogRotate.js
@@ -0,0 +1,10 @@
+$(document).ready(function(){
+    $('#blog_wrapper').cycle({
+        fx: 'scrollHorz',
+        pause: 1,
+        timeout: 7000,
+        next: '#prev-blog',
+        prev: '#next-blog',
+        rev: 1
+    });
+});
\ No newline at end of file

diff --git a/styles.css b/styles.css
index dabe396..346246d 100755 (executable)
--- a/styles.css
+++ b/styles.css
@@ -715,17 +715,32 @@ header {
        text-indent: -9000px;
        background: url(assets/go.gif) no-repeat;
 }
-#action2 #blog_wrapper {
+#action2 h2 {
+       display: block;
+       font-size: 22px;
+       font-size: 2.2rem;
+       padding-top: 20px;
+       padding-left: 16px;
+}
+#action2 #blog_wrapper_outer {
        float: right;
        margin: 30px 30px 20px 0;
-       padding: 0 12px 10px 20px;
        width: 410px;
-       overflow: hidden;
+       height: 166;
 }
-#action2 #blog_wrapper h2 {
-       font-size: 22px;
-       font-size: 2.2rem;
-       padding-top: 0;
+#action2 #blog_wrapper {
+       float: right;
+       width: 410px;
+       margin: 0;
+       padding: 0;
+       position: relative;
+       height: 140px;
+}
+#action2 #blog_wrapper article {
+       display: block;
+       width: 96%;
+       padding: 0px 2%;
+       height: 140px;
 }
 #action2 #blog_wrapper p.blog_date {
        color: #000;
@@ -750,6 +765,49 @@ header {
        margin-top: 5px;
        padding-top: 5px;
 }
+#action2 #blog_wrapper_outer {
+       float: right;
+       width: 410px;
+       margin: 0 30px 20px 0;
+       height: 166px;
+       position: relative;
+}
+#blog_wrapper_outer #prev-blog {
+       font-family: Arial, Helvetica, sans-serif;
+       position: absolute;
+       z-index: 25;
+       background: #B8C728;
+       width: auto;
+       bottom: 0;
+       left: 2%;
+       height: 26px;
+       cursor: pointer;
+       background: #8A1E03;
+       border: 2px solid #FFF;
+       border-radius: 6px;
+       color: #FFF;
+       font-weight: bold;
+       text-transform: uppercase;
+       padding: 3px 8px;
+}
+#blog_wrapper_outer #next-blog {
+       font-family: Arial, Helvetica, sans-serif;
+       position: absolute;
+       z-index: 25;
+       background: #B8C728;
+       width: auto;
+       bottom: 0;
+       right: 2%;
+       height: 26px;
+       cursor: pointer;
+       background: #8A1E03;
+       border: 2px solid #FFF;
+       border-radius: 6px;
+       color: #FFF;
+       font-weight: bold;
+       text-transform: uppercase;
+       padding: 3px 8px;
+}
 /* Photo Gallery */
 .gallery {
        list-style: none;

diff --git a/templates/template.html b/templates/template.html
index aef9625..cd45179 100755 (executable)
--- a/templates/template.html
+++ b/templates/template.html
@@ -154,14 +154,19 @@
                                                        <p>Now open - the <a href="baseurl/shop-4/">MichiganTrailMaps.com Trail Shop</a> with personally autographed books by the authors that wrote them! It's the best and most affordable way to purchase maps and trail guides to Michigan.</p>
                                                        <a id="goToShop" href="baseurl/shop-4/">Go</a>
                                                </div><!--/#trailshop_wrapper-->
-                                               <div id="blog_wrapper">
-                                                       <h2>Trail Talk Blog</h2>
-                            <article flexy:foreach="feed,item">
-                                <p class="blog_date">{item.getPubdateFormated(#D, F j, Y g:iA#)}</p>
-                                <a class="blog_link" href="{item.getGuid():h}">{item.getTitle()}</a>
-                                <p class="blog_desc">{item.getDescription():h}</p>
-                            </article>
-                                               </div><!--/#blog_wrapper-->
+                                               <h2>Trail Talk Blog</h2>
+                                               <div id="blog_wrapper_outer">
+                                                       <div id="blog_wrapper">
+                                                               <article flexy:foreach="feed,item">
+                                                                       <p class="blog_date">{item.getPubdateFormated(#D, F j, Y g:iA#)}</p>
+                                                                       <a class="blog_link" href="{item.getGuid():h}">{item.getTitle()}</a>
+                                                                       <p class="blog_desc">{item.getDescription():h}</p>
+                                                               </article>
+                                                               
+                                                       </div><!--/#blog_wrapper-->
+                                                       <div id="prev-blog">Prev</div>
+                                                       <div id="next-blog">Next</div>
+                                               </div>
                                        </div><!--/#action2-->
                                </div><!--/hHlines_wrapper-->
                        </div><!--/#content-->