WordPress.org
Get WordPress

Make WordPress Core

Changeset 21404


Ignore:
Timestamp:
08/02/2012 07:12:11 PM (14 years ago)
Author:
lancewillett
Message:

Twenty Twelve: CSS and markup improvements for better child theme support, part 3. See #21379.

  • Add classes like .site and .site-content in addition to the set of IDs already present, making things much better for child themes to have more than one generic element like nav inside the content container.
  • Bump JS version after selector change.
  • Move image-attachment to post_class() output

More exhaustive notes in the ticket on each id and class change.

Location:
trunk/wp-content/themes/twentytwelve
Files:
17 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-content/themes/twentytwelve/404.php

    r21261 r21404  
    1010get_header(); ?>
    1111
    12         <div id="primary">
     12        <div id="primary" class="site-content">
    1313                <div id="content" role="main">
    1414
    … …  
    2525
    2626                </div><!-- #content -->
    27         </div><!-- #primary -->
     27        </div><!-- #primary .site-content -->
    2828
    2929<?php get_footer(); ?>

  • trunk/wp-content/themes/twentytwelve/archive.php

    r21331 r21404  
    1515get_header(); ?>
    1616
    17         <section id="primary">
     17        <section id="primary" class="site-content">
    1818                <div id="content" role="main">
    1919
    … …  
    7272
    7373                </div><!-- #content -->
    74         </section><!-- #primary -->
     74        </section><!-- #primary .site-content -->
    7575
    7676<?php get_sidebar(); ?>

  • trunk/wp-content/themes/twentytwelve/author.php

    r21261 r21404  
    1010get_header(); ?>
    1111
    12         <section id="primary">
     12        <section id="primary" class="site-content">
    1313                <div id="content" role="main">
    1414
    … …  
    6565
    6666                </div><!-- #content -->
    67         </section><!-- #primary -->
     67        </section><!-- #primary .site-content -->
    6868
    6969<?php get_sidebar(); ?>

  • trunk/wp-content/themes/twentytwelve/comments.php

    r21261 r21404  
    2222                        return;
    2323?>
    24         <div id="comments">
     24<div id="comments" class="comments-area">
    2525
    2626        <?php // You can start editing here -- including this comment! ?>
    2727
    2828        <?php if ( have_comments() ) : ?>
    29                 <h2 id="comments-title">
     29                <h2 class="comments-title">
    3030                        <?php
    3131                                printf( _n( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'twentytwelve' ),
    … …  
    3939
    4040                <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
    41                 <nav id="comment-nav-below" role="navigation">
     41                <nav id="comment-nav-below" class="navigation" role="navigation">
    4242                        <h1 class="assistive-text section-heading"><?php _e( 'Comment navigation', 'twentytwelve' ); ?></h1>
    4343                        <div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentytwelve' ) ); ?></div>
    … …  
    5454        <?php comment_form(); ?>
    5555
    56 </div><!-- #comments -->
     56</div><!-- #comments .comments-area -->

  • trunk/wp-content/themes/twentytwelve/footer.php

    r21261 r21404  
    1010 */
    1111?>
    12         </div><!-- #main -->
     12        </div><!-- #main .wrapper -->
    1313        <footer id="colophon" role="contentinfo">
    1414                <div class="site-info">
    … …  
    1717                </div><!-- .site-info -->
    1818        </footer><!-- #colophon -->
    19 </div><!-- #page -->
     19</div><!-- #page .site -->
    2020
    2121<?php wp_footer(); ?>

  • trunk/wp-content/themes/twentytwelve/full-width-page.php

    r21261 r21404  
    1010get_header(); ?>
    1111
    12         <div id="primary">
     12        <div id="primary" class="site-content">
    1313                <div id="content" role="main">
    1414
    … …  
    1919
    2020                </div><!-- #content -->
    21         </div><!-- #primary -->
     21        </div><!-- #primary .site-content -->
    2222
    2323<?php get_footer(); ?>

  • trunk/wp-content/themes/twentytwelve/functions.php

    r21398 r21404  
    105105         * styles for small screen sizes.
    106106         */
    107         wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20130320', true );
     107        wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20120802', true );
    108108
    109109        /**
    … …  
    215215
    216216        if ( $wp_query->max_num_pages > 1 ) : ?>
    217                 <nav id="<?php echo $nav_id; ?>" role="navigation">
     217                <nav id="<?php echo $nav_id; ?>" class="navigation" role="navigation">
    218218                        <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
    219219                        <div class="nav-previous alignleft"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentytwelve' ) ); ?></div>

  • trunk/wp-content/themes/twentytwelve/header.php

    r21276 r21404  
    2424
    2525<body <?php body_class(); ?>>
    26 <div id="page" class="hfeed">
     26<div id="page" class="hfeed site">
    2727        <header id="masthead" class="site-header" role="banner">
    2828                <hgroup>
    … …  
    3131                </hgroup>
    3232
    33                 <nav class="site-navigation main-navigation" role="navigation">
     33                <nav class="main-navigation" role="navigation">
    3434                        <h3 class="assistive-text"><?php _e( 'Show navigation', 'twentytwelve' ); ?></h3>
    3535                        <div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
    … …  
    4343        </header><!-- #masthead -->
    4444
    45         <div id="main">
     45        <div id="main" class="wrapper">

  • trunk/wp-content/themes/twentytwelve/homepage.php

    r21398 r21404  
    1010get_header(); ?>
    1111
    12         <div id="primary">
     12        <div id="primary" class="site-content">
    1313                <div id="content" role="main">
    1414
    … …  
    2525
    2626                </div><!-- #content -->
    27         </div><!-- #primary -->
     27        </div><!-- #primary .site-content -->
    2828
    2929<?php get_sidebar( 'home' ); ?>

  • trunk/wp-content/themes/twentytwelve/image.php

    r21261 r21404  
    1010get_header(); ?>
    1111
    12         <div id="primary" class="image-attachment">
     12        <div id="primary" class="site-content">
    1313                <div id="content" role="main">
    1414
    1515                <?php while ( have_posts() ) : the_post(); ?>
    1616
    17                                 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
     17                                <article id="post-<?php the_ID(); ?>" <?php post_class( 'image-attachment' ); ?>>
    1818                                        <header class="entry-header">
    1919                                                <h1 class="entry-title"><?php the_title(); ?></h1>
    … …  
    3636                                                </footer><!-- .entry-meta -->
    3737
    38                                                 <nav id="image-navigation" role="navigation">
     38                                                <nav id="image-navigation" class="navigation" role="navigation">
    3939                                                        <span class="previous-image"><?php previous_image_link( false, __( '&larr; Previous', 'twentytwelve' ) ); ?></span>
    4040                                                        <span class="next-image"><?php next_image_link( false, __( 'Next &rarr;', 'twentytwelve' ) ); ?></span>
    … …  
    9898
    9999                </div><!-- #content -->
    100         </div><!-- #primary -->
     100        </div><!-- #primary .site-content -->
    101101
    102102<?php get_footer(); ?>

  • trunk/wp-content/themes/twentytwelve/index.php

    r21261 r21404  
    1616get_header(); ?>
    1717
    18         <div id="primary">
     18        <div id="primary" class="site-content">
    1919                <div id="content" role="main">
    2020                <?php if ( have_posts() ) : ?>
    … …  
    6060
    6161                </div><!-- #content -->
    62         </div><!-- #primary -->
     62        </div><!-- #primary .site-content -->
    6363
    6464<?php get_sidebar(); ?>

  • trunk/wp-content/themes/twentytwelve/js/theme.js

    r21261 r21404  
    1111
    1212        $.fn.smallMenu = function() {
    13                 masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
    14                 masthead.find( '.site-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
     13                masthead.find( '.main-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
     14                masthead.find( '.main-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
    1515
    1616                $( '.menu-toggle' ).off( 'click' ).click( function() {
    … …  
    3333                                $.fn.smallMenu();
    3434                        } else {
    35                                 masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
    36                                 masthead.find( '.site-navigation h3' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
     35                                masthead.find( '.main-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
     36                                masthead.find( '.main-navigation h3' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
    3737                                masthead.find( '.menu' ).removeAttr( 'style' );
    3838                        }

  • trunk/wp-content/themes/twentytwelve/page.php

    r21261 r21404  
    1515get_header(); ?>
    1616
    17         <div id="primary">
     17        <div id="primary" class="site-content">
    1818                <div id="content" role="main">
    1919
    … …  
    2424
    2525                </div><!-- #content -->
    26         </div><!-- #primary -->
     26        </div><!-- #primary .site-content -->
    2727
    2828<?php get_sidebar(); ?>

  • trunk/wp-content/themes/twentytwelve/rtl.css

    r21402 r21404  
    2525        float: left;
    2626}
    27 #content .gallery-columns-4 .gallery-item {
     27.site-content .gallery-columns-4 .gallery-item {
    2828        padding-left: 2%;
    2929        padding-right: 0;
    3030}
    31 #content .gallery-columns-5 .gallery-item {
     31.site-content .gallery-columns-5 .gallery-item {
    3232        padding-left: 2%;
    3333        padding-right: 0;
    … …  
    118118-------------------------------------------------------------- */
    119119
    120 #comments article header img {
     120.comments-area article header img {
    121121        float: right;
    122122}
    123 #comments article header cite,
    124 #comments article header time {
     123.comments-area article header cite,
     124.comments-area article header time {
    125125        margin-right: 85px;
    126126        margin-right: 6.071428571rem;
    127127        margin-left: auto;
    128128}
    129 #comments article header h4 {
     129.comments-area article header h4 {
    130130        left: 0;
    131131        right: auto;
    132132}
    133 #comments li.bypostauthor cite span {
     133.comments-area li.bypostauthor cite span {
    134134        margin-right: 5px;
    135135        margin-right: 0.357142857rem;
    … …  
    152152-------------------------------------------------------------- */
    153153
    154 .page-template-homepage-php #secondary aside.widget_text img {
     154.page-template-homepage-php .widget-area .widget_text img {
    155155        float: right;
    156156        margin: 8px 0 8px 24px;
    … …  
    161161-------------------------------------------------------------- */
    162162
    163 .widget ul ul {
     163.widget-area .widget ul ul {
    164164        margin-right: 12px;
    165165        margin-right: 0.857142857rem;
    … …  
    188188/* Minimum width of 600 pixels. */
    189189@media screen and (min-width: 600px) {
    190         .page-template-homepage-php #secondary aside.widget_text img {
     190        .page-template-homepage-php .widget-area .widget_text img {
    191191                float: right;
    192192                margin: 8px 0 8px 24px;

  • trunk/wp-content/themes/twentytwelve/search.php

    r21261 r21404  
    1010get_header(); ?>
    1111
    12         <section id="primary">
     12        <section id="primary" class="site-content">
    1313                <div id="content" role="main">
    1414
    … …  
    4444
    4545                </div><!-- #content -->
    46         </section><!-- #primary -->
     46        </section><!-- #primary .site-content -->
    4747
    4848<?php get_sidebar(); ?>

  • trunk/wp-content/themes/twentytwelve/single.php

    r21261 r21404  
    1010get_header(); ?>
    1111
    12         <div id="primary">
     12        <div id="primary" class="site-content">
    1313                <div id="content" role="main">
    1414
    … …  
    1717                                <?php get_template_part( 'content', get_post_format() ); ?>
    1818
    19                                 <nav id="nav-single">
     19                                <nav class="nav-single">
    2020                                        <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
    2121                                        <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span>', 'twentytwelve' ) . ' %title' ); ?></span>
    2222                                        <span class="nav-next"><?php next_post_link( '%link', '%title ' . __( '<span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></span>
    23                                 </nav><!-- #nav-single -->
     23                                </nav><!-- .nav-single -->
    2424
    2525                                <?php
    … …  
    3232
    3333                </div><!-- #content -->
    34         </div><!-- #primary -->
     34        </div><!-- #primary .site-content -->
    3535
    3636<?php get_sidebar(); ?>

  • trunk/wp-content/themes/twentytwelve/style.css

    r21402 r21404  
    330330        height: auto;
    331331}
    332 #content .gallery-columns-4 .gallery-item {
     332.site-content .gallery-columns-4 .gallery-item {
    333333        width: 23%;
    334334        padding-right: 2%;
    335335}
    336 #content .gallery-columns-5 .gallery-item {
     336.site-content .gallery-columns-5 .gallery-item {
    337337        width: 18%;
    338338        padding-right: 2%;
    … …  
    340340
    341341/* Navigation */
    342 #content nav {
     342.site-content nav {
    343343        clear: both;
    344344        line-height: 2;
    … …  
    366366        width: 50%;
    367367}
    368 #nav-single + #comments,
     368.nav-single + .comments-area,
    369369#comment-nav-above {
    370370        margin: 48px 0;
    … …  
    419419
    420420/* Page structure */
    421 #page {
     421.wrapper {
     422        overflow: hidden;
     423}
     424.site {
    422425        padding: 0 24px;
    423426        padding: 0 1.714285714rem;
    424427        background-color: #fff;
    425428}
    426 #main {
    427         overflow: hidden;
    428 }
    429 #primary {
     429.site-content {
    430430        margin: 24px 0 0;
    431431        margin: 1.714285714rem 0 0;
    432432}
    433 #secondary {
     433.widget-area {
    434434        margin: 24px 0 0;
    435435        margin: 1.714285714rem 0 0;
    … …  
    593593
    594594/* Sidebar */
    595 #secondary aside {
     595.widget-area .widget {
    596596        margin-bottom: 48px;
    597597        margin-bottom: 3.428571429rem;
    598598}
    599 #secondary aside h3 {
     599.widget-area .widget h3 {
    600600        margin-bottom: 24px;
    601601        margin-bottom: 1.714285714rem;
    602602}
    603 #secondary aside p,
    604 #secondary aside li {
     603.widget-area .widget p,
     604.widget-area .widget li {
    605605        font-size: 13px;
    606606        font-size: 0.928571429rem;
    607607        line-height: 1.846153846;
    608608}
    609 #secondary aside a {
     609.widget-area .widget a {
    610610        color: #777;
    611611}
    612 #secondary aside a:hover {
     612.widget-area .widget a:hover {
    613613        color: #21759b;
    614614}
    … …  
    885885        padding: 6px 10px 6px 0;
    886886}
    887 #content article {
     887.site-content article {
    888888        padding-bottom: 24px;
    889889        padding-bottom: 1.714285714rem;
    … …  
    913913-------------------------------------------------------------- */
    914914
    915 .archive #content .archive-header,
     915.archive .site-content .archive-header,
    916916.search .page-header {
    917917        margin-bottom: 48px;
    … …  
    10451045-------------------------------------------------------------- */
    10461046
    1047 #comments-title {
     1047.comments-title {
    10481048        margin-bottom: 48px;
    10491049        margin-bottom: 3.428571429rem;
    … …  
    10531053        font-weight: normal;
    10541054}
    1055 #comments article {
     1055.comments-area article {
    10561056        margin: 24px 0;
    10571057        margin: 1.714285714rem 0;
    10581058        overflow: hidden;
    10591059}
    1060 #comments article header {
     1060.comments-area article header {
    10611061        margin: 0 0 48px;
    10621062        margin: 0 0 3.428571429rem;
    … …  
    10641064        position: relative;
    10651065}
    1066 #comments article header img {
     1066.comments-area article header img {
    10671067        float: left;
    10681068        padding: 0;
    10691069        line-height: 0;
    10701070}
    1071 #comments article header cite,
    1072 #comments article header time {
     1071.comments-area article header cite,
     1072.comments-area article header time {
    10731073        display: block;
    10741074        margin-left: 85px;
    10751075        margin-left: 6.071428571rem;
    10761076}
    1077 #comments article header cite {
     1077.comments-area article header cite {
    10781078        font-style: normal;
    10791079        font-size: 15px;
    … …  
    10811081        line-height: 1.6;
    10821082}
    1083 #comments article header time {
     1083.comments-area article header time {
    10841084        line-height: 1.714285714;
    10851085        text-decoration: none;
    … …  
    10881088        color: #5e5e5e;
    10891089}
    1090 #comments article header a {
     1090.comments-area article header a {
    10911091        text-decoration: none;
    10921092        color: #5e5e5e;
    10931093}
    1094 #comments article header a:hover {
     1094.comments-area article header a:hover {
    10951095        color: #21759b;
    10961096}
    1097 #comments article header cite a {
     1097.comments-area article header cite a {
    10981098        color: #444;
    10991099}
    1100 #comments article header cite a:hover {
     1100.comments-area article header cite a:hover {
    11011101        text-decoration: underline;
    11021102}
    1103 #comments article header h4 {
     1103.comments-area article header h4 {
    11041104        position: absolute;
    11051105        top: 0;
    … …  
    11211121        border: 1px solid #007cbd;
    11221122}
    1123 #comments article p {
     1123.comments-area article p {
    11241124        margin: 24px 0;
    11251125        margin: 1.714285714rem 0;
    11261126        line-height: 1.714285714;
    11271127}
    1128 #comments li.bypostauthor cite span {
     1128.comments-area li.bypostauthor cite span {
    11291129        margin-left: 5px;
    11301130        margin-left: 0.357142857rem;
    … …  
    12201220-------------------------------------------------------------- */
    12211221
    1222 .page-template-homepage-php #content article {
     1222.page-template-homepage-php .site-content article {
    12231223        border: 0;
    12241224        margin-bottom: 0;
    12251225}
    1226 .page-template-homepage-php #secondary {
     1226.page-template-homepage-php .widget-area {
    12271227        clear: both;
    12281228        float: none;
    … …  
    12321232        border-top: 1px solid #ededed;
    12331233}
    1234 .page-template-homepage-php #secondary aside li {
     1234.page-template-homepage-php .widget-area .widget li {
    12351235        margin: 8px 0 0;
    12361236        margin: 0.571428571rem 0 0;
    … …  
    12421242        list-style-position: inside;
    12431243}
    1244 .page-template-homepage-php #secondary aside li a {
     1244.page-template-homepage-php .widget-area .widget li a {
    12451245        color: #777;
    12461246}
    1247 .page-template-homepage-php #secondary aside li a:hover {
     1247.page-template-homepage-php .widget-area .widget li a:hover {
    12481248        color: #21759b;
    12491249}
    1250 .page-template-homepage-php #secondary aside.widget_text img {
     1250.page-template-homepage-php .widget-area .widget_text img {
    12511251        float: left;
    12521252        margin: 8px 24px 8px 0;
    … …  
    12581258-------------------------------------------------------------- */
    12591259
    1260 .widget ul ul {
     1260.widget-area .widget ul ul {
    12611261        margin-left: 12px;
    12621262        margin-left: 0.857142857rem;
    … …  
    13131313                width: 80%;
    13141314        }
    1315         #page {
     1315        .site {
    13161316                margin: 0 auto;
    13171317                max-width: 960px;
    … …  
    13191319                overflow: hidden;
    13201320        }
    1321         #primary {
     1321        .site-content {
    13221322                float: left;
    13231323                width: 65.104166667%;
    13241324        }
    1325         body.page-template-full-width-page-php #primary,
    1326         body.page-template-homepage-php #primary,
    1327         body.single-attachment #primary,
    1328         body.full-width #primary {
     1325        body.page-template-full-width-page-php .site-content,
     1326        body.page-template-homepage-php .site-content,
     1327        body.single-attachment .site-content,
     1328        body.full-width .site-content {
    13291329                width: 100%;
    13301330        }
    1331         #secondary {
     1331        .widget-area {
    13321332                float: right;
    13331333                width: 26.041666667%;
    … …  
    13531353                width: 79.666666667%;
    13541354        }
    1355         .page-template-homepage-php #content,
     1355        .page-template-homepage-php .site-content,
    13561356        .page-template-homepage-php article {
    13571357                overflow: hidden;
    … …  
    13651365                width: 47.916666667%;
    13661366        }
    1367         .page-template-homepage-php #secondary aside {
     1367        .page-template-homepage-php .widget-area .widget {
    13681368                float: left;
    13691369                width: 51.875%;
    … …  
    13711371                margin-bottom: 1.714285714rem;
    13721372        }
    1373         .page-template-homepage-php #secondary aside:nth-child(even) {
     1373        .page-template-homepage-php .widget-area .widget:nth-child(even) {
    13741374                float: right;
    13751375                width: 39.0625%;
    … …  
    13841384                background-color: #e6e6e6;
    13851385        }
    1386         body #page {
     1386        body .site {
    13871387                padding: 0 40px;
    13881388                padding: 0 2.857142857rem;
    … …  
    13961396                background-color: #fff;
    13971397        }
    1398         body.custom-background-empty #page,
    1399         body.custom-background-white #page {
     1398        body.custom-background-empty .site,
     1399        body.custom-background-white .site {
    14001400                padding: 0;
    14011401                margin-top: 0;
    … …  
    14251425                box-shadow: none;
    14261426        }
    1427         #page {
     1427        .site {
    14281428                clear: both !important;
    14291429                display: block !important;
    … …  
    14491449                display: none;
    14501450        }
    1451         nav.site-navigation {
     1451        nav.main-navigation {
    14521452                display: none;
    14531453        }
    1454         #main {
     1454        .wrapper {
    14551455                border-top: none;
    14561456                box-shadow: none;
    14571457        }
    1458         #primary {
     1458        .site-content {
    14591459                float: left;
    14601460                margin: 0;
    14611461                width: 100%;
    14621462        }
    1463         #content {
     1463        .site-content {
    14641464                margin: 0;
    14651465                width: auto;
    14661466        }
    1467         .singular #content {
     1467        .singular .site-content {
    14681468                margin: 0;
    14691469                width: 100%;
    … …  
    14751475                display: none;
    14761476        }
    1477         #content nav {
     1477        .site-content nav {
    14781478                display: none;
    14791479        }
    … …  
    14811481        .singular .entry-content,
    14821482        .singular footer.entry-meta,
    1483         .singular #comments-title {
     1483        .singular .comments-title {
    14841484                margin: 0;
    14851485                width: 100%;
    … …  
    15091509                display: none;
    15101510        }
    1511         #secondary {
     1511        .widget-area {
    15121512                display: none;
    15131513        }
    … …  
    15281528                width: 39px;
    15291529        }
    1530         #comments article header cite,
    1531         #comments article header time {
     1530        .comments-area article header cite,
     1531        .comments-area article header time {
    15321532                margin-left: 50px;
    15331533                margin-left: 3.57142857rem;
Note: See TracChangeset for help on using the changeset viewer.