smugblog: Web Tricks

Every once in a while we get users that want to add their own webpage and put on it whatever they want; extended bio, pricing, contact info, etc. While smugmug does not officially offer a method of doing so, I came up with a method that involves using style sheets to achieve the effect. Better yet, this method will work for all user levels!

First step is to create an empty gallery, we are going to hide the “This gallery is empty” warning using style sheets. We can then place the HTML you want on that page inside the gallery description. Pros can either add the style sheet code to their customizing section for CSS, or they can put it inline like everyone else. Here is some example code that shows a description on your homepage, but hides that description once you get to the gallery page itself. Remember to add enough space between the description and page code iteself so that neither will be cut off.

<div class="opening">A list of prices for various sizes.</div>
<div style="font-size: 14px; color: #ffffff;
  font-weight: normal">Welcome to my pricing page.</div>
<style type="text/css">
  .nophotos { display: none; }
  .opening { display: none; }
</style>

You can also feature and image for this gallery, but you should force the gallery to style to be All Thumbs (sorry non-pros). Go ahead and upload a single image; then in your style sheets section add:

img[width="100"][height="80"] { display: none; }

But change the width and height to match the exact width and height of the uploaded photo as it appears on the gallery page.