Changeset 17761

Timestamp:

04/29/2011 12:19:02 AM (15 years ago)

Author:

lancewillett

Message:

Twenty Eleven: style.css cleanup and Showcase template improvements, props matveb - see #17198

• Add full support for the featured slider powered by JS (except auto-slide)
• Change the title hover state of large stickies to white
• Prevent plain text posts from being displayed transparently over images
• Update slider featured image size to 500x300
• Add comment blocks to showcase.php

Location:

trunk/wp-content/themes/twentyeleven

Files:

• functions.php (modified) (1 diff)
• js/showcase.js (added)
• showcase.php (modified) (8 diffs)
• style.css (modified) (45 diffs)

trunk/wp-content/themes/twentyeleven/functions.php

@@ -129 +129 @@
 
         // Add Twenty Eleven's custom image sizes
-        add_image_size( 'large-feature', HEADER_IMAGE_WIDTH, 500, true ); // Used for large feature images
-        add_image_size( 'small-feature', 500, 500 ); // Used for featured posts if a large-feature doesn't exist
+        add_image_size( 'large-feature', HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true ); // Used for large feature images
+        add_image_size( 'small-feature', 500, 300 ); // Used for featured posts if a large-feature doesn't exist
 
         // Add a way for the custom header to be styled in the admin panel that controls

trunk/wp-content/themes/twentyeleven/showcase.php

@@ -4 +4 @@
  * Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts
  *
+ * The showcase template in Twenty Eleven consists of a featured posts section using sticky posts,
+ * another recent posts area (with the latest post shown in full and the rest as a list)
+ * and a left sidebar holding aside posts.
+ *
+ * We are creating two queries to fetch the proper posts and a custom widget for the sidebar.
+ *
  * @package WordPress
  * @subpackage Twenty Eleven
  */
 
+// Enqueue showcase script for the slider
+wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );
+
 get_header(); ?>
 
@@ -16 +25 @@
 
                                 <?php
-                                        // If we have content for this page, let's display it.
+                                        /**
+                                         * We are using a heading by rendering the_content
+                                         * If we have content for this page, let's display it.
+                                         */
                                         if ( '' != get_the_content() )
                                                 get_template_part( 'content', 'intro' );
@@ -22 +34 @@
 
                                 <?php
-                                        // See if we have any sticky posts and use the latest to create a featured post
+                                        /**
+                                         * Begin the featured posts section.
+                                         *
+                                         * See if we have any sticky posts and use them to create our featured posts.
+                                         */
                                         $sticky = get_option( 'sticky_posts' );
                                         $featured_args = array(
-                                                'posts_per_page' => 1,
+                                                'posts_per_page' => 4,
                                                 'post__in' => $sticky,
                                         );
 
+                                        // The Featured Posts query.
                                         $featured = new WP_Query();
                                         $featured->query( $featured_args );
 
+                                        /**
+                                         * We will need to count featured posts starting from zero
+                                         * to create the slider navigation.
+                                         */
+                                        $counter_slider = 0;
+
+                                        ?>
+
+                                <div class="featured-posts">
+                                        <h1 class="showcase-heading"><?php _e( 'Featured Post', 'twentyeleven' ); ?></h1>
+
+                                <?php
                                         // Let's roll.
-                                        if ( $sticky ) :
-
-                                        $featured->the_post();
-
-                                        // We're going to add a class to our featured post for featured images
-                                        // by default it'll have no class though
+                                        while ( $featured->have_posts() ) : $featured->the_post();
+
+                                        // Increase the counter.
+                                        $counter_slider++;
+
+                                        /**
+                                         * We're going to add a class to our featured post for featured images
+                                         * by default it'll have no class though.
+                                         */
                                         $feature_class = '';
 
                                         if ( has_post_thumbnail() ) {
-                                                // … but if it has a featured image let's add some class
+                                                // ... but if it has a featured image let's add some class
                                                 $feature_class = 'feature-image small';
 
@@ -50 +82 @@
                                                 // Is it bigger than or equal to our header?
                                                 if ( $image[1] >= HEADER_IMAGE_WIDTH ) {
-                                                        // Let's add a BIGGER class. It's EXTRA classy now.
+                                                        // If bigger, let's add a BIGGER class. It's EXTRA classy now.
                                                         $feature_class = 'feature-image large';
                                                 }
                                         }
