Changeset 17790

Timestamp:

05/03/2011 08:16:34 PM (15 years ago)

Author:

lancewillett

Message:

Twenty Eleven: style improvements, RTL, and more header images - see #17198

• Add two more default header images (see r17729)
• Change the featured posts limit from 4 to ten in front page slider
• First pass at robust RTL styles
• Pingback style fixes
• Wider comment form for the one column layout
• Add CSS comment with instructions on how to remove the post format headings

Location:

trunk/wp-content/themes/twentyeleven

Files:

• functions.php (modified) (1 diff)
• images/headers/hanoi-thumbnail.jpg (added)
• images/headers/hanoi.jpg (added)
• images/headers/willow-thumbnail.jpg (added)
• images/headers/willow.jpg (added)
• rtl.css (modified) (2 diffs)
• showcase.php (modified) (1 diff)
• style.css (modified) (5 diffs)

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

@@ -175 +175 @@
             /* translators: header image description */
             'description' => __( 'Lanterns', 'twentyeleven' )
+        ),
+        'willow' => array(
+            'url' => '%s/images/headers/willow.jpg',
+            'thumbnail_url' => '%s/images/headers/willow-thumbnail.jpg',
+            /* translators: header image description */
+            'description' => __( 'Willow', 'twentyeleven' )
+        ),
+        'hanoi' => array(
+            'url' => '%s/images/headers/hanoi.jpg',
+            'thumbnail_url' => '%s/images/headers/hanoi-thumbnail.jpg',
+            /* translators: header image description */
+            'description' => __( 'Hanoi Plant', 'twentyeleven' )
         )
     ) );

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

@@ -10 +10 @@
 */
 
+/* =Global
+----------------------------------------------- */
+
 body {
     direction: rtl;
     unicode-bidi: embed;
 }
+caption, th, td {
+    text-align: right;
+}
+ul, ol {
+    margin: 0 2.5em 1.625em 0;
+}
+textarea {
+    padding-right: 3px;
+    padding-left: 0;
+}
+
+
+/* =Menu
+-------------------------------------------------------------- */
+
 #access {
     float: right;
-    margin: 0 auto 1em;
 }
 #access ul {
+    margin: 0 -0.8125em 0 0;
     padding-right: 0;
+    padding-left: 0;
 }
 #access li {
@@ -25 +44 @@
 }
 #access ul ul {
-    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
     float: right;
     right: 0;
-    left: auto;
+    right: auto;
 }
 #access ul ul ul {
     right: 100%;
-    left: auto;
-}
-#content nav .nav-previous {
-    float: right;
-}
-#content nav .nav-next {
-    float: left;
+    right: auto;
+}
+
+/* Search Form */
+#branding #searchform {
+    left: 7.6%;
     text-align: left;
