Changeset 488

Timestamp:

08/24/07 14:35:33 (14 months ago)

Author:

oliver

Message:

 

Location:

trunk/themes/air

Files:

• album.php (modified) (3 diffs)
• collection.php (modified) (3 diffs)
• collections.php (modified) (2 diffs)
• comments.php (modified) (1 diff)
• explorer.css (modified) (2 diffs)
• footer.php (modified) (1 diff)
• gallery.css (modified) (28 diffs)
• header.php (modified) (1 diff)
• meta.php (modified) (1 diff)
• picture.php (modified) (3 diffs)
• search.php (modified) (3 diffs)
• slideshow.php (modified) (2 diffs)

trunk/themes/air/album.php

@@ -10 +10 @@
 
                 <?php plogger_load_picture();
-                // set variables for the album
+                // set variables for the thumbnails
                 $capt = plogger_get_picture_caption();
                 // find thumbnail width
@@ -34 +34 @@
         <?php else : ?>
 
-        <div id="no-pictures-msg">There are no pictures in this album.</div>
+        <p id="no-pictures-msg">There are no pictures in this album.</p>
 
         <?php endif; ?>
@@ -40 +40 @@
 </div>
 
-
 <?php plogger_get_footer(); ?>

trunk/themes/air/collection.php

@@ -1 +1 @@
 <?php plogger_get_header(); ?>
 
-<div id="thumbnail-container">
+<div id="thumbnail-container" class="clearfix">
 
 <?php if (plogger_has_albums()) : ?>
@@ -16 +16 @@
                 ?>
                 
-                <div class="collection"><a href="<?php echo plogger_get_album_url(); ?>">
-
-                <?php // generate XHTML with thumbnail and link to picture view ?>
-                <img class="photos" src="<?php echo plogger_get_album_thumb(); ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a>
+                <div class="collection">
+                
+                <a class="collection-image-link" href="<?php echo plogger_get_album_url(); ?>"><img class="photos" src="<?php echo plogger_get_album_thumb(); ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a>
 
                         <h2><a href="<?php echo plogger_get_album_url(); ?>"><?php echo $name; ?></a></h2>
@@ -37 +36 @@
         <?php else : ?>
 
-        <p>No albums yet</p>
+        <p id="no-pictures-msg">No albums yet.</p>
 
         <?php endif; ?>

trunk/themes/air/collections.php

@@ -18 +18 @@
                 <div class="collection">
                 
-                <a href="<?php echo plogger_get_collection_url(); ?>">
-                        
-                <?php // generate XHTML with thumbnail and link to album view ?>
-                <img class="photos" src="<?php echo plogger_get_collection_thumb(); ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a>
+                <a class="collection-image-link" href="<?php echo plogger_get_collection_url(); ?>"><img class="photos" src="<?php echo plogger_get_collection_thumb(); ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a>
 
                         <h2><a href="<?php echo plogger_get_collection_url(); ?>"><?php echo $name; ?></a></h2>
@@ -39 +36 @@
         <?php else : ?>
 
-        <p>No collections yet</p>
+        <p id="no-pictures-msg">No collections yet.</p>
 
         <?php endif; ?>

trunk/themes/air/comments.php

@@ -55 +55 @@
                         <br /><textarea name="comment" id="comment" cols="70" rows="4" tabindex="4"></textarea>
                       </p>
-                      <p class="inputbuttonp">
+                      <p class="comment-input-button">
                         <input class="submit" name="submit" type="submit" tabindex="5" value="Post Comment" />
                       </p>

trunk/themes/air/explorer.css

@@ -1 +1 @@
 #breadcrumbs {
-        margin: 15px 0 10px; /* IE 6 */
-        height: 20px; /* IE 6 */
+        height: 24px; /* IE 6 */
 }
-b.bl {bottom: -1px; left: -1px; background: url(images/bg-bl.gif) no-repeat; }
-b.br {bottom: -1px; right: -1px; background: url(images/bg-br.gif) no-repeat; }
-#thumbnail-container, #big-picture-container {
-        margin: 20px 0 0; /* IE 6 */
-        padding: 0;
+a:visited {
+        color: #01B4E2;
 }
 .collection a {
-        float: left;
-        margin: 0px 15px 0px 0px;
-        padding: 0px;
         display: inline;
         background: #fff;
 }
