Creating a Custom Border for PhotoShelter Sites

As you can see, I've changed my website design since I wrote this article. This screenshot shows what my gallery page looked like with my custom border on the Matrimony theme.
I’ve changed my website design since I wrote this article, but this screenshot shows what my gallery page looked like with my custom border, using the Matrimony theme.

As I mentioned earlier, I’ve been redoing my website.   I’ve moved the photography portion of my site to PhotoShelter, which has numerous wonderful features for photographers that I’ll get into in a separate post.  One of these features is their website templates (called themes) that allow you to tweak the CSS or HTML code in order to personalize your site.  I like the theme I chose a lot, but along with changing the background color, I also wanted to replace the border on the content box with one I created myself.  Because my border was more complex than a single line, it needed to be saved as GIFs and linked to in the CSS code.  I couldn’t find any instructions to do that on PhotoShelter, though, and when I posted a question about it in the forum, no one answered me.  (That’s actually pretty unusual – it seems like there’s almost always someone who has a solution or comment to give.)

But that was okay, because I had an idea as to how to do it.  I should mention that the only experience I had with CSS is what I learned in one of PhotoShelter’s one-hour webinars, plus the little bit of tinkering I’d already done to make a few minor changes to my theme.  So if I can do this, you can, too!   It took me a few hours to get it right, but since I’ve already figured it out for you, it’ll hopefully take you less time.  And if you have a website on a service similar to PhotoShelter which allows you to alter your CSS code, you should still be able to use this basic idea.  Essentially, what you need to do is create the whole content box with borders included, break it into three GIFs, save the GIFs online where you can link to them, and then replace the URLs in the original CSS code with your GIFs’ URLs.

The first thing you need to do is to find out where your theme’s borders are located.  Take a look at the code of your customized PS homepage with Firebug or another similar program.   (If you have no idea what I’m talking about, Firebug is a plug-in for Firefox which allows you to see the coding of any web page.)  Look under the body section, DIV id main.  In my PS theme (Scribble, a sub-theme of Crisp), the borders come from three different locations.  The bottom of the header DIV (where the logo and nav bar are located) contains the content box’s top border; the content DIV has one GIF containing the left border, right border, and background of the content box; and the top of the footer DIV contains the bottom border.  I don’t know if these locations are the same for all the PS themes; however, the code for the borders starts with “background: url” (or “background: transparent url”), so wherever you find those is the code you’ll need to adjust with your own hyperlinks.

The other thing you need to look at in Firebug is the width of your content box, which you’ll find under DIV id main. Mine is 975 pixels; again, I don’t know if they’re the same for all themes, so make sure you check.  Getting the width right is crucial for your content box and its borders to look correct.

Now you’re ready to design your content box with its borders.  Make a new document in Photoshop with the width set to the correct number of pixels for your PS theme.   The height doesn’t really matter, as long as it’s tall enough to accommodate your borders and some background space in the middle.  (I initially made mine 50 pixels, but later I decided to make my border look more three-dimensional, and 50 pixels wasn’t enough. 200 pixels was more than sufficient for my re-do.)  Fill your document with whatever color you want your content box to be (generally white, black, or gray, depending on your theme).  Then create your border.  If you’ve got layers, I suggest saving it as a PSD file first, because you may discover when you upload it that you need to do a little tinkering to get it right.   Or, if you’re like me, a day or two later you may think of a way to add a little extra pizzazz and want to change it.

Once you like your borders, flatten your file.   Use the rectangular marquee tool to select the top portion of your border and a small amount of the background.  (How tall you make it will affect how much space there is between your homepage’s image and the top border.)  Copy your selection, then go to File > New, which will create a document with the exact size as your selection.  Paste your selection into the document and then Save For Web.  Do the same thing for your bottom border and your content box.  Your content box selection only needs to be 7 or so pixels tall, since the image is going to repeat in order to create the whole box.  (This works for simple graphics; if you’re doing something like a sloppy border, you may need to make it taller.)

Here’s a scaled-down version of what my files look like:

GIFexamples

Upload your GIFs to a service like PhotoBucket (as described in PhotoShelter’s instructions for linking to logos). UPDATE: now that PhotoShelter allows unlisted galleries, this is an ideal place to store your GIFs. Just make sure you make each GIF visible, and be careful to link to the actual image file and not the gallery page for that file. If you have a blog, you could also store your GIFs in your media library there. Then go to Theme in the PS customization section and click on Advanced Options to get the CSS Styles box.  This is where you enter and adjust your codes.  All you need to do is copy the correct code from Firebug, then replace the URLs with the location of your files. For instance:

#header {
background: url(http://photobucket.com/mytopborder.gif) bottom left no-repeat;
}
#content {
background: url(http://photobucket.com/mycontent.gif) top left repeat-y;
}
#footer {
background: url(http://photobucket.com/mybottomborder.gif) top left no-repeat;
}

Save your settings and view your site.  You may find that you need to change the padding on your header to adjust the space between your nav bar and your content box, and/or on your footer to position your footer text correctly. Use Firebug to test different padding settings, then add the appropriate code and desired pixel settings to your CSS Styles box.   The padding code goes above the background code for whichever section you’re adjusting. Your revised code for your header section would then look something like this:

#header {
padding: 0 25px 35px;
background: url(http://photobucket.com/mytopborder.gif) bottom left no-repeat;
}

I hope someone out there will find this useful. If you have any questions, leave me a comment and I’ll do my best to answer you.  Good luck!

© Karen Joslin, 2009

3 thoughts on “Creating a Custom Border for PhotoShelter Sites

  1. I’m glad you found it helpful, Per. Thanks for letting me know about the typo, I’ll get that fixed.

Comments are closed.