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;
         }