-.collection img {
+.collection h2 {
+        display: block;
+        height: 20px;
+}
+.collection h2 a, .collection h2 a:visited {
+        border: none;
+        color: #01B4E2;
+        display: block;
+}
+.collection h2 a:hover {
+        border: none;
+}
+.collection input {
+        float: left;
+        display: block;
+}
+.meta-header {
+        display: block;
+        height: 20px;
+        padding: 4px 0 0 0;
+}
+.collection img, ul.slides li img, #thumb-nav li img {
         margin: 0px;
+        border: none;
+}
+#thumb-nav li img {
+        margin: 4px 0 0 0;
 }
 li.thumbnail a, .collection a, #picture-holder a, #thumb-nav a {
@@ -26 +44 @@
 li.thumbnail a:hover, .collection a:hover, #picture-holder a:hover, #thumb-nav a:hover {
 /*      border: 1px solid #b3b6b0; */
-        border: 1px solid #01B4E2;
+        border: 1px solid #ff6600;
 }
-
-#sort-control p {
-        font-size: 1.1em; /* IE 6 */
-        display: inline;
+#sort-control {
+        width: 330px;
 }
+#download-selected input.submit {
+        background: #fff url(images/carrot_sel3.gif) no-repeat 0 50%;
+}

trunk/themes/air/footer.php

@@ -1 +1 @@
 
 
-<div id="footer">
+<div id="footer" class="clearfix">
 
         <?php if (plogger_pagination_control() != '') { ?>

trunk/themes/air/gallery.css

@@ +1 @@
+
+                                        /* Begin general styles for all pages */
+
 * {
         margin: 0;
@@ -4 +7 @@
 }
 body {
+        /* body contains and controls all visible elements of the entire page, this is where you want to set things like the background of the page */
         margin: 0;
         padding: 0 0 25px 0;
@@ -12 +16 @@
 }
 img {
+        /* img controls anything that all of the images have in common; in this case, we make sure no images have borders (we can add borders to specific images later) */
         border: 0;
 }
 a:link, a:visited {
+        /* a:link, a:visited control the default link behavior for all of the links on the page (but most of the link behaviors are changed later in the CSS) */
         color: #7f807b;
         text-decoration: none;
 }
 a:hover {
+        /* a:hover controls the default hover behavior of all links */
         color: #404040;
 }
 #wrapper {
+        /* #wrapper contains the entire content of the page; this is where one would center the page content, and give it a definite width, this is also where one would put borders around the content of the page */ 
         margin: 0 auto 0;
-        width: 800px;
+        width: 800px; /* any change to this width requires changes to the widths of .collection and #footer as well */
         position: relative;
 }
 #header {
+        /* #header contains the gallery name, the search box, and the breadcrumbs */
         text-align: left;
 }
 #header p {
+        /* one can edit header.php, within the commented <p></p> tags, to add a few words below the breadcrumbs, in which case this controls that text */
         clear: both;
         margin: 6px 25px;
         text-align: center;
         font-size: 1.2em;
-        /* allows you to add a few words below the breadcrumbs */
 }
 #gallery-name {
+        /* #gallery-name controls the name of the gallery */
         float: left;
         margin: 20px 0 0 0;
@@ -42 +52 @@
         color: #01B4E2;
         font-size: 2em;
-        font-family: "Century Gothic", "Lucida Grande", Verdana, Arial, sans-serif; /* Resets 1em to 10px */
+        font-family: "Century Gothic", "Lucida Grande", Verdana, Arial, sans-serif;
 }
 #search-container {
+        /* #search-container contains the seach box and the search button */
         float: right;
         white-space: nowrap;
@@ -51 +62 @@
 }
 #search-container input {
+        /* #search-container input is the search input box */
         border: 2px solid #4dc4e6;
         float: left;
@@ -57 +69 @@
 }
 #search-container input.submit {
