smugblog: Web Tricks

So most everything that you see on your page that is green can be changed like this:

a.title, .title, .imgBorderOn {
     color: red;
}

We have enabled this for everyone; use this to get rid of it:

.play_slideshow {
     display: none;
}

Here is the code to get rid of keywords on your page:

#keywords {
     display: none;
}

I personally like the borders, I think they add a sense of organization to a very busy (yet informative) interface. But here is the code to get rid of them, cut and paste it in your CSS section of customize.

This will turn the horizontals off:

.top_border, .bottom_border {
     border: 0px;
}

This will get rid of the vertical lines in smugmug (aka elegant):

.right_border, .left_border {
     border: 0px;
}

So on the IE Blog, they shared a link about writing better DHTML for IE. So I followed to see if there was anything smugmug could do to make our pages shine even brighter. What I did learn about was the MSIE proprietary reference of outerHTML.

You do remember my previous post about using innherHTML to replace lines you did not like, right? Well outerHTML can be used to replace even the container around the code that you want.

I think that this is a very smart way to reference data, but would love a method that would work cross platform, does anyone know of a similar way?

This is particularly true of Pros using smugmug, but anyone doing customization can benefit from thinking about this a little bit more.

People come to your galleries to view your photos (and for Pros, to buy!). It’s great to have your brand/studio/company name prominently displayed, but let’s face it, they’re really there to ooh and aah over your photos (and buy them!).

It turns out that people are allergic to scrolling, particularly to see photos. They don’t want to click, scroll, click, scroll, click, scroll. Yet many people customizing their smugmug pages put enormously large headers on their photos which cause their viewers to scroll their pages. Many leave in disgust, not having seen (or bought!) most of them.

So, here’s smugmug’s internal guidelines for making sure your customers are happy and able to see your photos, not to mention buy them.

That’s the main reason smugmug’s logo is so small… it’s not because we’re not proud of our brand (we are!) but because we know people are there to view photos, not ogle our cute logo.

Might want to give your own headers a little re-thinking and possibly re-tooling.

So part of the new design is out, and no major problems that could not be solved But I wonder if anyone has taken a look at the source code and has seen what the future holds? Gone are the tables and inline styles, everything is now controlled by CSS and DIVs. If you look at the home page source, that is what the markup for galleries will soon look like, everything will be open for editing and moving around.

For example, let’s say that you want to move the header to the footer; using javascript you can do so easily:

header = document.getElementById("header").innerHTML;
footer = document.getElementById("footer").innerHTML;
document.getElementById("footer").innerHTML = header+footer;

Or something similar, placing IDs all over the place will not only allow you to restyle them, they will allow you to reference the data contained within them. You can also edit out the data you don’t want shown; for example if you have the “mini” footer that we place after your custom footer and don’t want the link to the cart; you could use this function in your javascript section; launch it onload of the page:

onload = replaceFooter;
function replaceFooter() {
     footer = document.getElementById("cobrand_footer").innerHTML;
     /* Firefox sees it as normal */
     footer = footer.replace('<a href="http://www.smugmug.com/cart/" class="nav">shopping cart</a> | ',' ');
     /* IE moves the nav class to one side */
     footer = footer.replace('<a class=nav href="http://www.smugmug.com/cart/">shopping cart</a> | ',' ');
     /* Safari caps the A tags, so this replaces Safari, WordPress does not leave them capped in my example, so cahnge them */
     footer = footer.replace('<a href="http://www.smugmug.com/cart/" class="nav">shopping cart</a> | ',' ');
     //when in doubt and it does not work in a certain browser, show the code the browser is getting and see what to replace
     //alert(footer);
     document.getElementById("cobrand_footer").innerHTML = footer;
}

So there are just two little things you can do with only part of the new code; let me know how it goes!

Most people will have problems centering things, but there is an easy fix for centering your whole site, simply paste this code in the appropriate sections:

<div align="center">
OLD CODE
</div>

Also, before emailing help desk, take a really good look at your code and make sure that you are using standard HTML and that all of the tags are closed. We are using the XHTML Transitional doctype now and browsers will be less forgiving with sloppy code.

I am unsure about what categories to use for this section. I thought about several options:

1) CSS, Javascript, HTML, etc.
Normally my tricks would use several of these categories, not sure if this method would make things easier to find.

2) Galleries, Images, Tools
I think that this is a good choice, since if you are reading this blog you probably want specific information on a particular area.

3) Simple, Moderate, Advanced
Easier classification, and depending on your level of HTML knowledge you could judge for yourself. Granted, I may need help in classifying each trick, since they might seem easier than the are

Let feedback in the comments and we can decide what works best. There will not be a huge amount of tricks for a while, so I can always go back and reclassify (for now)

UPDATED: This is almost pointless now as we have added the feed buttons to both the real footer and mini-footer

If you want to remove the feeds use this code in your CSS:

#feeds {
     display: none;
}

When a pro adds a custom footer, the links to the RSS and Atom feeds are also nuked. I came up with some javascript that will put them back wherever they want them to be.

First, add the following code to the Javascript section of your customizing page:

function findFeed(feedType, feedImage) {
  linkTags = document.getElementsByTagName("link");
  for (i = 0; i < linkTags.length; i++) {
    if (linkTags[i].type == feedType) {
      document.write('<a href="'+linkTags[i].href+'"><img src="http://www.smugmug.com/img/'+feedImage+'.gif" border="0"/>< /a>');
    }
  }
}

Then, in any of your HTML sections, add this code and the buttons will appear:

<script type="text/javascript">
  findFeed("application/atom+xml","atom");
  findFeed("application/rss+xml","rss");
</script>