Template:Team:Leeds TouchGalleryCSS

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <head> <style type="text/css"> .touchgallery{ position: relative; overflow: hidden; width: 350px; /* default gallery width */ height: 270px; - default gallery height: }...")
m
Line 24: Line 24:
display: block;
display: block;
text-align: center;
text-align: center;
 +
list-style: none;
}
}
.touchgallery ul li img{ /* CSS for images within gallery */
.touchgallery ul li img{ /* CSS for images within gallery */
-
max-height: 100%; /* make each image responsive, so its native width can occupy up to 100% of gallery's width, but not beyond */
+
max-height: 100%; /* make each image responsive, so its native height can occupy up to 100% of gallery's height, but not beyond */
-
width: auto;
+
width: auto; /* fiddle to work with wiki image resizing protocols */
}
}
 +
 +
/* May be worth disabling the bullets due to resized slide options for gallery making outside bullets useless */
.touchgallery .jumptodiv{ /* CSS for DIV that houses bullets that navigate to a specific image when clicked on */
.touchgallery .jumptodiv{ /* CSS for DIV that houses bullets that navigate to a specific image when clicked on */
Line 37: Line 40:
font-size: 1.5em;
font-size: 1.5em;
font-weight: bold;
font-weight: bold;
-
color: darkgreen;
+
color: #00cc00;
letter-spacing: 7px;
letter-spacing: 7px;
position:absolute;
position:absolute;
bottom: 0;
bottom: 0;
margin-top: 0;
margin-top: 0;
-
text-shadow: 0 1px 2px #8a8a8a;
+
text-shadow: 0 1px 2px #8a8a8a; /* subtle 3-D shadowing of bullets under images indicating number available to view */
}
}
.touchgallery .jumptodiv span.selected{ /* CSS for selected bullet inside jumptodiv */
.touchgallery .jumptodiv span.selected{ /* CSS for selected bullet inside jumptodiv */
-
color: darkred;
+
color: #bd0000;
}
}
</style>
</style>
</head>
</head>
</html>
</html>

Revision as of 13:30, 24 September 2013