-}
+    left: auto;
+}
+
+#branding #s {
+    float: left;
+    padding: 4px 28px 4px 10px;
+}
+
+
+/* =Content
+----------------------------------------------- */
+
+.entry-title,
+.entry-header .entry-meta {
+    padding-left: 76px;
+    padding-right: 0;
+}
+.entry-content td,
+.comment-content td {
+    padding: 6px 0 6px 10px;
+}
+.page-link span {
+    margin-left: 6px;
+    margin-right: auto;
+}
+.entry-meta .edit-link a {
+    float: left;
+}
+
+/* Author Info */
+.singular #author-info {
+    margin: 2.2em -35.4% 0 -35.6%;
+}
+#author-avatar {
+    float: right;
+    margin-left: -78px;
+    margin-right: auto;
+}
+#author-description {
+    float: right;
+    margin-right: 108px;
+    margin-left: auto;
+}
+
+/* Comments link */
+.entry-header .comments-link a {
+    left: 0;
+    right: auto;
+}
+
+/* Singular content styles for Posts and Pages */
+.singular .entry-title,
+.singular .entry-header .entry-meta {
+    padding-left: 0;
+    padding-right: 0;
+}
+.singular .entry-header .entry-meta {
+    right: 0;
+    right: auto;
+}
+.singular .pull.alignright {
+    margin: 0 -22.25% 0 1.625em;
+}
+.singular .pull.alignleft {
+    margin: 0 1.625em 0 -22.25%;
+}
+.singular .entry-meta .edit-link a {
+    right: 50px;
+    left: auto;
+}
+
+
+/* =Gallery
+----------------------------------------------- */
+
+.format-gallery .gallery-thumb {
+    float: right;
+    margin-left: 1.625em;
+    margin-right: auto;
+}
+
+
+/* =Status
+----------------------------------------------- */
+
+.format-status img.avatar {
+    float: right;
+    margin: 4px 0 2px 10px;
+}
+
+
+/* =Quote
+----------------------------------------------- */
+
+/* =Image
+----------------------------------------------- */
+
+.format-image footer.entry-meta {
+    margin-left: 2px;
+    margin-right: auto;
+}
+.format-image div.entry-meta {
+    float: right;
+}
+
+
+/* =error404
+----------------------------------------------- */
+
+.error404 #main .widget {
+    float: right;
+    margin-left: 3.7%;
+    margin-right: auto;
+}
+
+.error404 #main .widget_archive {
+    margin-left: 0;
+    margin-right: auto;
+}
+
+.error404 #main .widget_tag_cloud {
+    margin-left: 0;
+    margin-right: auto;
+}
+
+
+/* =Showcase
+----------------------------------------------- */
+
+/* Intro */
+article.intro .edit-link a {
+    left: 20px;
+    left: auto;
+}
+
+/* Featured post */
+section.featured-post {
+    float: right;
+}
+
+/* Small featured post */
+section.featured-post .attachment-small-feature {
+    border-left: 20px solid #bbb;
+    float: left;
+    margin: -10px 0 1.625em -8.9%;
+    left: -35px;
+    left: auto;
+    border-right: none;
+}
+article.feature-image.small {
+    float: right;
+}
+article.feature-image.small .entry-summary p a {
+    right: -23.8%;
+    padding: 4px 85px 4px 26px;
+    right: auto;
+}
+
+/* Large featured post */
+section.feature-image.large .hentry {
+    right: 9%;
+    margin: 1.625em 0 0 9%;
+    right: auto;
+}
+
+/* Featured Slider */
+.featured-posts .showcase-heading {
+    padding-right: 8.9%;
+    padding-left: 0;
+}
+.featured-posts section.featured-post {
+    right: 0;
+    right: auto;
+}
+#content .feature-slider {
+    right: 8.9%;
+    right: auto;
+}
+.feature-slider li {
+    float: right;
+}
+
+/* Recent Posts */
+section.recent-posts .other-recent-posts a[rel="bookmark"] {
+    float: right;
+}
+section.recent-posts .other-recent-posts .comments-link a,
+section.recent-posts .other-recent-posts .comments-link > span {
+    padding: 0.3125em 1em 0.3125em 0;
+    left: 0;
+    text-align: left;
+    left: auto;
+}
+
+
+/* =Images
+----------------------------------------------- */
+
+.wp-caption .wp-caption-text {
+    padding: 10px 40px 5px 0px;
+}
+.wp-caption .wp-caption-text:before {
+    margin-left: 5px;
+    right: 10px;
+    right: auto;
+    margin-right: auto;
+}
+
+
+/* =Navigation
+-------------------------------------------------------------- */
+
+.nav-previous {
+    float: right;
+}
+.nav-next {
+    float: left;
+    text-align: left;
+}
+
+/* Singular navigation */
+#nav-single {
+    left: 0;
+    left: auto;
+}
+#nav-single .nav-next {
+    padding-right: .5em;
+    padding-left: 0;
+}
+
+
+/* =Widgets
+----------------------------------------------- */
+
+.widget ul ul {
+    margin-right: 1.5em;
+    margin-left: auto;
+}
+
+/* Twitter */
+.widget_twitter .timesince {
+    margin-left: -10px;
+    text-align: left;
+    margin-right: auto;
+}
+
+
+/* =Comments
+----------------------------------------------- */
+
+.commentlist .children li.comment {
+    border-right: 1px solid #ddd;
+    -moz-border-radius: 0 0 3px 3px;
+    border-radius: 0 0 3px 3px;
+    border-left: none;
+}
+.commentlist .children li.comment .comment-meta {
+    margin-right: 50px;
+    margin-left: auto;
+}
+.commentlist .avatar {
+    right: -102px;
+    right: auto;
+}
+.commentlist > li:before {
+    right: -21px;
+    right: auto;
+}
+.commentlist .children .avatar {
+    right: 2.2em;
+    right: auto;
+}
+
+/* Comment Form */
+#respond .comment-form-author label,
+#respond .comment-form-email label,
+#respond .comment-form-url label,
+#respond .comment-form-comment label {
+    right: 4px;
+    right: auto;
+}
+#respond .comment-form-author .required,
+#respond .comment-form-email .required {
+    right: 68%;
+    right: auto;
+}
+#respond .form-submit {
+    float: left;
+}
+#respond input#submit {
+    right: 30px;
+    padding: 5px 22px 5px 42px;
+    right: auto;
+}
+#respond #cancel-comment-reply-link {
+    margin-right: 10px;
+    margin-left: auto;
+}
+#cancel-comment-reply-link {
+    left: 1.625em;
+    left: auto;
+}
+
+
+/* =Footer
+----------------------------------------------- */
+
+/* Two Footer Widget Areas */
+#supplementary.two .widget-area {
+    float: right;
+    margin-left: 3.7%;
+    margin-right: auto;
+}
+#supplementary.two .widget-area + .widget-area {
+    margin-left: 0;
+    margin-right: auto;
+}
+
+/* Three Footer Widget Areas */
+#supplementary.three .widget-area {
+    float: right;
+    margin-left: 3.7%;
+    margin-right: auto;
+}
+#supplementary.three .widget-area + .widget-area + .widget-area {
+    margin-left: 0;
+    margin-right: auto;
+}
+
+/* Simplify the showcase template when small feature */
+    section.featured-post .attachment-small-feature,
+    .one-column section.featured-post .attachment-small-feature {
+    float: right;
+}
+article.feature-image.small {
+    float: left;
+}
+article.feature-image.small .entry-summary a {
+    right: -9%;
+    right: auto;
+}
+
+
+/* =Responsive Structure
+----------------------------------------------- */
+
+@media (max-width: 800px) {
+
+/* Three Footer Widget Areas */
+#supplementary.three .widget-area {
+    float: right;
+    margin-left: 3.7%;
+    margin-right: auto;
+}
+#supplementary.three .widget-area + .widget-area + .widget-area {
+    margin-left: 0;
+    margin-right: auto;
+}
+
+/* Simplify the showcase template when small feature */
+    section.featured-post .attachment-small-feature,
+    .one-column section.featured-post .attachment-small-feature {
+    float: right;
+}
+article.feature-image.small {
+    float: left;
+}
+article.feature-image.small .entry-summary a {
+    right: -9%;
+    right: auto;
+}
+}
+
+/* Make sure the logo and search form don't collide */
+    #branding #searchform {
+    left: 1px;
+}
+
+@media (max-width: 650px) {
+
+/* Remove the margin on singular articles */
+
+/* =Responsive Structure
+----------------------------------------------- */
+
+@media (max-width: 800px) {
+
+    /* Three Footer Widget Areas */
+    #supplementary.three .widget-area {
+        float: right;
+        margin-left: 3.7%;
+        margin-right: auto;
+    }
+    #supplementary.three .widget-area + .widget-area + .widget-area {
+        margin-left: 0;
+        margin-right: auto;
+    }
+
+    /* Simplify the showcase template when small feature */
+        section.featured-post .attachment-small-feature,
+        .one-column section.featured-post .attachment-small-feature {
+        float: right;
+    }
+    article.feature-image.small {
+        float: left;
+    }
+    article.feature-image.small .entry-summary a {
+        right: -9%;
+        right: auto;
+    }
+
+    /* Make sure the logo and search form don't collide */
+    #branding #searchform {
+    left: 1px;
+    left: auto;
+    }
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+    #primary {
+        float: right;
+    }
+    .commentlist .avatar {
+        right: 2.2em;
+        right: auto;
+    }
+}
+
+
+/* =Print
+----------------------------------------------- */
+
+@media print {
+    #primary {
+        float: right;
+    }
+
+    /* Comments */
+    .commentlist .avatar {
+        right: 2.2em;
+        right: auto;
+    }
+}
+
+
+/* =IE7
+----------------------------------------------- */
+
+#ie7 article.intro {
+    margin-right: -7.6%;
+    margin-left: -7.6%;
+    padding-right: -7.6%;
+    padding-left: -7.6%;
+}
+
+#ie7 section.featured-post {
+    margin-right: -7.6%;
+    margin-left: -7.6%;
+}
+
+#ie7 section.recent-posts {
+    margin-left: 7.6%;
+    margin-right: auto;
+}

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

