WordPress.org

Make WordPress Core

Changeset 17790


Ignore:
Timestamp:
05/03/2011 08:16:34 PM (7 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:
4 added
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-content/themes/twentyeleven/functions.php

    r17776 r17790  
    175175            /* translators: header image description */
    176176            'description' => __( 'Lanterns', 'twentyeleven' )
     177        ),
     178        'willow' => array(
     179            'url' => '%s/images/headers/willow.jpg',
     180            'thumbnail_url' => '%s/images/headers/willow-thumbnail.jpg',
     181            /* translators: header image description */
     182            'description' => __( 'Willow', 'twentyeleven' )
     183        ),
     184        'hanoi' => array(
     185            'url' => '%s/images/headers/hanoi.jpg',
     186            'thumbnail_url' => '%s/images/headers/hanoi-thumbnail.jpg',
     187            /* translators: header image description */
     188            'description' => __( 'Hanoi Plant', 'twentyeleven' )
    177189        )
    178190    ) );
  • trunk/wp-content/themes/twentyeleven/rtl.css

    r17669 r17790  
    1010*/
    1111
     12/* =Global
     13----------------------------------------------- */
     14
    1215body {
    1316    direction: rtl;
    1417    unicode-bidi: embed;
    1518}
     19caption, th, td {
     20    text-align: right;
     21}
     22ul, ol {
     23    margin: 0 2.5em 1.625em 0;
     24}
     25textarea {
     26    padding-right: 3px;
     27    padding-left: 0;
     28}
     29
     30
     31/* =Menu
     32-------------------------------------------------------------- */
     33
    1634#access {
    1735    float: right;
    18     margin: 0 auto 1em;
    1936}
    2037#access ul {
     38    margin: 0 -0.8125em 0 0;
    2139    padding-right: 0;
     40    padding-left: 0;
    2241}
    2342#access li {
     
    2544}
    2645#access ul ul {
    27     box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    28     -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    29     -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    3046    float: right;
    3147    right: 0;
    32     left: auto;
     48    right: auto;
    3349}
    3450#access ul ul ul {
    3551    right: 100%;
    36     left: auto;
    37 }
    38 #content nav .nav-previous {
    39     float: right;
    40 }
    41 #content nav .nav-next {
    42     float: left;
     52    right: auto;
     53}
     54
     55/* Search Form */
     56#branding #searchform {
     57    left: 7.6%;
    4358    text-align: left;
    44 }
     59    left: auto;
     60}
     61
     62#branding #s {
     63    float: left;
     64    padding: 4px 28px 4px 10px;
     65}
     66
     67
     68/* =Content
     69----------------------------------------------- */
     70
     71.entry-title,
     72.entry-header .entry-meta {
     73    padding-left: 76px;
     74    padding-right: 0;
     75}
     76.entry-content td,
     77.comment-content td {
     78    padding: 6px 0 6px 10px;
     79}
     80.page-link span {
     81    margin-left: 6px;
     82    margin-right: auto;
     83}
     84.entry-meta .edit-link a {
     85    float: left;
     86}
     87
     88/* Author Info */
     89.singular #author-info {
     90    margin: 2.2em -35.4% 0 -35.6%;
     91}
     92#author-avatar {
     93    float: right;
     94    margin-left: -78px;
     95    margin-right: auto;
     96}
     97#author-description {
     98    float: right;
     99    margin-right: 108px;
     100    margin-left: auto;
     101}
     102
     103/* Comments link */
     104.entry-header .comments-link a {
     105    left: 0;
     106    right: auto;
     107}
     108
     109/* Singular content styles for Posts and Pages */
     110.singular .entry-title,
     111.singular .entry-header .entry-meta {
     112    padding-left: 0;
     113    padding-right: 0;
     114}
     115.singular .entry-header .entry-meta {
     116    right: 0;
     117    right: auto;
     118}
     119.singular .pull.alignright {
     120    margin: 0 -22.25% 0 1.625em;
     121}
     122.singular .pull.alignleft {
     123    margin: 0 1.625em 0 -22.25%;
     124}
     125.singular .entry-meta .edit-link a {
     126    right: 50px;
     127    left: auto;
     128}
     129
     130
     131/* =Gallery
     132----------------------------------------------- */
     133
     134.format-gallery .gallery-thumb {
     135    float: right;
     136    margin-left: 1.625em;
     137    margin-right: auto;
     138}
     139
     140
     141/* =Status
     142----------------------------------------------- */
     143
     144.format-status img.avatar {
     145    float: right;
     146    margin: 4px 0 2px 10px;
     147}
     148
     149
     150/* =Quote
     151----------------------------------------------- */
     152
     153/* =Image
     154----------------------------------------------- */
     155
     156.format-image footer.entry-meta {
     157    margin-left: 2px;
     158    margin-right: auto;
     159}
     160.format-image div.entry-meta {
     161    float: right;
     162}
     163
     164
     165/* =error404
     166----------------------------------------------- */
     167
     168.error404 #main .widget {
     169    float: right;
     170    margin-left: 3.7%;
     171    margin-right: auto;
     172}
     173
     174.error404 #main .widget_archive {
     175    margin-left: 0;
     176    margin-right: auto;
     177}
     178
     179.error404 #main .widget_tag_cloud {
     180    margin-left: 0;
     181    margin-right: auto;
     182}
     183
     184
     185/* =Showcase
     186----------------------------------------------- */
     187
     188/* Intro */
     189article.intro .edit-link a {
     190    left: 20px;
     191    left: auto;
     192}
     193
     194/* Featured post */
     195section.featured-post {
     196    float: right;
     197}
     198
     199/* Small featured post */
     200section.featured-post .attachment-small-feature {
     201    border-left: 20px solid #bbb;
     202    float: left;
     203    margin: -10px 0 1.625em -8.9%;
     204    left: -35px;
     205    left: auto;
     206    border-right: none;
     207}
     208article.feature-image.small {
     209    float: right;
     210}
     211article.feature-image.small .entry-summary p a {
     212    right: -23.8%;
     213    padding: 4px 85px 4px 26px;
     214    right: auto;
     215}
     216
     217/* Large featured post */
     218section.feature-image.large .hentry {
     219    right: 9%;
     220    margin: 1.625em 0 0 9%;
     221    right: auto;
     222}
     223
     224/* Featured Slider */
     225.featured-posts .showcase-heading {
     226    padding-right: 8.9%;
     227    padding-left: 0;
     228}
     229.featured-posts section.featured-post {
     230    right: 0;
     231    right: auto;
     232}
     233#content .feature-slider {
     234    right: 8.9%;
     235    right: auto;
     236}
     237.feature-slider li {
     238    float: right;
     239}
     240
     241/* Recent Posts */
     242section.recent-posts .other-recent-posts a[rel="bookmark"] {
     243    float: right;
     244}
     245section.recent-posts .other-recent-posts .comments-link a,
     246section.recent-posts .other-recent-posts .comments-link > span {
     247    padding: 0.3125em 1em 0.3125em 0;
     248    left: 0;
     249    text-align: left;
     250    left: auto;
     251}
     252
     253
     254/* =Images
     255----------------------------------------------- */
     256
     257.wp-caption .wp-caption-text {
     258    padding: 10px 40px 5px 0px;
     259}
     260.wp-caption .wp-caption-text:before {
     261    margin-left: 5px;
     262    right: 10px;
     263    right: auto;
     264    margin-right: auto;
     265}
     266
     267
     268/* =Navigation
     269-------------------------------------------------------------- */
     270
     271.nav-previous {
     272    float: right;
     273}
     274.nav-next {
     275    float: left;
     276    text-align: left;
     277}
     278
     279/* Singular navigation */
     280#nav-single {
     281    left: 0;
     282    left: auto;
     283}
     284#nav-single .nav-next {
     285    padding-right: .5em;
     286    padding-left: 0;
     287}
     288
     289
     290/* =Widgets
     291----------------------------------------------- */
     292
     293.widget ul ul {
     294    margin-right: 1.5em;
     295    margin-left: auto;
     296}
     297
     298/* Twitter */
     299.widget_twitter .timesince {
     300    margin-left: -10px;
     301    text-align: left;
     302    margin-right: auto;
     303}
     304
     305
     306/* =Comments
     307----------------------------------------------- */
     308
     309.commentlist .children li.comment {
     310    border-right: 1px solid #ddd;
     311    -moz-border-radius: 0 0 3px 3px;
     312    border-radius: 0 0 3px 3px;
     313    border-left: none;
     314}
     315.commentlist .children li.comment .comment-meta {
     316    margin-right: 50px;
     317    margin-left: auto;
     318}
     319.commentlist .avatar {
     320    right: -102px;
     321    right: auto;
     322}
     323.commentlist > li:before {
     324    right: -21px;
     325    right: auto;
     326}
     327.commentlist .children .avatar {
     328    right: 2.2em;
     329    right: auto;
     330}
     331
     332/* Comment Form */
     333#respond .comment-form-author label,
     334#respond .comment-form-email label,
     335#respond .comment-form-url label,
     336#respond .comment-form-comment label {
     337    right: 4px;
     338    right: auto;
     339}
     340#respond .comment-form-author .required,
     341#respond .comment-form-email .required {
     342    right: 68%;
     343    right: auto;
     344}
     345#respond .form-submit {
     346    float: left;
     347}
     348#respond input#submit {
     349    right: 30px;
     350    padding: 5px 22px 5px 42px;
     351    right: auto;
     352}
     353#respond #cancel-comment-reply-link {
     354    margin-right: 10px;
     355    margin-left: auto;
     356}
     357#cancel-comment-reply-link {
     358    left: 1.625em;
     359    left: auto;
     360}
     361
     362
     363/* =Footer
     364----------------------------------------------- */
     365
     366/* Two Footer Widget Areas */
     367#supplementary.two .widget-area {
     368    float: right;
     369    margin-left: 3.7%;
     370    margin-right: auto;
     371}
     372#supplementary.two .widget-area + .widget-area {
     373    margin-left: 0;
     374    margin-right: auto;
     375}
     376
     377/* Three Footer Widget Areas */
     378#supplementary.three .widget-area {
     379    float: right;
     380    margin-left: 3.7%;
     381    margin-right: auto;
     382}
     383#supplementary.three .widget-area + .widget-area + .widget-area {
     384    margin-left: 0;
     385    margin-right: auto;
     386}
     387
     388/* Simplify the showcase template when small feature */
     389    section.featured-post .attachment-small-feature,
     390    .one-column section.featured-post .attachment-small-feature {
     391    float: right;
     392}
     393article.feature-image.small {
     394    float: left;
     395}
     396article.feature-image.small .entry-summary a {
     397    right: -9%;
     398    right: auto;
     399}
     400
     401
     402/* =Responsive Structure
     403----------------------------------------------- */
     404
     405@media (max-width: 800px) {
     406
     407/* Three Footer Widget Areas */
     408#supplementary.three .widget-area {
     409    float: right;
     410    margin-left: 3.7%;
     411    margin-right: auto;
     412}
     413#supplementary.three .widget-area + .widget-area + .widget-area {
     414    margin-left: 0;
     415    margin-right: auto;
     416}
     417
     418/* Simplify the showcase template when small feature */
     419    section.featured-post .attachment-small-feature,
     420    .one-column section.featured-post .attachment-small-feature {
     421    float: right;
     422}
     423article.feature-image.small {
     424    float: left;
     425}
     426article.feature-image.small .entry-summary a {
     427    right: -9%;
     428    right: auto;
     429}
     430}
     431
     432/* Make sure the logo and search form don't collide */
     433    #branding #searchform {
     434    left: 1px;
     435}
     436
     437@media (max-width: 650px) {
     438
     439/* Remove the margin on singular articles */
     440
     441/* =Responsive Structure
     442----------------------------------------------- */
     443
     444@media (max-width: 800px) {
     445
     446    /* Three Footer Widget Areas */
     447    #supplementary.three .widget-area {
     448        float: right;
     449        margin-left: 3.7%;
     450        margin-right: auto;
     451    }
     452    #supplementary.three .widget-area + .widget-area + .widget-area {
     453        margin-left: 0;
     454        margin-right: auto;
     455    }
     456
     457    /* Simplify the showcase template when small feature */
     458        section.featured-post .attachment-small-feature,
     459        .one-column section.featured-post .attachment-small-feature {
     460        float: right;
     461    }
     462    article.feature-image.small {
     463        float: left;
     464    }
     465    article.feature-image.small .entry-summary a {
     466        right: -9%;
     467        right: auto;
     468    }
     469
     470    /* Make sure the logo and search form don't collide */
     471    #branding #searchform {
     472    left: 1px;
     473    left: auto;
     474    }
     475}
     476
     477@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
     478    #primary {
     479        float: right;
     480    }
     481    .commentlist .avatar {
     482        right: 2.2em;
     483        right: auto;
     484    }
     485}
     486
     487
     488/* =Print
     489----------------------------------------------- */
     490
     491@media print {
     492    #primary {
     493        float: right;
     494    }
     495
     496    /* Comments */
     497    .commentlist .avatar {
     498        right: 2.2em;
     499        right: auto;
     500    }
     501}
     502
     503
     504/* =IE7
     505----------------------------------------------- */
     506
     507#ie7 article.intro {
     508    margin-right: -7.6%;
     509    margin-left: -7.6%;
     510    padding-right: -7.6%;
     511    padding-left: -7.6%;
     512}
     513
     514#ie7 section.featured-post {
     515    margin-right: -7.6%;
     516    margin-left: -7.6%;
     517}
     518
     519#ie7 section.recent-posts {
     520    margin-left: 7.6%;
     521    margin-right: auto;
     522}
  • trunk/wp-content/themes/twentyeleven/showcase.php

    r17787 r17790  
    3939                     *
    4040                     * See if we have any sticky posts and use them to create our featured posts.
     41                     * We limit the featured posts at ten.
    4142                     */
    4243                    $sticky = get_option( 'sticky_posts' );
    4344                    $featured_args = array(
    44                         'posts_per_page' => 4,
     45                        'posts_per_page' => 10,
    4546                        'post__in' => $sticky,
    4647                    );
  • trunk/wp-content/themes/twentyeleven/style.css

    r17788 r17790  
    300300    top: 2.2em;
    301301    left: 2.2em;
     302}
     303.one-column #respond {
     304    width: auto;
    302305}
    303306
     
    854857    text-transform: lowercase;
    855858}
    856 /* Post Formats */
     859/*
     860    Post Formats Headings
     861    To hide the headings, display: none the ".entry-header .entry-format" selector,
     862    and remove the padding rules below.
     863*/
    857864.entry-header .entry-format {
    858865    color: #666;
     
    16671674    padding: 1.625em;
    16681675    position: relative;
     1676    width: 68.9%;
     1677}
     1678.commentlist .pingback {
     1679    margin: 0 auto 1.625em;
     1680    padding: 0 1.625em;
    16691681    width: 68.9%;
    16701682}
     
    20442056    }
    20452057    /* Make sure we have room for our comment avatars */
    2046     .commentlist > li.comment {
     2058    .commentlist > li.comment,
     2059    .commentlist .pingback {
    20472060        margin-left: 102px;
    20482061        width: auto;
     
    20822095    }
    20832096    /* Talking avatars take up too much room at this size */
    2084     .commentlist > li.comment {
     2097    .commentlist > li.comment,
     2098    .commentlist > li.pingback {
    20852099        margin-left: 0;
    20862100    }
Note: See TracChangeset for help on using the changeset viewer.