+        /* #search-container input.submit is the search button */
         width: 82px;
         height: 30px;
@@ -66 +79 @@
 }
 #breadcrumbs {
+        /* #breadcrumbs contains the breadcrumbs */
         clear: both;
         margin: 0;
@@ -75 +89 @@
 }
 #breadcrumb_links {
+        /* #breadcrumb_links controls the breadcrumbs text that isn't a link */
         float: left;
         display: inline;
@@ -80 +95 @@
 }
 #breadcrumb_links a {
+        /* #breadcrumb_links a controls the breadcrumbs text that is a link */
         color: #fff;
         text-decoration: underline;
 }
 #breadcrumb_links a:hover, #slideshow a:hover {
+        /* #breadcrumb_links a:hover, #slideshow a:hover a controls hover behavior of the breadcrumbs text that is a link */
         color: #fff;
         text-decoration: none;
 }
 #slideshow a {
+        /* #slideshow a controls the text of the View as Slideshow link */
         float: right;
         display: inline;
@@ -94 +112 @@
         text-decoration: underline;
 }
+#no-pictures-msg {
+        /* #no-pictures-msg controls the "no collections", "no albums", and "no picture" messages displayed when a visitor goes to a page without collections, albums, or a picture */
+        margin: 0 0 200px;
+        padding: 80px 0;
+        font-size: 1.4em;
+        text-align: center;
+}
+.checkbox {
+        /* .checkbox controls the appearance of the checkbox on all pages */
+        clear: both;
+        margin: 4px auto 0;
+        padding: 0;
+}
+
+
+                                        /* Begin collection and album page styles */
+
 #thumbnail-container {
-        margin: 10px 0 0;
+        /* #thumbnail-container contains the entire list of all collections or the entire list of all albums, as appropriate */
+        margin: 0;
         padding: 0;
 }
 #collections {
+        /* #collections contains the entire list of all collections or the entire list of all albums, as appropriate (yes, it's redundant to #thumbnail-container) */
 }
 .collection {
-        margin: 0 0 10px 0;
-        padding: 10px 25px;
-        float: left;
-        display: inline;
+        /* .collection contains each individual collection or album in the list, as appropriate */
+        margin: 10px 0 0 0;
+        padding: 10px 0;
+        float: left;
         text-align: left;
         border: 1px solid #bed2d2;
-        width: 748px;
-}
-.collection img {
+        width: 798px; /* set this width to be 2px less than the width of #wrapper to account for borders */
+}
+.collection-image-link {
+        margin: 0 0 0 25px;
         border: 1px solid #01B4E2;
+        display: block;
         float: left;
         margin-right: 15px;
         padding: 3px;
-        display: inline;
+}
+.collection-image-link:hover {
+        border: 1px solid #ff6600;
+}
+.photos {
+        /* .photos controls the thumbnail picture on the collection(s) and album pages */
+        vertical-align: bottom; /* firefox hack to remove the gap below images surrounded by an anchor */
+}
+.collection p {
+        /* .collection p controls the collection or album description */
+        margin: 4px 0 0 0;
+        line-height: 1.5em;
+}
+.collection h2 {
+        /* .collection h2 controls the collection or album title */
+        margin: 5px 0;
+        padding: 0;
+        font-size: 1.4em;
+}
+.collection h2 a {
+        /* .collection h2 controls the link behavior of the collection or album title */
+        color: #01B4E2;
+}
+.collection h2 a:hover {
+        /* .collection h2:hover controls the hover behavior of the collection or album title */
+        color: #ff6600;
+}
+.meta-header {
+        /* .meta-header controls the "Contains X Albums" or "Contains X Pictures" text */
+        margin: 0;
+        padding: 0;
+        color: #404040;
+        font-size: 90%;
+}
+.thumbnail p {
+        /* .thumbnail p controls the description of the Collection or Album, as appropriate */
+        /* width is equal to the width of the thumbnail image, set inline in album.php */
+        padding: 0 6px;
+        margin: 4px 0 0 0;
+        line-height: 1.2em;
+        font-weight: bold;
+        height: 2.5em;
+        overflow: hidden;
+}
+
+                                        /* Begin album page styles */
+
+ul.slides {
+        /* ul.slides controls the unordered list of the thumbnails of images within an album */
+        margin: 10px 0 0 0;
+        padding: 0;
+        border: 1px solid #bed2d2;
+}
+ul.slides li {
+        /* ul.slides li controls each list item within the unordered list of the thumbnails of images within an album */
+        /* width is calculated by PHP in the HTML, style is applied inline */
+        float: left;
+        margin: 0 0 0 13px;
+        padding: 10px;
+        display: inline;
+        text-align: center;
+}
+ul.slides li img {
+        /* ul.slides li img controls the thumbnail image itself */
+        border: 1px solid #01B4E2;
         background: #fff;
-}
-.collection img:hover {
+        padding: 3px;
+}
+ul.slides li a {
+        /* ul.slides li a controls the thumbnail image link behavior */
+        display: block; /* display:block required to make anchor tag's border surround img in Firefox */
+}
+ul.slides li img:hover {
+        /* ul.slides li img:hover controls the thumbnail image hover behavior */
         background: #eaeae0;
         border: 1px solid #ff6600;
 }