-                                        ?>
+                                ?>
 
                                 <?php if ( has_post_thumbnail() ) : ?>
-                                <section class="featured-post <?php echo $feature_class; ?>">
+                                <section class="featured-post <?php echo $feature_class; ?>" id="featured-post-<?php echo $counter_slider; ?>">
                                 <?php else : ?>
-                                <section class="featured-post">
+                                <section class="featured-post" id="featured-post-<?php echo $counter_slider; ?>">
                                 <?php endif; ?>
-                                        <h1 class="showcase-heading"><?php _e( 'Featured Post', 'twentyeleven' ); ?></h1>
+
                                         <?php
-                                                // Dynamic thumbnails!
+                                                /**
+                                                 * If the thumbnail is as big as the header image
+                                                 * make it a large featured post, otherwise render it small
+                                                 */
                                                 if ( has_post_thumbnail() ) {
                                                         if ( $image[1] >= HEADER_IMAGE_WIDTH ) { ?>
@@ -74 +109 @@
                                         <?php get_template_part( 'content', 'featured' ); ?>
                                 </section>
-                                <?php endif; ?>
+                                <?php endwhile; ?>
+
+                                <nav class="feature-slider">
+                                        <ul>
+                                        <?php
+                                                /**
+                                                 * We need to query the same set of posts again
+                                                 * to populate the navigation dots
+                                                 */
+                                        $featured->query( $featured_args );
+
+                                                // Reset the counter so that we end up with matching elements
+                                        $counter_slider = 0;
+
+                                                // Begin from zero
+                                        rewind_posts();
+
+                                                // Let's roll again.
+                                        while ( $featured->have_posts() ) : $featured->the_post();
+                                                $counter_slider++;
+                                    ?>
+                                                <li><a href="#featured-post-<?php echo $counter_slider; ?>" title="<?php printf( esc_attr__( 'Featuring: %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" <?php
+                                                if ( 1 == $counter_slider ) :
+                                                        echo 'class="active"';
+                                                endif;
+                                                ?>></a></li>
+                                        <?php endwhile; ?>
+                                        </ul>
+                                </nav>
+                                </div>
 
                                 <section class="recent-posts">
@@ -81 +145 @@
                                         <?php
 
-                                        // Display our recent posts, showing full content for the very latest, ignoring Aside posts
+                                        // Display our recent posts, showing full content for the very latest, ignoring Aside posts.
                                         $recent_args = array(
                                                 'order' => 'DESC',
@@ -94 +158 @@
                                                 ),
                                         );
+                                        // Our new query for the Recent Posts section.
                                         $recent = new WP_Query();
                                         $recent->query( $recent_args );
@@ -99 +164 @@
 
                                         while ( $recent->have_posts() ) : $recent->the_post();
-                                                // set $more to 0 in order to only get the first part of the post
+                                                // Set $more to 0 in order to only get the first part of the post.
                                                 global $more;
                                                 $more = 0;

trunk/wp-content/themes/twentyeleven/style.css

@@ -604 +604 @@
         z-index: 1;
 }
-#branding .with-image #searchform {
-        bottom: -27px;
-        top: auto;
-}
 #branding .only-search #s {
         background-color: #666;
@@ -615 +611 @@
 #branding .only-search #s:focus {
         background-color: #bbb;
+}
+#branding .with-image #searchform {
+        bottom: -27px;
+        top: auto;
 }
 
@@ -680 +680 @@
         font-weight: bold;
 }
-.entry-meta a:focus,
-.entry-meta a:active,
-.entry-meta a:hover {
-}
 .entry-content,
 .entry-summary {
@@ -702 +698 @@
         line-height: 2.6em;
         text-transform: uppercase;
-}
-.entry-content a {
-}
-.entry-content a:hover {
 }
 .entry-content table,
@@ -768 +760 @@
 .entry-meta .edit-link a {
         background: #aaa;
-        color: #fff;
         -moz-border-radius: 3px;
         border-radius: 3px;
+        color: #fff;
         float: right;
         font-size: 12px;
@@ -810 +802 @@
         -moz-border-radius: 3px;
         border-radius: 3px;
-        padding: 3px;
         -webkit-box-shadow: 0 1px 2px #bbb;
         -moz-box-shadow: 0 1px 2px #bbb;
         box-shadow: 0 1px 2px #bbb;
+        padding: 3px;
 }
 #author-description {
