Make WordPress Core

Changeset 18181


Ignore:
Timestamp:
06/07/2011 09:28:56 PM (13 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.