-.collection p {
-        margin: 4px 0 0 0;
-        line-height: 1.5em;
-}
-.collection h2 {
-        margin: 5px 0;
-        padding: 0;
-        font-size: 1.4em;
-}
-.collection h2 a {
-        color: #01B4E2;
-}
-.collection h2 a:hover {
-        color: #ff6600;
-}
-/* Begin Large Picture Page Section */
+
+                                        /* Begin "picture" page styles */
+
 #big-picture-container {
+        /* #big-picture-container contains the picture, the prev/next buttons, the camera details and the thumbnail nav (if enabled) */
         border: 1px solid #bed2d2;
         margin: 10px 0 10px 0;
         padding: 10px 0 20px 0;
 }
-#picture-caption {
-        /* ideally, no padding and width is equal THUMB_LARGE image     
-        padding: 0 80px;
- */
+.picture-title {
+        /* .picture-title controls the picture title */
         width: 70%;
         margin: 0 auto 6px;
+        text-align: center;
         font-size: 1.3em;
-        text-align: center;
         color: #4b4c57;
 }
 .date {
+        /* .date controls the picture date */
         width: 70%;
         margin: 0 auto 0;
         text-align: center;
         font-size: 1.1em;
+        color: #8689a2;
         letter-spacing: 1px;
-        color: #8689a2;
-}
-#prev-link-container {
-        width: 15%;
-        text-align: left;
-}
-#next-link-container {
-        width: 15%;
-        text-align: right;
 }
 #nav-link-img-prev, #nav-link-img-next {
+        /* #nav-link-img-prev, #nav-link-img-next control those elements that both the prev and next buttons have in common */
         margin: 5px 0 0;
         padding: 6px 15px;
@@ -174 +263 @@
 }
 #nav-link-img-prev {
+        /* #nav-link-img-prev controls the prev button */
         float: left;
         display: inline;
 }
 #nav-link-img-next {
+        /* #nav-link-img-next controls the next button */
         float: right;
         display: inline;
 }
 #nav-link-img-prev a {
+        /* #nav-link-img-prev a controls the text of the prev button */
         border: 1px solid #fff;
         padding: 5px 15px;
@@ -187 +279 @@
 }
 #nav-link-img-next a {
+        /* #nav-link-img-next a controls the text of the next button */
         border: 1px solid #fff;
         padding: 5px 15px;
@@ -192 +285 @@
 }
 #nav-link-img-prev a:hover, #nav-link-img-next a:hover {
+        /* #nav-link-img-prev a:hover, #nav-link-img-next a:hover controls the common link behavior of the prev/next buttons  */
         border: 1px solid #039acb;
         background: #01B4E2 url(images/blue-gradient.gif) repeat-x;
@@ -197 +291 @@
 }
 #picture-holder {
+        /* #picture-holder contains the picture */
         clear: both;
         margin: 10px 0 0 0;
 }
