Implemented and styled the slideshow.

diff --git a/Toolkit/RotatingImages/config.ini b/Toolkit/RotatingImages/config.ini
index d5d582d..4f9724f 100644 (file)
--- a/Toolkit/RotatingImages/config.ini
+++ b/Toolkit/RotatingImages/config.ini
@@ -3,8 +3,8 @@
 applicationName = "Homepage Slideshow"
 useTitles = On
 hasPrevNextLinks = Off
-width = 505
-height = 303
+width = 990
+height = 260
 
 ; time between the fades in milliseconds
 [rotation time]

diff --git a/assets/nivo-caption-bg.png b/assets/nivo-caption-bg.png
new file mode 100755 (executable)
index 0000000..e099728
Binary files /dev/null and b/assets/nivo-caption-bg.png differ

diff --git a/styles.css b/styles.css
index 2560c9a..bf2c498 100755 (executable)
--- a/styles.css
+++ b/styles.css
@@ -266,6 +266,33 @@ ul#mainnav li a:hover {
     height: 260px;
     overflow: hidden;
 }
+#slideshow_wrapper .theme-default .nivo-controlNav {
+    display: block;
+    position: absolute;
+    z-index: 50;
+    top: 10px;
+    right: 10px;
+    padding: 0;
+}
+#slideshow_wrapper .theme-default .nivo-controlNav a {
+    display: block;
+    float: left;
+    width: 12px;
+    height: 12px;
+    background: #FFF;
+    border-radius: 12px;
+}
+#slideshow_wrapper .theme-default .nivo-controlNav a.active {
+    background: #102F4E;
+}
+#slideshow_wrapper .theme-default .nivo-caption {
+       background: url(assets/nivo-caption-bg.png) 0 0 no-repeat !important;
+       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+       filter: alpha(opacity=100);
+       -moz-opacity: 1;
+       -khtml-opacity: 1;
+       opacity: 1;
+}
 /* Reservations */
 #reservation_wrapper {
     width: 990px;

diff --git a/templates/template.html b/templates/template.html
index aa209f8..2304126 100755 (executable)
--- a/templates/template.html
+++ b/templates/template.html
@@ -36,7 +36,8 @@
         </div><!--/#header-->
         <div id="main">
             <div id="slideshow_wrapper">
-                <img src="baseurl/assets/TMP_slideshow_1.jpg" width="990" height="260">
+                {if:rotatingImages}{rotatingImages:h}{end:}
+                <!--<img src="baseurl/assets/TMP_slideshow_1.jpg" width="990" height="260">-->
             </div><!--/#slideshow_wrapper-->
             <div id="reservation_wrapper">
                 Reservation Widget Here