Photostrips

Making a Photostrip

Adding photostrips tends to be a tricky point for folks. That's why we've built the online Photostrip builder.

You can also build your photostrip in a graphics program like Adobe Photoshop or Fireworks. Just make sure that it's 200 pixels tall.

Applying a Photostrip to a Template

If you want to apply a photostrip to all pages that use a template, first open the template file. Click inside the main content area. Along the bottom of the open document you should see a string of html tags embedded into the frame of the window. It looks like this:

Click on the tag <td#content>, this is selecting the table cell that forms the main content area. In the properties bar, find the drop-down menu labeled "Style" and select photostrip. Update the pages that use that template, and you're all done.

Adding extra Photostrips

So now that you can add the default photostrip to one template, how do you go about adding a different photostrip to a different template? Well, first you'll need to build a photostrip. After you've got a photostrip ready, put it in your images folder. Open the file custom.css and insert this code:

.photostrip2 {background-image: url(../images/photostrip2.jpg);}

What this does is create a class called "photostrip2" which replaces the image of the "photostrip" does. You don't have to name it photostrip2, you could name it something like photostrip_about, or anything else.

Now, in the last part of that photostrip2 class, there's this code: url(../images/photostrip.jpg)

Change "photostrip.jpg" to whatever the name of your new photostrip is.

Stacking Styles

Applying the new photostrip2 class is a bit more involved than applying the default photostrip class was.

Open up a template file, and highlight the title of your page.

At the top of the dreamweaver window, there are three buttons: Code, Split, and Design. Click on Code.

Near the highlighted section, you should see a bit of code that looks like this:

<td valign="top" id="content">

Now, change that line of code to this:

<td valign="top" id="content" class="photostrip photostrip2">

What this does is give us all the rules of the photostrip class, but overrides the image being used with the photostrip2 class.

It is important that there be a space between photostrip and the second class.

You can repeat this process for as many photostrips as you like.

Adding a Photostrip to an Individual Page

A common request is how to set up a photostrip on just one page. To do that, first create and upload a photostrip.

Open the page you want to add the strip to. Switch to code view. Just before the closing head tag, is an editable region called "head".

Insert this code:

<style type="text/css" media="screen, projection">
#content {padding-top:225px; background-repeat:repeat-x; background-image: url(../images/photostrip.jpg);} 
</style>

Note the lack of any "photostrip" class. This is because we're overwriting the styles for just this page.