class and wrapper div added to photo for aspect ratio display

testbubble theme styling for aspect ratio on photos

diff --git a/view/photo_album.tpl b/view/photo_album.tpl
index e3f2ba91cb16dff9becf234acb6767ee787f5df3..3ab9fe7235bbf11f26b774a63f12b2029cb7bb0e 100644 (file)
--- a/view/photo_album.tpl
+++ b/view/photo_album.tpl
@@ -3,6 +3,5 @@
                <img src="$imgsrc" alt="$imgalt" title="$phototitle" class="photo-album-photo lframe  resize" id="photo-album-photo-$id" />
                <p class='caption'>$desc</p>            
        </a>
-       
 </div>
 <div class="photo-album-image-wrapper-end"></div>

diff --git a/view/theme/testbubble/style.css b/view/theme/testbubble/style.css
index deae9ae58406383fcc8458170df5b280026dbe2e..85a01d0d26bb6b8e57f5272ebb4961454723e28e 100644 (file)
--- a/view/theme/testbubble/style.css
+++ b/view/theme/testbubble/style.css
@@ -1250,7 +1250,7 @@ div[id$="wrapper"] br { clear: left; }
 /* ========== */
 
 #side-bar-photos-albums li {
-       font-size: 1.2em;
+       font-size: 14px;
        font-variant: none;
 }
 
@@ -1279,14 +1279,30 @@ div[id$="wrapper"] br { clear: left; }
        background-color: #b20202;      
 }
 
-.photo-album-image-wrapper,
-.photo-top-image-wrapper { 
-       float: left; 
+.photo-album-image-wrapper { 
+       float: left;
        margin: 0px 10px 10px 0px;
        padding-bottom: 30px;
        position:relative;      
 }
 
+.photo-top-image-wrapper {
+       float: left;
+       width: 180px;
+       height: 180px;
+       margin: 0px 10px 10px 0px;
+       padding-bottom: 30px;
+       position:relative;
+}
+
+#photo-album-wrapper-inner {
+       position: relative;
+       float: left;
+       width: 180px;
+       height: 180px;
+       overflow: hidden;
+}
+
 #photo-photo { max-width: 100% }
 #photo-photo img { max-width: 100% }
 
@@ -1296,12 +1312,8 @@ div[id$="wrapper"] br { clear: left; }
        border-bottom: 0px; 
 }
 
-.photo-top-photo,
-.photo-album-photo {
-       width: 180px;
-       height: 180px;
-       overflow: hidden;
-}
+.photo-top-photo {}
+.photo-album-photo {} 
 
 .photo-top-album-name {
        position: absolute;
@@ -2216,7 +2228,7 @@ margin-left: 0px;
        display: inline;
        padding: 5px;
        margin-bottom: 10px;
-/*     -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
+       -moz-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
        -webkit-box-shadow:inset 0px 1px 0px 0px #cfcfcf;
        box-shadow:inset 0px 1px 0px 0px #cfcfcf;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bdbdbd), color-stop(1, #a2a2a2) );
@@ -2228,7 +2240,7 @@ margin-left: 0px;
        border-radius:5px;*/
 }
 
-/*.group-delete-wrapper:hover {
+.group-delete-wrapper:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
        background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
@@ -2245,7 +2257,7 @@ margin-left: 0px;
 .group-delete-wrapper a {
        color: #efefef;
        font-size: 0.9em;
-}*/
+}
 
 #group-edit-desc { margin: 10px 0xp; }
 #group-new-text {font-size: 1.1em;}