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


git-svn-id: http://svn.automattic.com/wordpress/trunk@17790 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
lancewillett 2011-05-03 20:16:34 +00:00
parent cb077a55ed
commit b89437791b
8 changed files with 516 additions and 11 deletions

View File

@ -174,6 +174,18 @@ function twentyeleven_setup() {
'thumbnail_url' => '%s/images/headers/lanterns-thumbnail.jpg',
/* 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' )
)
) );
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

View File

@ -9,36 +9,514 @@ http://codex.wordpress.org/Right_to_Left_Language_Support
*/
/* =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 {
float: right;
}
#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%;
right: auto;
}
/* Search Form */
#branding #searchform {
left: 7.6%;
text-align: left;
left: auto;
}
#content nav .nav-previous {
#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;
}
#content nav .nav-next {
/* =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;
}

View File

@ -38,10 +38,11 @@ get_header(); ?>
* Begin the featured posts section.
*
* 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,
);

View File

@ -300,6 +300,9 @@ body {
top: 2.2em;
left: 2.2em;
}
.one-column #respond {
width: auto;
}
/* =Global
----------------------------------------------- */
@ -853,7 +856,11 @@ dl.gallery-item {
font-weight: bold;
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;
font-size: 10px;
@ -1668,6 +1675,11 @@ section.ephemera .entry-title a span {
position: relative;
width: 68.9%;
}
.commentlist .pingback {
margin: 0 auto 1.625em;
padding: 0 1.625em;
width: 68.9%;
}
.commentlist .children {
list-style: none;
margin: 0;
@ -2043,7 +2055,8 @@ p.comment-form-comment {
padding: 20px 8.8%;
}
/* Make sure we have room for our comment avatars */
.commentlist > li.comment {
.commentlist > li.comment,
.commentlist .pingback {
margin-left: 102px;
width: auto;
}
@ -2081,7 +2094,8 @@ p.comment-form-comment {
position: static;
}
/* Talking avatars take up too much room at this size */
.commentlist > li.comment {
.commentlist > li.comment,
.commentlist > li.pingback {
margin-left: 0;
}
.commentlist .avatar {