@@ -39 +39 @@
                      *
                      * See if we have any sticky posts and use them to create our featured posts.
+                     * We limit the featured posts at ten.
                      */
                     $sticky = get_option( 'sticky_posts' );
                     $featured_args = array(
-                        'posts_per_page' => 4,
+                        'posts_per_page' => 10,
                         'post__in' => $sticky,
                     );

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

@@ -300 +300 @@
     top: 2.2em;
     left: 2.2em;
+}
+.one-column #respond {
+    width: auto;
 }
 
@@ -854 +857 @@
     text-transform: lowercase;
 }
-/* Post Formats */
+/*
+    Post Formats Headings
+    To hide the headings, display: none the ".entry-header .entry-format" selector,
+    and remove the padding rules below.
+*/
 .entry-header .entry-format {
     color: #666;
@@ -1667 +1674 @@
     padding: 1.625em;
     position: relative;
+    width: 68.9%;
+}
+.commentlist .pingback {
+    margin: 0 auto 1.625em;
+    padding: 0 1.625em;
     width: 68.9%;
 }
@@ -2044 +2056 @@
     }
     /* Make sure we have room for our comment avatars */
-    .commentlist > li.comment {
+    .commentlist > li.comment,
+    .commentlist .pingback {
         margin-left: 102px;
         width: auto;
@@ -2082 +2095 @@
     }
     /* Talking avatars take up too much room at this size */
-    .commentlist > li.comment {
+    .commentlist > li.comment,
+    .commentlist > li.pingback {
         margin-left: 0;
     }