WordPress.org

Make WordPress Core

Changeset 18132


Ignore:
Timestamp:
06/03/2011 09:11:41 PM (7 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.