Make WordPress Core

Changeset 22186


Ignore:
Timestamp:
10/11/2012 05:17:55 PM (12 years ago)
Author:
lancewillett
Message:

Twenty Twelve: improve skip link visibility, mimicing the core toolbar skiplink. Closes #22025, see #22087.

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

Legend:

Unmodified
Added
Removed
  • trunk/wp-content/themes/twentytwelve/header.php

    r22049 r22186  
    3939        <nav id="site-navigation" class="main-navigation" role="navigation">
    4040            <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
    41             <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>
     41            <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
    4242            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    4343        </nav><!-- #site-navigation -->
  • trunk/wp-content/themes/twentytwelve/style.css

    r22123 r22186  
    461461
    462462/* Assistive text */
    463 .skip-link,
    464 .screen-reader-text,
    465463.assistive-text {
    466464    position: absolute !important;
    467465    clip: rect(1px, 1px, 1px, 1px);
    468466}
     467.main-navigation .assistive-text:hover,
     468.main-navigation .assistive-text:active,
     469.main-navigation .assistive-text:focus {
     470    background: #fff;
     471    border: 2px solid #333;
     472    border-radius: 3px;
     473    clip: auto !important;
     474    color: #000;
     475    display: block;
     476    font-size: 12px;
     477    padding: 12px;
     478    position: absolute;
     479    top: 5px;
     480    left: 5px;
     481    z-index: 100000; /* Above WP toolbar */
     482}
     483
    469484
    470485/* Page structure */
     
    16511666----------------------------------------------- */
    16521667
    1653 .ie .skip-link,
    1654 .ie .screen-reader-text,
    16551668.ie .assistive-text {
    16561669    clip: rect(1px 1px 1px 1px); /* IE7 */
Note: See TracChangeset for help on using the changeset viewer.