@@ -834 +826 @@
         color: #777;
         font-size: 18px;
+        font-weight: 300;
         height: 48px;
+        line-height: 46px;      
         overflow: hidden;
         position: absolute;
+        text-align: center;
+        text-decoration: none;
         top: 0;
         right: 0;
-        text-align: center;
-        text-decoration: none;
         width: 48px;
-        font-weight: 300;
-        line-height: 46px;
 }
 .entry-header .comments-link a:hover {
         background: #777;
+        border-color: #555;
         color: #fff;
-        border-color: #555;
 }
 .entry-header .comments-link .leave-reply {
@@ -876 +868 @@
         padding-right: 0;
 }
-
 .singular .entry-header .entry-meta {
         position: absolute;
@@ -882 +873 @@
         left: 0;
 }
-.singular .entry-header a {
-}
-.singular .entry-header a:hover {
-}
-.singular footer.entry-meta {
-}
 .singular blockquote.pull {
         font-size: 21px;
@@ -905 +890 @@
 }
 .singular .entry-meta .edit-link a {
+        bottom: auto;
         color: #fff;
+        left: 50px;     
         position: absolute;
-        bottom: auto;
-        left: 50px;
         right: auto;
         top: 80px;
@@ -1005 +990 @@
         border-width: 1px 0;
         margin: 0 -8.9% 1.625em;
+        overflow: hidden;
         padding: 1.625em 8.9%;
-        overflow: hidden;
 }
 .error404 #main #s {
@@ -1062 +1047 @@
         position: absolute;
         background: #aaa;
-        color: #fff;
         -moz-border-radius: 3px;
         border-radius: 3px;
+        color: #fff;
         padding: 0px 8px;
         font-size: 12px;
@@ -1077 +1062 @@
 /* Featured post */
 section.featured-post {
-        border-bottom: 1px solid #e8e8e8;
         float: left;
         margin: -1.625em -8.9% 1.625em;
@@ -1087 +1071 @@
         border: none;
         color: #666;
-        font-size: 13px;
         margin: 0;
 }
@@ -1104 +1087 @@
         max-width: 59%;
         position: relative;
-        right: -20px;
+        right: -35px;
 }
 section.featured-post .attachment-small-feature:hover {
@@ -1114 +1097 @@
         width: 45%;
 }
+article.feature-image.small .entry-summary {
+        color: #555;
+        font-size: 13px;
+}
 article.feature-image.small .entry-summary p a {
         background: #222;
         color: #eee;
         display: block;
-        left: -19.8%;
-        padding: 4px 26px 4px 75px;
+        left: -23.8%;
+        padding: 4px 26px 4px 85px;
         position: relative;
         text-decoration: none;
         top: 20px;
-        width: 120px;
+        width: 180px;
 }
 article.feature-image.small .entry-summary p a:hover {
@@ -1142 +1129 @@
 section.feature-image.large .hentry {
         border-bottom: none;
+        left: 9%;
         margin: 1.625em 9% 0 0;
         position: absolute;
         top: 0;
-        left: 9%;
 }
 article.feature-image.large .entry-title a {
@@ -1153 +1140 @@
         border-radius: 3px;
         color: #fff;
+        display: inline-block;
         font-weight: 300;
-        display: inline-block;
         padding: .2em 20px;
 }
 section.feature-image.large:hover .entry-title a,
 section.feature-image.large .entry-title:hover a {
-        background: #1b8be0;
-        background: rgba(0,145,255,0.8);
-        color: #bfddF3;
+        background: #eee;
+        background: rgba(255,255,255,0.8);
+        color: #222;
 }
 article.feature-image.large .entry-summary {
@@ -1170 +1157 @@
         display: block;
         height: auto;
+        max-width: 117.9%;
         padding: 0 0 6px;
-        max-width: 117.9%;
+}
+
+/* Featured Slider */
+.featured-posts {
+        border-bottom: 1px solid #e8e8e8;
+        display: block;
+        height: 340px;
+        margin: 1.625em -8.9% 20px;
+        max-width: 1000px;
+        padding: 0;
+        position: relative;
+}
+.featured-posts .showcase-heading {
+        padding-left: 8.9%;
+}
+.featured-posts section.featured-post {
+        background: #fff;
+        height: 300px;
+        left: 0;
+        margin: 0;
+        position: absolute;
+        top: 30px;
+        width: auto;
+}
+.featured-posts section.featured-post.large {
+        overflow: hidden;
+}
+.featured-posts section.featured-post {
+        -webkit-transition-duration: 200ms;
+        -webkit-transition-property: opacity visibility;
+        -webkit-transition-timing-function: ease;
+        -moz-transition-duration: 200ms;
+        -moz-transition-property: opacity visibility;
+        -moz-transition-timing-function: ease;
+}
+.featured-posts section.featured-post {
+        opacity: 0;
+        visibility: hidden;
+}
+.featured-posts #featured-post-1 {
+        opacity: 1;
+        visibility: visible;
+}
+#content .feature-slider {
+        bottom: 0;
+        left: 8.9%;
+        overflow: visible;
+        position: absolute;
+}
+.feature-slider ul {
+        list-style-type: none;
+        margin: 0;
+}
+.feature-slider li {
+        float: left;
+        margin: 0 6px;
+}
+.feature-slider a {
+        background: #3c3c3c;
+        background: rgba(60,60,60,0.9);
+        -moz-border-radius: 12px;
+        border-radius: 12px;
+        -webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
+        -moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
+        box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
+        display: block;
+        height: 14px;
+        width: 14px;
+}
+.feature-slider a.active {
+        background: #fff;
+        background: rgba(255,255,255,0.8);
+        -webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
+        -moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
+        box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
 }
 
