By bpb on

There are three lines in Zen's page.tpl.php that generate the "Skip To Navigation" link in a page's header. I want to remove this.

I copied Zen's page.tpl.php into my theme's directory, removed the PHP lines, but the link still appears. What is the proper way to override a feature like this, or to override a template file?

⋅ Categories: Drupal 6.x

Comments

vm’s picture

vm commented

after removing the offending lines of code from page.tpl.php did you refresh the theme registry?

bpb’s picture

bpb commented

Thanks, that did it. I didn't know what the theme registry was, but a quick search explained it and caching.

imatsu@drupal.org.es’s picture

imatsu@drupal.org.es commented

1.- copy the file page.tpl.php from zen/templates to foo/templates
2.- edit page.tpl.php
3.- comment this section

    <?php /*
    <div id="navigation">

      <?php if ($main_menu): ?>
        <nav id="main-menu" role="navigation">
          <?php
          // This code snippet is hard to modify. We recommend turning off the
          // "Main menu" on your sub-theme's settings form, deleting this PHP
          // code block, and, instead, using the "Menu block" module.
          // @see http://drupal.org/project/menu_block
          print theme('links__system_main_menu', array(
            'links' => $main_menu,
            'attributes' => array(
              'class' => array('links', 'inline', 'clearfix'),
            ),
            'heading' => array(
              'text' => t('Main menu'),
              'level' => 'h2',
              'class' => array('element-invisible'),
            ),
          )); ?>
        </nav>
      <?php endif; ?>
      */ ?>
gregmoon’s picture

gregmoon commented

Commenting out the line instead works just fine and in the event you do want that link back you can just uncomment it.

e.g. -

//print t('Skip to Navigation');

Treesong’s picture

Treesong commented

This may just be a personal preference, but I recommend adding the following to your subtheme.css file:

  #skip-to-nav
  {
    display: none;
  }

This stops the offending (and truly pointless IMO) link from displaying without altering the core Zen files. That way, if you update Zen, you won't have to worry about re-fixing the problem.

pzula’s picture

pzula commented

I think this is a great way of doing it, thanks!

timd.mackey’s picture

timd.mackey commented

The link actually does serve a purpose; It's there for accessibility reasons. Because of the way Drupal handles source ordering, if someone is using a screen-reader, they have to tab through all of the content on each page if they want to get to the navigation. By adding a "Skip to Navigation" link at the very top of the page, you make it infinitely easier for a person using a screen reader to navigate your page.
If you don't want the link to be visible to normal users, the best way to hide it is to use absolute positioning to move it out of the normal page-flow and off of the screen. If you use "display: none" the code will be hidden from screen readers as well, and will thus be rendered useless. Here's the code that I use:

#skip-to-nav {
    position:absolute;
    top:auto;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden;
}

css code via: http://webaim.org/blog/hiding-content-for-screen-readers/

jibize’s picture

jibize commented

Thanks for sharing!

stephesk8s’s picture

stephesk8s commented

Perfect. Thanks timd.mackey!