WordPress.org

Make WordPress Core

Changeset 18181


Ignore:
Timestamp:
06/07/11 21:28:56 (3 years ago)
Author:
iandstewart
Message:

Twenty Eleven: miscellaneous bug fixes and improvements

  • Only style images uploaded to the WordPress media library with border styles (and not placeholder images for content added by plugins)
  • Prevent content added by plugins and long custom excerpts from overflowing the featured post slider
  • Make sure small thumbnails will never appear in the Custom Header area
  • Better indicate the current featured post with custom link color and cursor
  • Add a class for text-only featured posts
  • Style improvements for small screens
Location:
trunk/wp-content/themes/twentyeleven
Files:
5 edited

Legend:

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

    r18172 r18181  
    158158 
    159159/* Image borders */ 
    160 .entry-content img, 
    161 .widget img, 
     160img[class*="wp-image-"], 
    162161#content .gallery .gallery-icon img { 
    163162    border-color: #2c2c2c; 
     
    166165    border-color: #2c2c2c; 
    167166} 
    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 { 
     167a:focus img[class*="wp-image-"], 
     168a:hover img[class*="wp-image-"], 
     169a:active img[class*="wp-image-"] { 
    174170    background: #2c2c2c; 
    175171    border-color: #444; 
     
    326322 
    327323/* Featured Slider */ 
    328 .featured-posts { 
    329     border-bottom: 1px solid #171717; 
    330 } 
    331324.featured-posts section.featured-post { 
    332325    background: #000; 
     326} 
     327.featured-post .feature-text:after, 
     328.featured-post .feature-image.small:after { 
     329    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ 
     330    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ 
     331    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ 
     332    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera11.10+ */ 
     333    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ 
     334    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ 
     335    background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */ 
    333336} 
    334337.feature-slider a { 
  • trunk/wp-content/themes/twentyeleven/header.php

    r18117 r18181  
    8787                    if ( is_singular() && 
    8888                            has_post_thumbnail( $post->ID ) && 
    89                             ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) && 
     89                            ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) && 
    9090                            $image[1] >= HEADER_IMAGE_WIDTH ) : 
    9191                        // Houston, we have a new header image! 
  • trunk/wp-content/themes/twentyeleven/inc/theme-options.php

    r18152 r18181  
    347347        .entry-header .comments-link a:hover, 
    348348        .entry-header .comments-link a:focus, 
    349         .entry-header .comments-link a:active { 
     349        .entry-header .comments-link a:active, 
     350        .feature-slider a.active { 
    350351            background: <?php echo $link_color; ?>; 
    351352        } 
  • trunk/wp-content/themes/twentyeleven/showcase.php

    r17959 r18181  
    9090                            $feature_class = 'feature-image large'; 
    9191                        } 
     92                    } else { 
     93                        $feature_class = 'feature-text'; 
    9294                    } 
    9395                ?> 
  • trunk/wp-content/themes/twentyeleven/style.css

    r18175 r18181  
    834834 
    835835/* Images */ 
    836 img.size-auto, 
    837 img.size-large, 
    838 img.size-full, 
    839 img.size-medium, 
    840 img.size-thumbnail { 
     836img[class*="wp-image-"] { 
    841837    height: auto; 
    842838    max-width: 97.5%; 
     
    913909 
    914910/* Image borders */ 
    915 .entry-content img, 
    916 .widget img, 
     911img[class*="wp-image-"], 
    917912#content .gallery .gallery-icon img { 
    918913    border: 1px solid #ddd; 
     
    922917    border-color: #eee; 
    923918} 
    924 .entry-content a:focus img, 
    925 .entry-content a:hover img, 
    926 .entry-content a:active img, 
    927 .widget a:focus img, 
    928 .widget a:hover img, 
    929 .widget a:active img { 
     919a:focus img[class*="wp-image-"], 
     920a:hover img[class*="wp-image-"], 
     921a:active img[class*="wp-image-"] { 
    930922    background: #eee; 
    931923    border-color: #bbb; 
     
    13681360/* Small featured post */ 
    13691361section.featured-post .attachment-small-feature { 
    1370     border-right: 20px solid #bbb; 
    13711362    float: right; 
    13721363    height: auto; 
     
    13741365    max-width: 59%; 
    13751366    position: relative; 
    1376     right: -35px; 
     1367    right: -15px; 
    13771368} 
    13781369section.featured-post.small { 
    13791370    padding-top: 0; 
    13801371} 
    1381 section.featured-post .attachment-small-feature:hover { 
    1382     border-color: #888; 
     1372section.featured-post .attachment-small-feature:hover, 
     1373section.featured-post .attachment-small-feature:focus, 
     1374section.featured-post .attachment-small-feature:active { 
     1375    opacity: .8; 
    13831376} 
    13841377article.feature-image.small { 
     
    14041397    top: 20px; 
    14051398    width: 180px; 
     1399    z-index: 1; 
    14061400} 
    14071401article.feature-image.small .entry-summary p a:hover { 
     
    14561450/* Featured Slider */ 
    14571451.featured-posts { 
    1458     border-bottom: 1px solid #e8e8e8; 
     1452    border-bottom: 1px solid #ddd; 
    14591453    display: block; 
    14601454    height: 328px; 
     
    14631457    padding: 0; 
    14641458    position: relative; 
     1459    overflow: hidden; 
    14651460} 
    14661461.featured-posts .showcase-heading { 
     
    14961491    visibility: visible; 
    14971492} 
     1493.featured-post .feature-text:after, 
     1494.featured-post .feature-image.small:after { 
     1495    content: ' '; 
     1496    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ 
     1497    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ 
     1498    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ 
     1499    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera11.10+ */ 
     1500    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */ 
     1501    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ 
     1502    background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */ 
     1503    width: 100%; 
     1504    height: 45px; 
     1505    position: absolute; 
     1506    top: 230px; 
     1507} 
     1508.featured-post .feature-image.small:after { 
     1509    top: 253px; 
     1510} 
    14981511#content .feature-slider { 
    14991512    top: 5px; 
     
    15231536} 
    15241537.feature-slider a.active { 
    1525     background: #fff; 
    1526     background: rgba(255,255,255,0.8); 
     1538    background: #1982d1; 
    15271539    -webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8); 
    15281540    -moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8); 
    15291541    box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8); 
     1542    cursor: default; 
     1543    opacity: 0.5; 
    15301544} 
    15311545 
     
    21702184    font-size: 12px; 
    21712185    line-height: 2.2em; 
    2172     padding: 2.2em 0; 
     2186    padding: 2.2em 0.5em; 
    21732187    text-align: center; 
    21742188} 
     
    23062320} 
    23072321@media (max-width: 650px) { 
     2322    /* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */ 
     2323    body, input, textarea { 
     2324        font-size: 13px; 
     2325    } 
     2326    #site-title a { 
     2327        font-size: 24px; 
     2328    } 
     2329    #site-description { 
     2330        font-size: 12px; 
     2331    } 
     2332    #access ul { 
     2333        font-size: 12px; 
     2334    } 
     2335    article.intro .entry-content { 
     2336        font-size: 12px; 
     2337    } 
     2338    .entry-title { 
     2339        font-size: 21px; 
     2340    } 
     2341    .featured-post .entry-title { 
     2342        font-size: 14px; 
     2343    } 
     2344    .singular .entry-title { 
     2345        font-size: 28px; 
     2346    } 
     2347    .entry-meta { 
     2348        font-size: 12px; 
     2349    } 
     2350    blockquote { 
     2351        margin: 0; 
     2352    } 
     2353    blockquote.pull { 
     2354        font-size: 17px; 
     2355    } 
    23082356    /* Reposition the site title and description slightly */ 
    23092357    #site-title { 
     
    23302378        position: static; 
    23312379    } 
     2380    .singular .hentry { 
     2381        padding: 1.625em 0 0; 
     2382    } 
     2383    .singular.page .hentry { 
     2384        padding: 1.625em 0 0; 
     2385    } 
    23322386    /* Talking avatars take up too much room at this size */ 
    23332387    .commentlist > li.comment, 
     
    23772431@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
    23782432    body { 
    2379         padding: 0 .5em; 
     2433        padding: 0; 
     2434    } 
     2435    #page { 
     2436        margin-top: 0; 
     2437    } 
     2438    #branding { 
     2439        border-top: none; 
    23802440    } 
    23812441} 
Note: See TracChangeset for help on using the changeset viewer.