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

git-svn-id: http://svn.automattic.com/wordpress/trunk@17761 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
lancewillett 2011-04-29 00:19:02 +00:00
parent 65cbcea31c
commit 372e5fd8de
4 changed files with 246 additions and 123 deletions

View File

@ -128,8 +128,8 @@ function twentyeleven_setup() {
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
// 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
// custom headers. See twentyeleven_admin_header_style(), below.

View File

@ -0,0 +1,17 @@
(function($) {
$(document).ready( function() {
$('.feature-slider a').click(function(e) {
$('.featured-posts section.featured-post').css({
opacity: 0,
visibility: 'hidden'
});
$(this.hash).css({
opacity: 1,
visibility: 'visible'
});
$('.feature-slider a').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
});
})(jQuery);

View File

@ -3,10 +3,19 @@
* Template Name: Showcase Template
* 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(); ?>
<div id="primary" class="showcase">
@ -15,33 +24,56 @@ get_header(); ?>
<?php the_post(); ?>
<?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' );
?>
<?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 ) :
while ( $featured->have_posts() ) : $featured->the_post();
$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
/**
* 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';
// Hang on. Let's check this here image out.
@ -49,20 +81,23 @@ get_header(); ?>
// 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 ) { ?>
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"> <?php the_post_thumbnail( 'large-feature' ); ?></a>
@ -73,14 +108,43 @@ get_header(); ?>
?>
<?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">
<h1 class="showcase-heading"><?php _e( 'Recent Posts', 'twentyeleven' ); ?></h1>
<?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',
'post__not_in' => get_option( 'sticky_posts' ),
@ -93,12 +157,13 @@ get_header(); ?>
),
),
);
// Our new query for the Recent Posts section.
$recent = new WP_Query();
$recent->query( $recent_args );
$counter = 0;
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;
$counter++;

View File

@ -603,10 +603,6 @@ a:hover {
top: 5px;
z-index: 1;
}
#branding .with-image #searchform {
bottom: -27px;
top: auto;
}
#branding .only-search #s {
background-color: #666;
border-color: #000;
@ -615,6 +611,10 @@ a:hover {
#branding .only-search #s:focus {
background-color: #bbb;
}
#branding .with-image #searchform {
bottom: -27px;
top: auto;
}
/* =Content
@ -679,10 +679,6 @@ a:hover {
.entry-meta a {
font-weight: bold;
}
.entry-meta a:focus,
.entry-meta a:active,
.entry-meta a:hover {
}
.entry-content,
.entry-summary {
padding: 1.625em 0 0;
@ -702,10 +698,6 @@ a:hover {
line-height: 2.6em;
text-transform: uppercase;
}
.entry-content a {
}
.entry-content a:hover {
}
.entry-content table,
.comment-content table {
border-bottom: 1px solid #ddd;
@ -767,9 +759,9 @@ dl.gallery-item {
}
.entry-meta .edit-link a {
background: #aaa;
color: #fff;
-moz-border-radius: 3px;
border-radius: 3px;
color: #fff;
float: right;
font-size: 12px;
font-weight: 300;
@ -809,10 +801,10 @@ dl.gallery-item {
background: #fff;
-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 {
float: left;
@ -833,21 +825,21 @@ dl.gallery-item {
border-radius: 24px;
color: #777;
font-size: 18px;
font-weight: 300;
height: 48px;
line-height: 46px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
text-align: center;
text-decoration: none;
top: 0;
right: 0;
width: 48px;
font-weight: 300;
line-height: 46px;
}
.entry-header .comments-link a:hover {
background: #777;
color: #fff;
border-color: #555;
color: #fff;
}
.entry-header .comments-link .leave-reply {
font-size: 14px;
@ -875,18 +867,11 @@ dl.gallery-item {
.singular .entry-header .entry-meta {
padding-right: 0;
}
.singular .entry-header .entry-meta {
position: absolute;
top: 0;
left: 0;
}
.singular .entry-header a {
}
.singular .entry-header a:hover {
}
.singular footer.entry-meta {
}
.singular blockquote.pull {
font-size: 21px;
font-weight: bold;
@ -904,10 +889,10 @@ dl.gallery-item {
width: 33%;
}
.singular .entry-meta .edit-link a {
color: #fff;
position: absolute;
bottom: auto;
left: 50px;
color: #fff;
left: 50px;
position: absolute;
right: auto;
top: 80px;
}
@ -1004,8 +989,8 @@ dl.gallery-item {
border: 1px solid #ddd;
border-width: 1px 0;
margin: 0 -8.9% 1.625em;
padding: 1.625em 8.9%;
overflow: hidden;
padding: 1.625em 8.9%;
}
.error404 #main #s {
width: 80%;
@ -1061,9 +1046,9 @@ article.intro .entry-content {
article.intro .edit-link a {
position: absolute;
background: #aaa;
color: #fff;
-moz-border-radius: 3px;
border-radius: 3px;
color: #fff;
padding: 0px 8px;
font-size: 12px;
right: 20px;
@ -1076,7 +1061,6 @@ article.intro .edit-link a:hover {
/* Featured post */
section.featured-post {
border-bottom: 1px solid #e8e8e8;
float: left;
margin: -1.625em -8.9% 1.625em;
padding: 1.625em 8.9% 0;
@ -1086,7 +1070,6 @@ section.featured-post {
section.featured-post .hentry {
border: none;
color: #666;
font-size: 13px;
margin: 0;
}
section.featured-post .entry-meta {
@ -1103,7 +1086,7 @@ section.featured-post .attachment-small-feature {
margin: -10px -8.9% 1.625em 0;
max-width: 59%;
position: relative;
right: -20px;
right: -35px;
}
section.featured-post .attachment-small-feature:hover {
border-color: #888;
@ -1113,16 +1096,20 @@ article.feature-image.small {
margin: 0 0 1.625em;
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 {
background: #1b8be0;
@ -1141,10 +1128,10 @@ section.feature-image.large .showcase-heading {
}
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 {
background: #222;
@ -1152,15 +1139,15 @@ article.feature-image.large .entry-title a {
-moz-border-radius: 3px;
border-radius: 3px;
color: #fff;
font-weight: 300;
display: inline-block;
font-weight: 300;
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 {
display: none;
@ -1169,8 +1156,83 @@ section.feature-image.large img {
border-bottom: 1px solid #ddd;
display: block;
height: auto;
padding: 0 0 6px;
max-width: 117.9%;
padding: 0 0 6px;
}
/* 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);
}
/* Recent Posts */
@ -1209,16 +1271,16 @@ section.recent-posts .other-recent-posts a[rel="bookmark"]:hover {
section.recent-posts .other-recent-posts .comments-link a,
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;
line-height: 2.76333em;
padding: 0.3125em 0 0.3125em 1em;
position: absolute;
bottom: -2px;
right: 0;
text-align: right;
text-transform: uppercase;
z-index: 1;
}
@ -1247,9 +1309,9 @@ section.recent-posts .other-recent-posts li:after {
border: 1px solid #ddd;
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 {
display: block;
@ -1272,8 +1334,8 @@ img.size-large,
img.size-full,
img.size-medium,
img.size-thumbnail {
max-width: 100%;
height: auto;
max-width: 100%;
}
img.wp-smiley {
margin-bottom: 0;
@ -1285,8 +1347,8 @@ p img,
}
.wp-caption {
background: #f4f2ed;
max-width: 96%;
margin-bottom: 1.625em;
max-width: 96%;
padding: 12px;
}
.wp-caption img {
@ -1330,10 +1392,6 @@ p img,
font-weight: bold;
line-height: 2.2em;
}
#content nav a:focus,
#content nav a:active,
#content nav a:hover {
}
#nav-above {
padding: 0 0 1.625em;
}
@ -1354,7 +1412,6 @@ p img,
position: absolute;
top: -4px;
right: 0;
z-index: 1000;
}
#nav-single .nav-previous,
#nav-single .nav-next {
@ -1369,8 +1426,6 @@ p img,
/* =Widgets
----------------------------------------------- */
#secondary {
}
.widget-area {
font-size: 12px;
}
@ -1412,9 +1467,11 @@ p img,
width: 58%;
}
.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;
line-height: 25px;
@ -1423,9 +1480,11 @@ p img,
}
.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;
}
/* Ephemera Widget */
@ -1578,41 +1637,35 @@ section.ephemera .entry-title a span {
.commentlist .avatar {
-moz-border-radius: 3px;
border-radius: 3px;
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;
left: -102px;
padding: 0;
position: absolute;
top: 0;
}
.commentlist > li:before {
content: url(images/comment-arrow.png) no-repeat;
position: absolute;
left: -21px;
position: absolute;
}
.commentlist > li.pingback:before {
content: '';
}
.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 {
}
/* Post author highlighting */
.commentlist > li.bypostauthor {
@ -1697,12 +1750,6 @@ a.comment-reply-link {
position: relative;
width: 68.9%;
}
#respond a {
}
#respond a:focus,
#respond a:active,
#respond a:hover {
}
#respond input[type="text"],
#respond textarea {
background: #fff;
@ -1733,13 +1780,12 @@ a.comment-reply-link {
color: #555;
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,
#respond textarea:focus {
@ -1754,17 +1800,15 @@ a.comment-reply-link {
color: #bd3500;
font-size: 22px;
font-weight: bold;
left: 68%;
position: absolute;
top: 52px;
left: 68%;
z-index: 1;
}
#respond .comment-notes,
#respond .logged-in-as {
font-size: 13px;
}
#respond .logged-in-as a {
}
#respond p {
margin: 10px 0;
}
@ -1783,11 +1827,11 @@ a.comment-reply-link {
color: #eee;
cursor: pointer;
font-size: 15px;
left: 30px;
margin: 20px 0;
padding: 5px 42px 5px 22px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
position: relative;
left: 30px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
#respond input#submit:active {
background: #1b8be0;
@ -1820,10 +1864,10 @@ a.comment-reply-link {
line-height: 2.2em;
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,
#cancel-comment-reply-link:active,
@ -1893,10 +1937,6 @@ p.comment-form-comment {
#site-generator a {
font-weight: bold;
}
#site-generator a:focus,
#site-generator a:active,
#site-generator a:hover {
}
/* =Responsive Structure
@ -1936,9 +1976,9 @@ p.comment-form-comment {
border: none;
display: block;
float: none;
height: auto;
margin: 0.625em auto 1.025em;
max-width: 100%;
height: auto;
position: static;
}
article.feature-image.small {
@ -1967,8 +2007,8 @@ p.comment-form-comment {
margin: 0 0 0 1.625em;
}
.singular .entry-meta .edit-link a {
position: absolute;
left: 0px;
position: absolute;
top: 40px;
}
.singular #author-info {
@ -2024,11 +2064,11 @@ p.comment-form-comment {
position: static;
}
.commentlist .children .avatar {
position: absolute;
background: none;
padding: 0;
top: 2.2em;
left: 2.2em;
padding: 0;
position: absolute;
top: 2.2em;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
@ -2056,8 +2096,8 @@ p.comment-form-comment {
clear: both !important;
display: block !important;
float: none !important;
position: relative !important;
max-width: 100%;
position: relative !important;
}
#branding {
border-top: none;
@ -2108,8 +2148,8 @@ p.comment-form-comment {
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
width: 100%;
margin: 0;
width: 100%;
}
.singular .hentry {
padding: 0;
@ -2147,7 +2187,8 @@ p.comment-form-comment {
/* Comments */
.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;
padding: 1.625em;
@ -2155,10 +2196,10 @@ p.comment-form-comment {
width: auto;
}
.commentlist .avatar {
width: 39px;
height: 39px;
left: 2.2em;
top: 2.2em;
width: 39px;
}
.commentlist li.comment .comment-meta {
line-height: 1.625em;