"
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 |
||
| (One intermediate revision not shown) | |||
| 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 | + | 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: | + | color: #bd0000; |
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: | + | color: #00cc00; |
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> | ||
Latest revision as of 13:37, 24 September 2013
