Twenty Eleven RTL update, props yoavf, fixes #17882

git-svn-id: http://svn.automattic.com/wordpress/trunk@18342 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
azaozz 2011-06-25 20:24:07 +00:00
parent 00a6168c39
commit bad6d5e3f3
6 changed files with 272 additions and 186 deletions

View File

@ -210,6 +210,9 @@ a:active img[class*="wp-image-"] {
color: #888; color: #888;
} }
.rtl .entry-header .comments-link a {
background-image: url(../images/comment-bubble-dark-rtl.png);
}
/* Singular content styles for Posts and Pages */ /* Singular content styles for Posts and Pages */
.singular .entry-title { .singular .entry-title {
color: #fff; color: #fff;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -165,6 +165,9 @@ function twentyeleven_get_default_theme_options() {
'theme_layout' => 'content-sidebar', 'theme_layout' => 'content-sidebar',
); );
if ( is_rtl() )
$default_theme_options['theme_layout'] = 'sidebar-content';
return apply_filters( 'twentyeleven_default_theme_options', $default_theme_options ); return apply_filters( 'twentyeleven_default_theme_options', $default_theme_options );
} }
@ -391,6 +394,11 @@ function twentyeleven_layout_classes( $existing_classes ) {
else else
$classes = array( 'one-column' ); $classes = array( 'one-column' );
if ( 'content-sidebar' == $current_layout )
$classes[] = 'right-sidebar';
elseif ( 'sidebar-content' == $current_layout )
$classes[] = 'left-sidebar';
else
$classes[] = $current_layout; $classes[] = $current_layout;
$classes = apply_filters( 'twentyeleven_layout_classes', $classes, $current_layout ); $classes = apply_filters( 'twentyeleven_layout_classes', $classes, $current_layout );

View File

@ -9,24 +9,119 @@ http://codex.wordpress.org/Right_to_Left_Language_Support
*/ */
/* =Global /* =Reset reset
----------------------------------------------- */
caption, th, td {
text-align: right;
}
/* =Structure
----------------------------------------------- */ ----------------------------------------------- */
body { body {
direction:rtl; direction:rtl;
unicode-bidi:embed; unicode-bidi:embed;
} }
caption, th, td {
text-align: right; /* Showcase */
.page-template-showcase-php section.recent-posts {
float: left;
margin: 0 31% 0 0;
}
.page-template-showcase-php #main .widget-area {
float: right;
margin: 0 0 0 -22.15%;
}
/* One column */
.one-column article.feature-image.small .entry-summary a {
left: auto;
right: -9%;
}
/* Simplify the pullquotes and pull styles */
.one-column.singular .entry-meta .edit-link a {
right: 0px;
left: auto;
}
/* Make sure we have room for our comment avatars */
.one-column .commentlist > li.comment {
margin-left: 0;
margin-right: 102px;
}
/* Make sure the logo and search form don't collide */
.one-column #branding #searchform {
right: auto;
left: 40px;
}
/* Talking avatars take up too much room at this size */
.one-column .commentlist > li.comment {
margin-right: 0;
}
.one-column .commentlist > li.comment .comment-meta,
.one-column .commentlist > li.comment .comment-content {
margin-right: 0;
margin-left: 85px;
}
.one-column .commentlist .avatar {
right: auto;
left: 1.625em;
}
.one-column .commentlist .children .avatar {
left: auto;
right: 2.2em;
}
/* =Global
----------------------------------------------- */
/* Text elements */
p {
margin-bottom: 1.625em;
} }
ul, ol { ul, ol {
margin: 0 2.5em 1.625em 0; margin: 0 2.5em 1.625em 0;
} }
textarea { .ltr ul, ol {
padding-right: 3px; margin: 0 0 1.625em 2.5em;
padding-left: 0; }
blockquote {
font-family: Arial, sans-serif;
}
blockquote em, blockquote i, blockquote cite {
font-style: normal;
} }
/* Forms */
textarea {
padding-left: 0;
padding-right: 3px;
}
input#s {
background-position: 97% 6px;
padding: 4px 28px 4px 10px;
}
/* Assistive text */
#access a.assistive-text:active,
#access a.assistive-text:focus {
left: auto;
right: 7.6%;
}
/* =Header
----------------------------------------------- */
#site-title {
margin-right: 0;
margin-left: 270px;
}
#site-description {
margin: 0 0 3.65625em 270px;
}
/* =Menu /* =Menu
-------------------------------------------------------------- */ -------------------------------------------------------------- */
@ -37,54 +132,72 @@ textarea {
#access ul { #access ul {
margin: 0 -0.8125em 0 0; margin: 0 -0.8125em 0 0;
padding-right: 0; padding-right: 0;
padding-left: 0;
} }
#access li { #access li {
float: right; float: right;
} }
#access ul ul { #access ul ul {
float: right; float: right;
left: auto;
right: 0; right: 0;
} }
#access ul ul ul { #access ul ul ul {
left: auto;
right: 100%; right: 100%;
} }
/* Search Form */ /* Search Form */
#branding #searchform { #branding #searchform {
right: auto;
left: 7.6%; left: 7.6%;
text-align: left; text-align: left;
} }
#branding #s { #branding #s {
float: left; float: left;
padding: 4px 28px 4px 10px;
width: 8%;
} }
#branding #s:focus { #branding .only-search + #access div {
width: 26%; padding-right: 0;
padding-left: 160px;
} }
/* =Content /* =Content
----------------------------------------------- */ ----------------------------------------------- */
.entry-title, .entry-title,
.entry-header .entry-meta { .entry-header .entry-meta {
padding-left: 76px;
padding-right: 0; padding-right: 0;
padding-left: 76px;
} }
.entry-content td, .entry-content td,
.comment-content td { .comment-content td {
padding: 6px 0 6px 10px; padding: 6px 0 6px 10px;
} }
.page-link span { .page-link span {
margin-right: 0;
margin-left: 6px; margin-left: 6px;
margin-right: auto;
} }
.entry-meta .edit-link a { .entry-meta .edit-link a {
float: left; float: left;
} }
/* Images */
.wp-caption .wp-caption-text,
.gallery-caption {
font-family: Arial, sans-serif;
}
.wp-caption .wp-caption-text {
padding: 10px 40px 5px 0px;
}
.wp-caption .wp-caption-text:before {
margin-right: 0;
margin-left: 5px;
left: auto;
right: 10px;
}
#content .gallery-columns-4 .gallery-item {
padding-right:0;
padding-left:2%;
}
/* Author Info */ /* Author Info */
.singular #author-info { .singular #author-info {
@ -92,39 +205,35 @@ textarea {
} }
#author-avatar { #author-avatar {
float: right; float: right;
margin-right: 0;
margin-left: -78px; margin-left: -78px;
margin-right: auto;
} }
#author-description { #author-description {
float: right; float: right;
margin-left: 0;
margin-right: 108px; margin-right: 108px;
margin-left: auto;
} }
/* Comments link */ /* Comments link */
.entry-header .comments-link a { .entry-header .comments-link a {
left: 0; background-image: url(images/comment-bubble-rtl.png);
right: auto; right: auto;
left: 0;
} }
/* Singular content styles for Posts and Pages */ /*
Post Formats Headings
*/
.singular .entry-title, .singular .entry-title,
.singular .entry-header .entry-meta { .singular .entry-header .entry-meta {
padding-left: 0; padding-left: 0;
padding-right: 0;
} }
.singular .entry-header .entry-meta { .singular .entry-header .entry-meta {
left: auto;
right: 0; right: 0;
} }
.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 { .singular .entry-meta .edit-link a {
right: 50px;
left: auto; left: auto;
right: 50px;
} }
@ -133,8 +242,7 @@ textarea {
.format-gallery .gallery-thumb { .format-gallery .gallery-thumb {
float: right; float: right;
margin-left: 1.625em; margin: .375em 0 0 1.625em;
margin-right: auto;
} }
@ -147,46 +255,32 @@ textarea {
} }
/* =Quote
----------------------------------------------- */
/* =Image /* =Image
----------------------------------------------- */ ----------------------------------------------- */
.format-image footer.entry-meta { .indexed.format-image div.entry-meta {
margin-left: 2px;
margin-right: auto;
}
.format-image div.entry-meta {
float: right; float: right;
} }
/* =error404 /* =error404
----------------------------------------------- */ ----------------------
------------------------- */
.error404 #main .widget { .error404 #main .widget {
float: right; float: right;
margin-left: 3.7%;
margin-right: auto; margin-right: auto;
margin-left: 3.7%;
} }
.error404 #main .widget_archive { .error404 #main .widget_archive {
margin-left: 0; margin-left: 0;
margin-right: auto;
} }
.error404 #main .widget_tag_cloud { .error404 #main .widget_tag_cloud {
margin-left: 0; margin-left: 0;
margin-right: auto;
} }
/* =Showcase /* =Showcase
----------------------------------------------- */ ----------------------------------------------- */
/* Intro */
article.intro .edit-link a { article.intro .edit-link a {
right: auto;
left: 20px; left: 20px;
} }
@ -197,41 +291,42 @@ section.featured-post {
/* Small featured post */ /* Small featured post */
section.featured-post .attachment-small-feature { section.featured-post .attachment-small-feature {
border-left: 20px solid #bbb;
float: left; float: left;
margin: -10px 0 1.625em -8.9%; margin: 0 0 1.625em -8.9%;
left: -35px; right: auto;
border-right: none; left: -15px;
} }
article.feature-image.small { article.feature-image.small {
float: right; float: right;
} }
article.feature-image.small .entry-summary p a { article.feature-image.small .entry-summary p a {
left:auto;
right: -23.8%; right: -23.8%;
padding: 4px 85px 4px 26px; padding: 9px 85px 9px 26px;
} }
/* Large featured post */ /* Large featured post */
section.feature-image.large .hentry { section.feature-image.large .hentry {
left:auto;
right: 9%; right: 9%;
margin: 1.625em 0 0 9%; margin: 1.625em 0 0 9%;
} }
/* Featured Slider */ /* Featured Slider */
.featured-posts .showcase-heading { .featured-posts .showcase-heading {
padding-right: 8.9%;
padding-left: 0; padding-left: 0;
padding-right: 8.9%;
} }
.featured-posts section.featured-post { .featured-posts section.featured-post {
left: auto;
right: 0; right: 0;
} }
#content .feature-slider { #content .feature-slider {
right: 8.9%; right: auto;
left: 8.9%;
} }
.feature-slider li { .feature-slider li {
float: right; float: right;
} }
/* Recent Posts */ /* Recent Posts */
section.recent-posts .other-recent-posts a[rel="bookmark"] { section.recent-posts .other-recent-posts a[rel="bookmark"] {
float: right; float: right;
@ -243,20 +338,9 @@ section.recent-posts .other-recent-posts .comments-link > span {
text-align: left; text-align: left;
} }
/* =Attachments
/* =Images
----------------------------------------------- */ ----------------------------------------------- */
.wp-caption .wp-caption-text {
padding: 10px 40px 5px 0px;
}
.wp-caption .wp-caption-text:before {
margin-left: 5px;
right: 10px;
margin-right: auto;
}
/* =Navigation /* =Navigation
-------------------------------------------------------------- */ -------------------------------------------------------------- */
@ -270,12 +354,12 @@ section.recent-posts .other-recent-posts .comments-link > span {
/* Singular navigation */ /* Singular navigation */
#nav-single { #nav-single {
left: 0;
right: auto; right: auto;
left: 0;
} }
#nav-single .nav-next { #nav-single .nav-next {
padding-right: .5em;
padding-left: 0; padding-left: 0;
padding-right: .5em;
} }
@ -283,43 +367,58 @@ section.recent-posts .other-recent-posts .comments-link > span {
----------------------------------------------- */ ----------------------------------------------- */
.widget ul ul { .widget ul ul {
margin-left: 0;
margin-right: 1.5em; margin-right: 1.5em;
margin-left: auto;
} }
/* Twitter */ /* Twitter */
.widget_twitter .timesince { .widget_twitter .timesince {
margin-right: 0;
margin-left: -10px; margin-left: -10px;
text-align: left; text-align: left;
margin-right: auto;
} }
/* =Comments /* =Comments
----------------------------------------------- */ ----------------------------------------------- */
.commentlist .children li.comment { .commentlist .children li.comment {
border-left: none;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
-moz-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
border-left: none;
} }
.commentlist .children li.comment .comment-meta { .commentlist .children li.comment .comment-meta {
margin-left: 0;
margin-right: 50px; margin-right: 50px;
margin-left: auto;
} }
.commentlist .avatar { .commentlist .avatar {
left: auto;
right: -102px; right: -102px;
} }
.commentlist > li:before { .commentlist > li:before {
content: url(images/comment-arrow-rtl.png); content: url(images/comment-arrow-rtl.png);
left:auto;
right: -21px; right: -21px;
} }
.commentlist > li.pingback:before {
content: '';
}
.commentlist .children .avatar {
left: auto;
right: 2.2em;
}
/* Post author highlighting */
.commentlist > li.bypostauthor:before { .commentlist > li.bypostauthor:before {
content: url(images/comment-arrow-bypostauthor-rtl.png); content: url(images/comment-arrow-bypostauthor-rtl.png);
} }
.commentlist .children .avatar {
right: 2.2em; /* sidebar-page.php comments */
/* Make sure we have room for our comment avatars */
.page-template-sidebar-page-php .commentlist > li.comment,
.page-template-sidebar-page-php.commentlist .pingback {
margin-left: 0;
margin-right: 102px;
} }
/* Comment Form */ /* Comment Form */
@ -327,63 +426,65 @@ section.recent-posts .other-recent-posts .comments-link > span {
#respond .comment-form-email label, #respond .comment-form-email label,
#respond .comment-form-url label, #respond .comment-form-url label,
#respond .comment-form-comment label { #respond .comment-form-comment label {
left: auto;
right: 4px; right: 4px;
} }
#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-comment label {
-webkit-box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
-moz-box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
}
#respond .comment-form-author .required, #respond .comment-form-author .required,
#respond .comment-form-email .required { #respond .comment-form-email .required {
right: 68%; left: auto;
right: 75%;
} }
#respond .form-submit { #respond .form-submit {
float: left; float: left;
} }
#respond input#submit { #respond input#submit {
left: auto;
right: 30px; right: 30px;
padding: 5px 22px 5px 42px; padding: 5px 22px 5px 42px;
} }
#respond #cancel-comment-reply-link { #respond #cancel-comment-reply-link {
margin-left: 0;
margin-right: 10px; margin-right: 10px;
margin-left: auto;
} }
#cancel-comment-reply-link { #cancel-comment-reply-link {
right: auto;
left: 1.625em; left: 1.625em;
} }
/* =Footer /* =Footer
----------------------------------------------- */ ----------------------------------------------- */
/* Two Footer Widget Areas */ /* Two Footer Widget Areas */
#supplementary.two .widget-area { #supplementary.two .widget-area {
float: right; float: right;
margin-right: 0;
margin-left: 3.7%; margin-left: 3.7%;
margin-right: auto;
} }
#supplementary.two .widget-area + .widget-area { #supplementary.two .widget-area + .widget-area {
margin-left: 0; margin-left: 0;
margin-right: auto;
} }
/* Three Footer Widget Areas */ /* Three Footer Widget Areas */
#supplementary.three .widget-area { #supplementary.three .widget-area {
float: right; float: right;
margin-right: 0;
margin-left: 3.7%; margin-left: 3.7%;
margin-right: auto;
} }
#supplementary.three .widget-area + .widget-area + .widget-area { #supplementary.three .widget-area + .widget-area + .widget-area {
margin-left: 0; margin-left: 0;
margin-right: auto;
} }
/* Simplify the showcase template when small feature */ /* Site Generator Line */
section.featured-post .attachment-small-feature, #site-generator .sep {
.one-column section.featured-post .attachment-small-feature { background-position: right center;
float: right;
}
article.feature-image.small {
float: left;
}
article.feature-image.small .entry-summary a {
right: -9%;
} }
@ -391,18 +492,6 @@ article.feature-image.small .entry-summary a {
----------------------------------------------- */ ----------------------------------------------- */
@media (max-width: 800px) { @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 */ /* Simplify the showcase template when small feature */
section.featured-post .attachment-small-feature, section.featured-post .attachment-small-feature,
.one-column section.featured-post .attachment-small-feature { .one-column section.featured-post .attachment-small-feature {
@ -411,57 +500,60 @@ article.feature-image.small .entry-summary a {
article.feature-image.small { article.feature-image.small {
float: left; float: left;
} }
article.feature-image.small .entry-summary a { article.feature-image.small .entry-summary p a {
right: -9%; right: 0;
} }
.singular .entry-meta .edit-link a {
/* Make sure the logo and search form don't collide */ left: auto;
#branding #searchform { right: 0px;
left: 1px;
} }
} /* Make sure we have room for our comment avatars */
.commentlist > li.comment,
@media (max-width: 800px) { .commentlist .pingback {
/* 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-left: 0;
margin-right: auto; margin-right: 102px;
} }
/* No need to float footer widgets at this size */
/* Simplify the showcase template when small feature */ #colophon #supplementary .widget-area {
section.featured-post .attachment-small-feature, margin-left: 0;
.one-column section.featured-post .attachment-small-feature {
float: right;
} }
article.feature-image.small { /* No need to float 404 widgets at this size */
float: left; .error404 #main .widget {
} margin-left: 0;
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) {
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
#primary { #site-title,
float: right; #site-description {
margin-left: 0;
} }
.commentlist .avatar { /* Talking avatars take up too much room at this size */
.commentlist > li.comment,
.commentlist > li.pingback {
margin-right: 0 !important;
}
.commentlist .children .avatar {
left: auto;
right: 2.2em; right: 2.2em;
} }
/* Use the available space in the smaller comment form */
#respond .comment-form-author .required,
#respond .comment-form-email .required {
left: auto;
right: 95%;
}
#content .gallery-columns-3 .gallery-item {
padding-right: 0;
padding-left:2%;
}
}
@media (max-width: 450px) {
#content .gallery-columns-2 .gallery-item {
padding-right:0;
padding-left:4%;
}
} }
/* =Print /* =Print
----------------------------------------------- */ ----------------------------------------------- */
@ -470,30 +562,21 @@ article.feature-image.small .entry-summary a {
#primary { #primary {
float: right; float: right;
} }
/* Comments */ /* Comments */
.commentlist .avatar { .commentlist .avatar {
left: auto;
right: 2.2em; right: 2.2em;
} }
.commentlist li.comment .comment-meta {
margin-left: 0;
margin-right: 50px;
}
} }
/* =IE7 /* =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 { #ie7 section.recent-posts {
margin-right: 0;
margin-left: 7.6%; margin-left: 7.6%;
margin-right: auto;
} }

View File

@ -101,7 +101,7 @@ body {
margin: 0; margin: 0;
} }
.singular #content, .singular #content,
.sidebar-content.singular #content { .left-sidebar.singular #content {
margin: 0 7.6%; margin: 0 7.6%;
position: relative; position: relative;
width: auto; width: auto;
@ -126,11 +126,11 @@ body {
/* Showcase */ /* Showcase */
.page-template-showcase-php #primary, .page-template-showcase-php #primary,
.sidebar-content.page-template-showcase-php #primary { .left-sidebar.page-template-showcase-php #primary {
margin: 0; margin: 0;
} }
.page-template-showcase-php #content, .page-template-showcase-php #content,
.sidebar-content.page-template-showcase-php #content { .left-sidebar.page-template-showcase-php #content {
margin: 0 7.6%; margin: 0 7.6%;
width: auto; width: auto;
} }
@ -174,16 +174,16 @@ body {
} }
/* Right Content */ /* Right Content */
.sidebar-content #primary { .left-sidebar #primary {
float: right; float: right;
margin: 0 0 0 -26.4%; margin: 0 0 0 -26.4%;
width: 100%; width: 100%;
} }
.sidebar-content #content { .left-sidebar #content {
margin: 0 7.6% 0 34%; margin: 0 7.6% 0 34%;
width: 58.4%; width: 58.4%;
} }
.sidebar-content #secondary { .left-sidebar #secondary {
float: left; float: left;
margin-left: 7.6%; margin-left: 7.6%;
margin-right: 0; margin-right: 0;
@ -2043,14 +2043,6 @@ a.comment-reply-link {
top: 40px; top: 40px;
z-index: 1; z-index: 1;
} }
.rtl #respond .comment-form-author label,
.rtl #respond .comment-form-email label,
.rtl #respond .comment-form-url label,
.rtl #respond .comment-form-comment label {
-webkit-box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
-moz-box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
}
#respond input[type="text"]:focus, #respond input[type="text"]:focus,
#respond textarea:focus { #respond textarea:focus {
text-indent: 0; text-indent: 0;