Photo Blog

One of the most important aspects of website design is letting the visitor know where they are. This applies not only to big, easy-to-read page titles (you do have obvious page titles, right?), but also to highlighting the page or section in the navigation bar.

The navigation is effectively an outline of how your website is organized, and letting visitors know where they are at any given moment will help them get around your site and find what they want.

This is especially true since a lot of your traffic probably isn’t landing on your home page, but instead somewhere deep inside. As with a link from Google to one of your photos. If they have trouble finding their way around, they’ll probably leave. And that’s bad.

When manually customizing your PhotoShelter website, highlighting the page in the navigation bar takes a little extra work. Here’s how I do it.

(I’m assuming you’re comfortable with hand coding XHTML and CSS. If not, be very very careful when trying this at home.)

The short version

Pull the code for the navigation out of the master template, put it into each page template, and style the page links separately with CSS.

The longer version

(using my website as an example):

1. Move the navigation code

To start, navigate your way to the Customization Settings and click Theme. The default location of the code for the navigation is in the Public Page Master Template, under Master Templates.

1. Select and cut the navigation code
2. Click Pages in the Customization box on the left
3. Click “edit” for the page you want to edit.
4. Paste the code at the top of the Template box, before everything else.

2. Mark the links as selected

What you want to do now is highlight the relevant page link in the navigation using CSS. The easiest way to do this is add a “selected” class to the page link (I use .selected — use whatever you like as long as it doesn’t conflict with an existing style), and use the class to style the link.

In this code, the Galleries page link is selected and will be highlighted.

<!-- begin navbar -->
<div id="navbar">
  <ul>
    <li><a href="http://www.martinbeebee.com" title="Home">Home</a></li>
    <li><a class="selected" href="[
[gallery_list_url]
]" title="Photo Galleries">Photo Galleries</a></li>
    <li><a href="http://www.martinbeebee.com/blog/" title="Photo Blog">Blog</a></li>
    <li><a href="http://www.martinbeebee.com/contact.php" title="Contact">Contact</a></li>
  </ul>
</div>
<!-- end navbar -->

3. Copy the code to all the pages

Here’s the downside: you need to paste that navigation code into each one of the page templates (e.g., Gallery Display, Gallery Image Display, Gallery List, etc.), and mark the relevant page link as selected. It’s kind of a bummer, but there really aren’t that many pages.

4. Style the links using CSS

If your website is a combination of PhotoShelter and pages on your own server (such as WordPress), you can just put the style in a new or existing stylesheet on your server, and link to it in the header section of the Public Page Master Template. Here’s a portion of my navbar styles, placed in a separate stylesheet:

#navbar li a.selected{
    color: #ff8229;
    background:url(../_images/nav_marker.png) no-repeat 7px 2px;
}
#navbar li a:hover {
    text-decoration:none;
    color:#ff8229;
}

If your site is pure PhotoShelter, you’ll probably need to hard code the styles into the header itself.

That’s it! Now your website has made a great stride in usability, and is better than a lot of the sites out there, just with this one little step.

Tags: CSS, PhotoShelter, Tutorial, Website Design

This entry was posted on Saturday, October 24th, 2009 at 7:14 pm and is filed under PhotoShelter, Tutorial, Website Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.