@@ -1210 +1272 @@
 section.recent-posts .other-recent-posts .comments-link > span {
         border-bottom: 2px solid #999;
-        display: block;
+        bottom: -2px;
         color: #444;
-        text-align: right;
+        display: block;
         font-size: 10px;
         font-weight: 500;
@@ -1218 +1280 @@
         padding: 0.3125em 0 0.3125em 1em;
         position: absolute;
-        bottom: -2px;
         right: 0;
+        text-align: right;
         text-transform: uppercase;
         z-index: 1;
@@ -1248 +1310 @@
         border-width: 1px 0;
         margin: 0 -8.9% 1.625em;
+        overflow: hidden;
         padding: 1.625em 1.625em 0;
         text-align: center;
-        overflow: hidden;
 }
 .image-attachment div.attachment img {
@@ -1273 +1335 @@
 img.size-medium,
 img.size-thumbnail {
+        height: auto;
         max-width: 100%;
-        height: auto;
 }
 img.wp-smiley {
@@ -1286 +1348 @@
 .wp-caption {
         background: #f4f2ed;
+        margin-bottom: 1.625em;
         max-width: 96%;
-        margin-bottom: 1.625em;
         padding: 12px;
 }
@@ -1331 +1393 @@
         line-height: 2.2em;
 }
-#content nav a:focus,
-#content nav a:active,
-#content nav a:hover {
-}
 #nav-above {
         padding: 0 0 1.625em;
@@ -1355 +1413 @@
         top: -4px;
         right: 0;
-        z-index: 1000;
 }
 #nav-single .nav-previous,
@@ -1370 +1427 @@
 ----------------------------------------------- */
 
-#secondary {
-}
 .widget-area {
         font-size: 12px;
@@ -1413 +1468 @@
 }
 .widget_search #searchsubmit {
-        -webkit-box-shadow: rgba(0, 0, 0, 0.09) 0px -1px 1px inset;
-        background: #DDD;
-        border: 1px solid #CCC;
+        background: #ddd;
+        border: 1px solid #ccc;
+        -webkit-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
+        -moz-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
+        box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
         color: #888;
         font-size: 13px;
@@ -1424 +1481 @@
 .widget_search #searchsubmit:active {
         background: #1b8be0;
-        color: #BFDDF3;
-        border-color: #0861A5;
-        -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px inset;
+        border-color: #0861a5;
+        -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
+        -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
+        box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
+        color: #bfddf3;
 }
 
@@ -1579 +1638 @@
         -moz-border-radius: 3px;
         border-radius: 3px;
+        -webkit-box-shadow: 0 1px 2px #ccc;
+        -moz-box-shadow: 0 1px 2px #ccc;
+        box-shadow: 0 1px 2px #ccc;
+        left: -102px;
         padding: 0;
         position: absolute;
         top: 0;
