WordPress.org

Make WordPress Core

Changeset 17790


Ignore:
Timestamp:
05/03/11 20:16:34 (3 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.