-#picture-holder a img {
-        margin: 4px;
+.photos-large {
+        /* .photos-large controls the picture itself */
+        margin: 0 0 20px 0;
         padding: 3px;
         background: #fff;
@@ -207 +303 @@
 }
 #picture-holder a:hover {
+        /* #picture-holder a:hover controls the hover behavior of the picture itself */
         white-space: normal;
 }
 #picture-description {
+        /* #picture-description controls the picture's description */
+        width: 80%;
         margin: 6px auto 6px;
-        padding: 0 80px;
-        /* ideally, no padding, but width equal to THUMB_LARGE image */
         text-align: center;
         font-size: 1.1em;
 }
+
+                                        /* exif stuff is for the 'camera details' table */
+
 #exif_toggle {
         margin: 0 0 20px 0;
@@ -231 +331 @@
         padding: 0 20px;
 }
+
+                                        /* Begin thumbnail navigation styles */
+                                        
+#thumb-nav {
+        /* #thumb-nav controls the unordered list that comprises the thumbnail navigation */
+        list-style-type: none;
+        margin: 25px;
+}
+#thumb-nav li {
+        /* #thumb-nav li controls each unordered list item that comprises the thumbnail navigation button */
+        float: left;
+        margin: 0 10px 0 0;
+}
+#thumb-nav li img {
+        /* #thumb-nav li img controls the image within each unordered list item that comprises the thumbnail navigation button */
+        border: 1px solid #01B4E2;
+        padding: 3px;
+        display: inline;
+        background: #fff;
+}
+#thumb-nav li img:hover {
+        /* #thumb-nav li img:hover controls the hover behavior of the image within each unordered list item that comprises the thumbnail navigation button, wheee! */
+        background: #eaeae0;
+        border: 1px solid #ff6600;
+}
+
+                                        /* Begin comment styles */
+
 #comment-section {
+        /* #comment-section contains the comments, the "post a comment" input fields, and the submit button */
         margin: 10px 25px 10px 25px;
         clear: both;
@@ -237 +366 @@
 }
 .comment-heading {
+        /* .comment-heading controls the "Comments:" and "Post a comment:" headings */
         margin: 12px 0 0 0;
         font-size: 1.4em;
 }
-#thumb-nav {
-        list-style-type: none;
-        margin: 25px;
-}
-#thumb-nav li {
-        float: left;
-        margin: 0 10px 0 0;
-}
-#thumb-nav li img {
-        border: 1px solid #01B4E2;
-        padding: 3px;
-        display: inline;
-        background: #fff;
-}
-#thumb-nav li img:hover {
-        background: #eaeae0;
-        border: 1px solid #ff6600;
-}
-/* test the following stuff */
 #comment-section form p {
+        /* #comment-section form p contains the "post a comment" input fields */
         margin: 6px 0;
 }
 .comment, .comment_alt {
+        /* .comment, .comment_alt control those elements that all comments have in common */
         border-top: 1px solid #dfded6;
         margin: 0;
@@ -269 +382 @@
 }
 .comment_alt {
+        /* .comment_alt controls those elements that every other comment has in common, eg: a different colored background */
         background: #effbfb;
 }
 .comments p {
+        /* .comments p controls paragraphs within each comment */
         margin: 0;
         font-size: 1.1em;
@@ -278 +393 @@
 }
 .comments cite {
+        /* .comments cite controls the "Comment by So-and-so - Posted on DATE" text */
         margin-top: 8px;
         padding: 5px 5px 5px 23px;
@@ -288 +404 @@
 }
 .comments-closed {
+        /* .comments-closed controls the "Comments closed." message if comments are disabled */
         color: #996;
         text-align: center;
 }
-/* End Large Picture Page Section */
-
-#no-pictures-msg {
-        margin: 0 0 200px;
-        padding: 80px 0;
-        font-size: 1.4em;
-        text-align: center;
-}
-
-#rss-image {
-        margin: 0;
-        padding: 0;
-        display: inline;
-}
-
+.comment-input-button input {
+        /* .comment-input-button input controls the "Post Comment" submit button */
+        padding: 2px 6px;