diff --git a/wp-content/themes/twentyeleven/functions.php b/wp-content/themes/twentyeleven/functions.php
index bf0c60f3ec..0939f544f2 100644
--- a/wp-content/themes/twentyeleven/functions.php
+++ b/wp-content/themes/twentyeleven/functions.php
@@ -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.
diff --git a/wp-content/themes/twentyeleven/js/showcase.js b/wp-content/themes/twentyeleven/js/showcase.js
new file mode 100644
index 0000000000..d9fb2fedde
--- /dev/null
+++ b/wp-content/themes/twentyeleven/js/showcase.js
@@ -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);
\ No newline at end of file
diff --git a/wp-content/themes/twentyeleven/showcase.php b/wp-content/themes/twentyeleven/showcase.php
index fdeaf42a1d..4fa4a4a150 100644
--- a/wp-content/themes/twentyeleven/showcase.php
+++ b/wp-content/themes/twentyeleven/showcase.php
@@ -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(); ?>
@@ -15,33 +24,56 @@ get_header(); ?>
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;
+
+ ?>
+
+
+
+
+ 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';
}
}
- ?>
+ ?>
-
+
-
+
-
+
= HEADER_IMAGE_WIDTH ) { ?>
@@ -73,14 +108,43 @@ get_header(); ?>
?>
-
+
+
+
+
+ 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++;
+ ?>
+ >
+
+
+
+
'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++;
diff --git a/wp-content/themes/twentyeleven/style.css b/wp-content/themes/twentyeleven/style.css
index f0315fa79e..89819474be 100644
--- a/wp-content/themes/twentyeleven/style.css
+++ b/wp-content/themes/twentyeleven/style.css
@@ -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;