WordPress.org

Make WordPress Core

Changeset 18132


Ignore:
Timestamp:
06/03/11 21:11:41 (4 years ago)
Author:
iandstewart
Message:

Twenty Eleven: Add border styles to images so we can better style linked images on :focus; includes updates to editor styles and improvements to Image Post styles; See #17524

Location:
trunk/wp-content/themes/twentyeleven
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-content/themes/twentyeleven/colors/dark.css

    r18117 r18132  
    146146} 
    147147 
     148/* Images */ 
     149.wp-caption { 
     150    background: #2c2c2c; 
     151} 
     152.wp-caption .wp-caption-text { 
     153    color: #999; 
     154} 
     155.wp-caption .wp-caption-text:before { 
     156    color: #999; 
     157} 
     158 
     159/* Image borders */ 
     160.entry-content img, 
     161.widget img, 
     162#content .gallery .gallery-icon img { 
     163    border-color: #2c2c2c; 
     164} 
     165.wp-caption img { 
     166    border-color: #2c2c2c; 
     167} 
     168.entry-content a:focus img, 
     169.entry-content a:hover img, 
     170.entry-content a:active img, 
     171.widget a:focus img, 
     172.widget a:hover img, 
     173.widget a:active img { 
     174    background: #2c2c2c; 
     175    border-color: #444; 
     176} 
     177.wp-caption a:focus img, 
     178.wp-caption a:active img, 
     179.wp-caption a:hover img { 
     180    background: #0f0f0f; 
     181    border-color: #2c2c2c; 
     182} 
     183 
    148184/* Password Protected Posts */ 
    149185.post-password-required input[type=password] { 
     
    209245----------------------------------------------- */ 
    210246 
    211 .format-image .entry-meta .edit-link a { 
     247.indexed.format-image .wp-caption { 
     248    background: #242424; 
     249} 
     250.indexed.format-image .entry-meta .edit-link a { 
    212251    color: #ddd; 
    213252} 
    214 .format-image .entry-meta .edit-link a:hover { 
     253.indexed.format-image .entry-meta .edit-link a:hover { 
    215254    color: #fff; 
    216255} 
     
    340379    border-color: #222; 
    341380} 
    342  
    343  
    344 /* =Images 
    345 ----------------------------------------------- */ 
    346  
    347 .wp-caption { 
    348     background: #0b0d12; 
    349 } 
    350 .wp-caption .wp-caption-text { 
    351     color: #999; 
    352 } 
    353 .wp-caption .wp-caption-text:before { 
    354     color: #64759d; 
     381.image-attachment div.attachment a img { 
     382    border-color: #060606; 
     383} 
     384.image-attachment div.attachment a:focus img, 
     385.image-attachment div.attachment a:hover img, 
     386.image-attachment div.attachment a:active img { 
     387    border-color: #2c2c2c; 
     388    background: #0f0f0f; 
    355389} 
    356390 
  • trunk/wp-content/themes/twentyeleven/content-image.php

    r18029 r18132  
    1010 */ 
    1111?> 
    12  
    13     <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
     12    <article id="post-<?php the_ID(); ?>" <?php post_class( 'indexed' ); ?>> 
    1413        <header class="entry-header"> 
    1514            <hgroup> 
     
    2524        </header><!-- .entry-header --> 
    2625 
    27         <?php if ( is_search() ) : // Only display Excerpts for Search ?> 
    28         <div class="entry-summary"> 
    29             <?php the_excerpt(); ?> 
    30         </div><!-- .entry-summary --> 
    31         <?php else : ?> 
    3226        <div class="entry-content"> 
    3327            <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?> 
    3428            <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( '<span>Pages:</span>', 'twentyeleven' ), 'after' => '</div>' ) ); ?> 
    3529        </div><!-- .entry-content --> 
    36         <?php endif; ?> 
    3730 
    3831        <footer class="entry-meta"> 
  • trunk/wp-content/themes/twentyeleven/editor-style.css

    r18127 r18132  
    5050 
    5151/* Text elements */ 
     52p, ul, ol, dl { 
     53    font-weight: 300; 
     54} 
    5255p { 
    5356    margin-bottom: 1.625em; 
     
    248251    margin-top: 0.4em; 
    249252} 
     253img { 
     254    border: 1px solid #ddd; 
     255    padding: 6px; 
     256} 
     257img.alignleft, 
     258img.alignright, 
     259img.aligncenter { 
     260    margin-bottom: 1.625em; 
     261} 
    250262.wp-caption { 
    251     background: #f4f2ed; 
     263    background: #eee; 
    252264    border: none; 
    253265    margin-bottom: 1.625em; 
    254266    max-width: 96%; 
    255     padding: 12px; 
     267    padding: 9px; 
    256268} 
    257269.wp-caption img { 
     
    259271    margin: 5px auto 0 !important; 
    260272    max-width: 98%; 
     273    border-color: #eee; 
    261274} 
    262275.wp-caption .wp-caption-text, 
     
    271284} 
    272285.wp-caption .wp-caption-text:before { 
    273     color: #9b8a62; 
     286    color: #666; 
    274287    content: '\2014'; 
    275288    font-size: 14px; 
     
    281294    top: 7px; 
    282295} 
     296a:focus img, 
     297a:hover img, 
     298a:active img { 
     299    background: #eee; 
     300    border-color: #bbb; 
     301} 
     302.wp-caption a:focus img, 
     303.wp-caption a:active img, 
     304.wp-caption a:hover img { 
     305    background: #fff; 
     306    border-color: #ddd; 
     307} 
  • trunk/wp-content/themes/twentyeleven/style.css

    r18117 r18132  
    827827    clear: both; 
    828828    display: block; 
     829} 
     830 
     831/* Images */ 
     832img.size-auto, 
     833img.size-large, 
     834img.size-full, 
     835img.size-medium, 
     836img.size-thumbnail { 
     837    height: auto; 
     838    max-width: 97.5%; 
     839} 
     840img.wp-smiley { 
     841    margin-bottom: 0; 
     842    margin-top: 0; 
     843} 
     844img.alignleft, 
     845img.alignright, 
     846img.aligncenter { 
     847    margin-bottom: 1.625em; 
     848} 
     849p img, 
     850.wp-caption { 
     851    margin-top: 0.4em; 
     852} 
     853.wp-caption { 
     854    background: #eee; 
     855    margin-bottom: 1.625em; 
     856    max-width: 96%; 
     857    padding: 9px; 
     858} 
     859.wp-caption img { 
     860    display: block; 
     861    margin: 0 auto; 
     862    max-width: 98%; 
     863} 
     864.wp-caption .wp-caption-text, 
     865.gallery-caption { 
     866    color: #666; 
     867    font-family: Georgia, serif; 
     868    font-size: 12px; 
     869} 
     870.wp-caption .wp-caption-text { 
     871    margin-bottom: 0.6em; 
     872    padding: 10px 0px 5px 40px; 
     873    position: relative; 
     874} 
     875.wp-caption .wp-caption-text:before { 
     876    color: #666; 
     877    content: '\2014'; 
     878    font-size: 14px; 
     879    font-style: normal; 
     880    font-weight: bold; 
     881    margin-right: 5px; 
     882    position: absolute; 
     883    left: 10px; 
     884    top: 7px; 
     885} 
     886.gallery { 
     887    margin: 0 auto 1.625em !important; 
     888} 
     889#content .gallery a img { 
     890    border: none; 
     891} 
     892img#wpstats { 
     893    display: block; 
     894    margin: 0 auto 1.625em; 
     895} 
     896 
     897/* Image borders */ 
     898.entry-content img, 
     899.widget img, 
     900#content .gallery .gallery-icon img { 
     901    border: 1px solid #ddd; 
     902    padding: 6px; 
     903} 
     904.wp-caption img { 
     905    border-color: #eee; 
     906} 
     907.entry-content a:focus img, 
     908.entry-content a:hover img, 
     909.entry-content a:active img, 
     910.widget a:focus img, 
     911.widget a:hover img, 
     912.widget a:active img { 
     913    background: #eee; 
     914    border-color: #bbb; 
     915} 
     916.wp-caption a:focus img, 
     917.wp-caption a:active img, 
     918.wp-caption a:hover img { 
     919    background: #fff; 
     920    border-color: #ddd; 
    829921} 
    830922 
     
    11051197----------------------------------------------- */ 
    11061198 
    1107 .format-image .entry-content { 
     1199.indexed.format-image .entry-content { 
    11081200    padding-top: 0.5em; 
    11091201} 
    1110 .format-image p { 
    1111     margin: 0; 
    1112 } 
    1113 .format-image footer.entry-meta { 
     1202.indexed.format-image p img { 
     1203    margin-bottom: 0; 
     1204} 
     1205.indexed.format-image footer.entry-meta { 
    11141206    background: #e0e6e8; 
    11151207    margin-top: -6px; 
     
    11171209    overflow: hidden; 
    11181210} 
    1119 .format-image div.entry-meta { 
     1211.indexed.format-image div.entry-meta { 
    11201212    display: inline-block; 
    11211213    float: left; 
    11221214    width: 35%; 
    11231215} 
    1124 .format-image div.entry-meta + div.entry-meta { 
     1216.indexed.format-image div.entry-meta + div.entry-meta { 
    11251217    float: none; 
    11261218    width: 65%; 
    11271219} 
    1128 .format-image .entry-meta span.cat-links, 
    1129 .format-image .entry-meta span.tag-links, 
    1130 .format-image .entry-meta span.comments-link { 
    1131     display: block; 
    1132 } 
    1133 .format-image footer.entry-meta a { 
     1220.indexed.format-image .entry-meta span.cat-links, 
     1221.indexed.format-image .entry-meta span.tag-links, 
     1222.indexed.format-image .entry-meta span.comments-link { 
     1223    display: block; 
     1224} 
     1225.indexed.format-image footer.entry-meta a { 
    11341226    color: #444; 
    11351227} 
    1136 .format-image .wp-caption { 
     1228#content .indexed.format-image img { 
     1229    border: none; 
     1230    max-width: 100%; 
     1231    padding: 0; 
     1232} 
     1233.indexed.format-image .wp-caption { 
    11371234    background: #111; 
    11381235    margin-bottom: 0; 
     
    11401237    padding: 11px; 
    11411238} 
    1142 .format-image .wp-caption .wp-caption-text { 
     1239.indexed.format-image .wp-caption .wp-caption-text { 
    11431240    color: #ddd; 
    11441241} 
    1145 .format-image .wp-caption .wp-caption-text:before { 
     1242.indexed.format-image .wp-caption .wp-caption-text:before { 
    11461243    color: #444; 
    11471244} 
    1148 .single .format-image footer.entry-meta { 
    1149     background: transparent; 
    1150     padding: 30px 0; 
    1151 } 
    1152 .one-column .format-image footer.entry-meta { 
    1153     margin-right: 2px; 
     1245.indexed.format-image a:hover img { 
     1246    opacity: 0.8; 
    11541247} 
    11551248 
     
    15031596    width: 100%; 
    15041597} 
     1598.image-attachment div.attachment a img { 
     1599    border-color: #f9f9f9; 
     1600} 
     1601.image-attachment div.attachment a:focus img, 
     1602.image-attachment div.attachment a:hover img, 
     1603.image-attachment div.attachment a:active img { 
     1604    border-color: #ddd; 
     1605    background: #fff; 
     1606} 
    15051607.image-attachment .entry-caption p { 
    15061608    font-size: 10px; 
     
    15091611    margin: 0 0 2.6em; 
    15101612    text-transform: uppercase; 
    1511 } 
    1512  
    1513  
    1514 /* =Images 
    1515 ----------------------------------------------- */ 
    1516  
    1517 img.size-auto, 
    1518 img.size-large, 
    1519 img.size-full, 
    1520 img.size-medium, 
    1521 img.size-thumbnail { 
    1522     height: auto; 
    1523     max-width: 100%; 
    1524 } 
    1525 img.wp-smiley { 
    1526     margin-bottom: 0; 
    1527     margin-top: 0; 
    1528 } 
    1529 p img, 
    1530 .wp-caption { 
    1531     margin-top: 0.4em; 
    1532 } 
    1533 .wp-caption { 
    1534     background: #f4f2ed; 
    1535     margin-bottom: 1.625em; 
    1536     max-width: 96%; 
    1537     padding: 12px; 
    1538 } 
    1539 .wp-caption img { 
    1540     display: block; 
    1541     margin: 5px auto 0; 
    1542     max-width: 98%; 
    1543 } 
    1544 .wp-caption .wp-caption-text { 
    1545     color: #666; 
    1546     font-family: Georgia, serif; 
    1547     font-size: 12px; 
    1548     margin-bottom: 0.6em; 
    1549     padding: 10px 0px 5px 40px; 
    1550     position: relative; 
    1551 } 
    1552 .wp-caption .wp-caption-text:before { 
    1553     color: #9b8a62; 
    1554     content: '\2014'; 
    1555     font-size: 14px; 
    1556     font-style: normal; 
    1557     font-weight: bold; 
    1558     margin-right: 5px; 
    1559     position: absolute; 
    1560     left: 10px; 
    1561     top: 7px; 
    1562 } 
    1563 .gallery { 
    1564     margin: 0 auto 1.625em !important; 
    1565 } 
    1566 #content .gallery a img { 
    1567     border: none; 
    1568 } 
    1569 .gallery-caption { 
    1570 } 
    1571 img#wpstats { 
    1572     display: block; 
    1573     margin: 0 auto 1.625em; 
    15741613} 
    15751614 
Note: See TracChangeset for help on using the changeset viewer.