-        left: -102px;
-        -webkit-box-shadow: 0 1px 2px #ccc;
-        -moz-box-shadow: 0 1px 2px #ccc;
-        box-shadow: 0 1px 2px #ccc;
 }
 .commentlist > li:before {
         content: url(images/comment-arrow.png) no-repeat;
+        left: -21px;
         position: absolute;
-        left: -21px;
 }
 .commentlist > li.pingback:before {
@@ -1597 +1656 @@
 .commentlist .children .avatar {
         background: none;
-        padding: 0;
-        top: 2.2em;
-        left: 2.2em;
         -webkit-box-shadow: none;
         -moz-box-shadow: none;
         box-shadow: none;
-}
-.commentlist .children .bypostauthor > article .comment-meta .vcard .avatar {
+        left: 2.2em;
+        padding: 0;
+        top: 2.2em;
 }
 a.comment-reply-link {
         font-size: 12px;
         font-weight: bold;
-}
-.comment-reply-link:hover,
-.comment-reply-link:active,
-.comment-reply-link:focus {
 }
 
@@ -1697 +1750 @@
         position: relative;
         width: 68.9%;
-}
-#respond a {
-}
-#respond a:focus,
-#respond a:active,
-#respond a:hover {
 }
 #respond input[type="text"],
@@ -1734 +1781 @@
         display: inline-block;
         font-size: 13px;
+        left: 4px;
+        min-width: 60px;
         padding: 4px 10px;
         position: relative;
         top: 41px;
-        left: 4px;
-        min-width: 60px;
         z-index: 1;
-        /*text-shadow: 1px 1px 1px #fff; */
 }
 #respond input[type="text"]:focus,
@@ -1755 +1801 @@
         font-size: 22px;
         font-weight: bold;
+        left: 68%;
         position: absolute;
         top: 52px;
-        left: 68%;
         z-index: 1;
 }
@@ -1763 +1809 @@
 #respond .logged-in-as {
         font-size: 13px;
-}
-#respond .logged-in-as a {
 }
 #respond p {
@@ -1784 +1828 @@
         cursor: pointer;
         font-size: 15px;
+        left: 30px;
         margin: 20px 0;
         padding: 5px 42px 5px 22px;
+        position: relative;
         text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
-        position: relative;
-        left: 30px;
 }
 #respond input#submit:active {
@@ -1821 +1865 @@
         letter-spacing: 0.05em;
         position: absolute;
-        top: 1.1em;
         right: 1.625em;
         text-decoration: none;
         text-transform: uppercase;
+        top: 1.1em;
 }
 #cancel-comment-reply-link:focus,
@@ -1894 +1938 @@
         font-weight: bold;
 }
-#site-generator a:focus,
-#site-generator a:active,
-#site-generator a:hover {
-}
 
 
@@ -1937 +1977 @@
                 display: block;
                 float: none;
+                height: auto;
                 margin: 0.625em auto 1.025em;
                 max-width: 100%;
-                height: auto;
                 position: static;
         }
@@ -1968 +2008 @@
         }
         .singular .entry-meta .edit-link a {
+                left: 0px;
                 position: absolute;
-                left: 0px;
                 top: 40px;
         }
@@ -2025 +2065 @@
         }
         .commentlist .children .avatar {
+                background: none;
+                left: 2.2em;
+                padding: 0;
                 position: absolute;
-                background: none;
-                padding: 0;
                 top: 2.2em;
-                left: 2.2em;
         }
 }
@@ -2057 +2097 @@
                 display: block !important;
                 float: none !important;
+                max-width: 100%;
                 position: relative !important;
-                max-width: 100%;
         }
         #branding {
@@ -2109 +2149 @@
         .singular footer.entry-meta,
         .singular #comments-title {
+                margin: 0;
             width: 100%;
-                margin: 0;
         }
         .singular .hentry {
@@ -2148 +2188 @@
         .commentlist > li.comment {
             background: none;
-            border: 1px solid #DDDDDD;
+            border: 1px solid #ddd;
+            -moz-border-radius: 3px 3px 3px 3px;
             border-radius: 3px 3px 3px 3px;
             margin: 0 auto 1.625em;
@@ -2156 +2197 @@
         }
         .commentlist .avatar {
-                width: 39px;
                 height: 39px;
             left: 2.2em;
             top: 2.2em;
+                width: 39px;
         }
         .commentlist li.comment .comment-meta {