Using this FAQ:

The Easy Customizer is a great place to start changing the look and feel of your site, but sometimes it's not enough. This Customization FAQ is for more adventurous folks who'd like to change more stuff on their site. Below, you'll see tons of easy code that you can copy and paste.
 

If you really don't feel like doing any of this yourself, check out our list of Certified Customizers. They can do all of this for you... and lots more!
 

1. Where do I put this stuff?
   
   

   If you're a logged-in Power or Pro Smugger, go to your SmugMug Control Panel and look in the Customize tab. Click the Advanced Site-wide Customization link you see there.

   
   
   

   You'll see lots of boxes, each with a green label. Find the correct box (specified in the instructions below) and paste in code that you copy from this FAQ.

    

   Top JavaScript or Bottom JavaScript? (For the curious...)

   Any JavaScript you paste into your Top JavaScript box will load quickly, but it will also slow down your page. So you'll likely want most of your JavaScript in your Bottom JavaScript box, which will load after the majority of your page is already displayed.

    

Headers

2. How do I make a simple custom header?

   It's a snap. Just open up the Easy Customizer explained on this SmugMug help page. Find the "Header" section and enter a bit of text. Decide if you want it left, center, or right aligned on the page, and choose a font size and color.



3. How do I add a cool banner as a custom header?

   Simple. Just open up the Easy Customizer explained on this SmugMug help page. Look on that help page for the "Header" section and follow the simple instructions.

   Or, if you want to get your hands on the code, check out this Dgrin tutorial for step-by-step instructions.

   Essentially, you'll add this code to your CSS box, changing the teal:

   #my_banner {

   width: 750px;

   height: 150px;

   margin: 0 auto;

   background: url(http://www.smugmug.com/photos/1234567-O.gif) no-repeat;

   }

   And, this code to your Custom Header box (not Head Tag):

   <div id="my_banner"> </div>



4. How can I make my banner clickable to my homepage?

   If you created your banner using the Easy Customizer explained on this SmugMug help page, you'll see right there in the Easy Customizer section for your header there is a "Click to URL" box. Simply fill that in with your SmugMug homepage url or custom domain. Examples: http://superman.smugmug.com
   http://moonriverphotography.com .

   If you created your banner using code on the Advanced Customization page, put this code in your Custom Header box (not Head Tag), changing the teal:

   <div id="my_banner"><a href="http://yourSmugMugnickname.smugmug.com"><img src="/img/spacer.gif" width="605" height="70" border="0" /></a></div>



5. Can I have different banners for my homepage and gallery pages?

   Absolutely. The Easy Customizer allows you easily add a banner to all your SmugMug pages. But you can add specific code in your advanced customization to change the banner for certain pages. Ivar's tutorial gives you a step-by-step.



6. How do I make the Home link my visitors see clickable to my SmugMug homepage?

   If you keep SmugMug's header, visitors will see the following:

   

   By default, that Home link points to SmugMug's homepage. If you'd like it to point to YOUR SmugMug homepage instead, paste the following code into your Top JavaScript box:

   // Change Home Link (from Devbobo)
   YE.onContentReady('toolbar', function () { this.innerHTML = this.innerHTML.replace(/href="http:\/\/www.smugmug.com([?\/\w&;=\-]+)?"/, 'href="' + webServer + '"')});


7. Can I keep SmugMug's header with the search box and links, but use my own logo?

   Sure, here's what it'll look like:

   

   First, make a small logo that will replace the SmugMug logo, about 250x25 pixels in size. If you want some help with a text logo, simply follow the watermark instructions.

   Now, add that logo image to your SmugMug site, just like you'd add any other photo.

   Add this code to your CSS box, changing the teal to reflect YOUR image:

   .smuglogo {

   width: 200px !important;

   height: 25px !important;

   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,

   sizingMethod=image src='http://www.smugmug.com/photos/94264798-O.png') !important;

   }

   .smuglogo[class] {

   background-image: url(http://www.smugmug.com/photos/94264798-O.png) !important;

   }

   Lastly, add this code to your Top (or Bottom, if you prefer) JavaScript box, changing nickname to YOUR SmugMug nickname and YOURtitlehere to the text you want to appear when mouse hovers over your new logo:

   // change the link on the SmugMug Logo

   YE.onAvailable('homelink', function(e) {

   this.href = "http://nickname.smugmug.com/";

   this.firstChild.alt = "YOURtitlehere";

   this.firstChild.title = "YOURtitlehere";

   });

NavBars

8. How do I make a simple navbar?

   What's a navbar? Here's a simple navbar in action.

   The easy way to add a navbar is to use the Easy Customizer explained on this SmugMug help page.

   If you want to get your hands on the code, check out this Dgrin tutorial for step-by-step instructions.

Search

9. Can I add a custom search box to my site?

   Just put this code in your Custom Header box (not Head Tag):

   <div id="mysearch">SMUGSEARCH</div>

    

   And put this code in your CSS box:

   #mysearch {
   text-align: center;
   }

    

Change colors

10. Which colors can I use?

    If you use the Easy Customizer explained on this SmugMug help page, you'll have a color picker to use, or you can manually enter a color code. You'll find lots of six character color codes on this list.

    Using code on the Advanced Customization page, you'll use the color codes to replace XXXXXX you see in several examples on this FAQ.



11. How do I change the background color of my SmugMug pages?

    If you use the Easy Customizer explained on this SmugMug help page, you'll see a spot to change the background to a color, an image, or the background from a theme.

    If you'd rather get your hands on the code, you can use this code in your CSS box on the Advanced Customization page, changing the teal:

    body {
    background-color: #XXXXXX !important;
    }


12. How do I change the background color of the boxes on my SmugMug homepage?

    If you use the Easy Customizer explained on this SmugMug help page, you'll see a "Boxes" section where you can do this.

    If you'd rather get your hands on the code, you can use this code in your CSS box on the Advanced Customization page, changing the teal:

    .box {
    background-color: #XXXXXX;
    }

     



13. There are thin borders around my images; Can I change their color?

    If you use the Easy Customizer explained on this SmugMug help page, in the "Photos" section there's a box to check to use custom image borders.

    If you'd rather get your hands on the code, you can use code in your CSS box on the Advanced Customization page, changing the teal.

    This code will change the color of the default border:

    /* Change default image border color */
    
    .imgBorder {
        border-color: #XXXXXX;
    }

    This code will change the color of the border when you hover over images with your mouse:

    a:hover img.imgBorder,
    .imgBorderOn {
    border-color: #XXXXXX;
    }


14. Can I change the colors of the links in my bio, galleries, categories and more??

    If you use the Easy Customizer explained on this SmugMug help page, in the "Text" section you'll find a way to tweak colors.

    If you'd rather get your hands on the code, open up your Advanced Customization page and use this code to change link colors. (Put it in the CSS box and be sure to change the teal.)

    /* Change color of links */
    
    a:link {
    color:#XXXXXX;
    }
    
    a:visited {
    color:#XXXXXX;
    }
    
    a:hover {
    color:#XXXXXX;
    }
    
    a:active {
    color:#XXXXXX;
    }


15. Can I change the color of THIS text?

    If you use the Easy Customizer explained on this SmugMug help page, in the "Text" section you'll find a way to tweak colors.

    If you'd rather type in your own code, this is a good place to start (put it in your CSS box on your Advanced Customization page):

    .title {
    color: #XXXXXX;
    }

    To target specific text on your SmugMug pages, you'll want to check out this help page to brush up on your CSS.

Change stuff you don't like

16. How do I ditch the BIG SmugMug footer and get a SMALL SmugMug footer?

    To switch to a smaller SmugMug footer, use the Easy Customizer described on this SmugMug help page and look in the "Footer" section. Or, find the radio button on the Advanced Customization page.

    Power and Pro users can go down to the "mini footer", which includes a help link, a login/logout link, and a shopping cart link, in addition to "Photo hosting by SmugMug" and "Portions © SmugMug, Inc." and feeds buttons. Uncheck the various boxes to tweak it even further.

    - Get rid of the "feeds" links by putting this code in the CSS box:

    #feeds {
    display:none;
    }

    - Want to ditch those pesky pipes? This code in your Bottom JavaScript box will do the trick!

    // fix the pesky pipes
    
    YE.onAvailable("cobrand_footer", function() {this.innerHTML = this.innerHTML.replace(/\||what are feeds\?/gi, '');});

    - This code in your CSS box will get rid of the shopping cart link.

    /* turn off the cart link on the minifooter */
    .cartlink_footer {
    display: none;
    }

    - This code in your CSS box will get rid of the login link.

    /* turn off the login link on the minifooter */
    .loginLink {
    display: none;
    }

    We always display the words "Photo hosting by SmugMug" and "Portions © SmugMug, Inc."



17. I don't want it to say "galleries", "gallery categories" or "featured galleries".

    You can remove the word "galleries" by adding this code to your CSS box:

    .homepage #galleryTitle {
    display: none;
    }

    Remove the words "gallery categories" by adding this code to your CSS box:

    #categoriesBox .boxTop {
    display: none;
    }

    Alternatively, you can CHANGE the text by adding the corresponding code to your Bottom JavaScript, changing the teal to the text you'd like to display instead.

    Change "galleries":

    YE.onAvailable('galleryTitle', function() {this.innerHTML = 'New Gallery Title'});

    Change "featured galleries":

    YE.onAvailable('featuredTitle', function() {this.innerHTML = 'Something Else'});

    Change "gallery categories":

    YE.onAvailable('categoryTitle', function() {this.innerHTML = 'Something New'});


18. I'd like the captions ABOVE my photos.

    Every gallery style on the site has a caption above and below the photo. This code will turn off the caption below and turn on the caption above. It goes in your CSS box:

    #caption_top {
    display: block;
    }
    #caption_bottom {
    display: none;
    }


19. I'd like the SmugMug link in my footer to automatically be a referral link.

    Add this code your Bottom JavaScript box, changing the teal to YOUR referral code (find in your Control Panel, in the Stats tab under "Referrals"):

    function AddReferralCode() {
    var links = this.getElementsByTagName("A");
    if (links && (links.length != 0)) {
    var smugLink = links.item(0);
    smugLink.href = "http://www.smugmug.com/?referrer=XXXXXXXXXXXX";
    }
    }
    YE.onAvailable('footer', AddReferralCode);

     



20. I'd like to customize my right-click protection warning. Possible?

    You can enter a right-click protection message in the "Photos" section of the Easy Customizer described on this SmugMug help page. Or, on the Advanced Customization page, you can put the following code in your Bottom JavaScript box, changing teal:

    rightClickWarning = "All photos are property of Moon River Photography. All rights reserved. Unauthorized use is prohibited.";

Hide stuff you don't like

21. How do I remove the IE print toolbar for my site?

    This goes in your Head Tag box:

    <meta http-equiv="imagetoolbar" content="no">
    <meta http-equiv="imagetoolbar" content="false">

     



22. How do I remove the "map this" button from my pages?

    There's a Geography setting in your Customize Gallery settings that lets you turn mapping off features off on a per gallery basis.

    However, you can get rid of the Map This button by putting this code in your CSS box:

    /* turn map this button off */
    .map_this {
    display: none;
    }


23. How do I remove the words "UserName's Home" from my homepage?

    You can eliminate the whole line in the "Homepage" section of the Easy Customizer described on this SmugMug help page, or you can put code in the Advanced Customization page.

    This code in your CSS box will remove your name, including any "'s":

    /* hides your name (including any 's) */
    #userName {
    display: none;
    }

    This code in your CSS box will remove the word "home":

    /* hides the word home */
    #userHome {
    display: none;
    }

    This code in your CSS box will remove just the "'s"

    /* remove the 's */
    .possess {
    display: none;
    }


24. How do I remove the feeds links?

    Add this to your CSS box:

    #feeds {
    display:none;
    }


25. I don't like the full-screen slideshow. Can I hide that button?

    Add this code to your CSS box:

    /* removes the full-screen slideshow buttons */
    .play_slideshow {
    display: none;
    }


26. How do I hide the keywords in my galleries?

    To hide keywords under the photo in your galleries, add this code to your CSS box:

    #photoKeywords {
    display: none;
    }

    
    

    To hide the keywords in the Lightbox view, use this:

    #lightBoxKeywords {
    display: none !important;
    }

    
    

    Want to remove the Keywords link entirely from the Lightbox? Use this:

    #lightBoxKeywordsLink {
    display: none;
    }


27. Can I get rid of the text bubble that shows up when you mouse over images?

    Sure, put this code in your Bottom JavaScript box:

    function delHover() {
        oLst = YD.getElementsBy(function(el) {return (YD.hasClass(el,'imgBorder') || YD.hasClass(el,'imgBorderOn'))},'img');
        for (i=0; i < oLst.length ; i++) {
            if (oLst[i].title && oLst[i].title != '') oLst[i].title = '';
            if (oLst[i].alt && oLst[i].alt != '') oLst[i].alt = '';
        }
    }
    YE.onContentReady('bodyWrapper', function() {if (!YD.hasClass(document.body, 'smugmug_ajax')) delHover()});
    onPhotoShow.subscribe(function(){YE.onAvailable('mainImage', delHover)});


28. Can I hide just the "date updated" info next to my gallery thumbs?

    The Clean option in your Customize Gallery settings will hide both the gallery description and time updated. If you want to ONLY hide the date updated and keep the description, toggle the Clean option to NO and put this in your CSS box:

    p.updated {
    display: none;
    }

Guestbook

29. How can I make a guestbook?

    To create a guestbook like this one, just follow these steps:

    
    1. Create a new gallery and call it something like "Guestbook".
    2. Lock the style to Journal (Old) in your Customize Gallery settings.
    3. Add one photo to the gallery.
    4. For the photo description, type the text you want to use, e.g. "Please sign my guest book".
    5. People can then use the normal gallery comments to sign your guestbook.
    
    If you wish, add this to your CSS box to remove page navigation, changing the teal:

    .gallery_XXXXXX .pageNav {
    display: none;
    }

    
    Tip: Make your guestbook gallery public and featured on your homepage, or link to it in your bio or navbar.


30. Can I change it to say "guestbook comments" instead of "gallery comments"?

    Add the following to your Bottom JavaScript box, changing the teal:

    function ModifyText ()
    {
      if (YD.hasClass(document.body, "gallery_XXXXXXX"))
      {
        var objElement = YD.get("comment")
        if (objElement != null)
        {
          var str = new String(objElement.innerHTML);
          str = str.replace(/\gallery/gi, 'guestbook');
          objElement.innerHTML = str;
        }
      }
    }
    
    YE.onAvailable("comment", ModifyText);

Email

31. How can I make a clickable link to my email address?

    You can use this code in your photo captions, bio, gallery descriptions, Custom Header box, or Custom Footer box. Just change the teal:

    <a href="mailto:youremailaddress@youremaildomain.com">Email Me</a>

    
    

    Tip: You probably won't want to use your primary email address for this. Consider getting an alternate email address from someplace like Yahoo, with a robust Spam filter. There are also several ways to fool spambots.

Bio Section

32. Can I "square up" the text in the bio section of my homepage?

    If you don't want the text in your bio to wrap around your bio photo, put this code in your CSS box:

    #userBio {
      width: 550px;
      display: inline;
      float: left;
      position: relative;
    }


33. Can I use a custom image/image placement in my bio section?

    You can put an image in your bio box and locate it wherever you'd like. Just modify the teal in following code to suit. Put the code in your bio box on your homepage.

    <html><img src="URL TO YOUR PICTURE HERE" style="float:right;border:0;margin:3px"></html>

Viewing Styles (journal, filmstrip, etc.)

34. Can I change the direction of the filmstrip, or make it stop moving by default?

    To stop the filmstrip from moving, put this code in your Top JavaScript box.

    filmstripMove = 0;

    
    

    To change the direction of the filmstrip, put this code in your Bottom JavaScript box:

    //filmStrip values you can override:
    rightMoves = -5;
    leftMoves = 5;

    
    

    AND this code in your CSS box:

    /* change the arrows for changing the filmstrip direction */
    
    #filmstrip #leftMove {
      /* IE PNG FIX */
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/img/filmstrip_right_black.png');
    }
      /* BACKGROUND FOR NON-IE */
    #filmstrip #leftMove[id] {
      background: url(/img/filmstrip_right_black.png) no-repeat;
    }
    #filmstrip #rightMove {
      /* IE PNG FIX */
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/img/filmstrip_left_black.png');
    }
    /* BACKGROUND FOR NON-IE */
    #filmstrip #rightMove[id] {
      background: url(/img/filmstrip_left_black.png) no-repeat;
    }


35. Can I get rid of the image previews in single image viewing and critique?

    Add this code to your Bottom JavaScript box.

    showImagePreview = false;


36. How do I make SmugMug style s-t-r-e-t-c-h to look beautiful on bigger monitors?

    You'll find a Yes/No toggle for stretchy on your site-wide customization page and on your "create a theme" page:

    

    If you have anything in your CSS box, the default is "No". Otherwise, the default is "yes". The stretchy code we'll add when you toggle to "Yes" will likely work seamlessly with your customization, so give it a try! If your code does need some tweaking, we can help. Questions?

Other fun stuff

37. Want a Banner, Navbar, slideshow, and a separate galleries page?

    Ivar to the rescue! Check out his step-by-step tutorial. Note that you can easily add the banner and navbar using the Easy Customizer described on this SmugMug help page.



38. How do I put a background image on my pages?

    Most background images you can add via the Easy Customizer described on this help page. To get the background image effect you see on http://mikecorbin.smugmug.com, you'd need an image similar to this one, and in the Easy Customizer you'd add that image and choose "Repeat vertically".

    You can get more sophisticated in the advanced customization, if you wish. Here's the code to put in your CSS box for a very cool example from Andy Williams. The .homepage is optional, and makes the background image only appear on your homepage.

    body.homepage {

    background-attachment: fixed;

    background-image:

    url(http://williams.smugmug.com/photos/3487489-L.jpg);

    background-repeat: no-repeat;

    background-position: left bottom;

    }

     



39. Can I make an HTML-only page in SmugMug?

    Create a gallery. Then this stuff, and whatever you want your html to be/say, goes into the "gallery description" edit box. Switch out the teal letters:

    <html>
    your valid HTML goes here
    htmlblahblahblahblah-de-blah
    </html>

    
    

    This code goes in your CSS box on your site-wide customization page. The teal X's should be the numerical portion of your Album ID:

    /* html only page for gallery XXXXXX */
    .notLoggedIn .gallery_XXXXXX .nophotos {
    display: none;
    }
    .gallery_XXXXXX .pageNav {
    display: none;
    }

    
    

    Use this CSS instead to hide the "No photos" message box in all your empty galleries. You'll still see it when you're logged in, but your visitors won't:

    .notLoggedIn .nophotos {
    display: none;
    }

    
    

    You can see an example HTML-only page here.



40. Google analytics? Statcounter?

    If you'd like to use Google Analytics, set yourself up with an profile, then drop your Web Property ID into the box we provide you in your Control Panel. Get more info from our Stats page.

    For Statcounter, this tutorial is for you.



41. Can I make my own favicon?

    Some sites have little icons that appear next to the web address at the top of the page, such as the smuggy for the SmugMug home page. This also appears when you save the link in your browser and gives you a graphical way of looking at your links. You can have a custom favicon for your SmugMug site!

    
    

    The picture you need to create needs to be 8 bit (256 colours) and sized 16x16. You can see a great tutorial on how to do it here.

    After you have made the 'favicon.ico' file, upload it to a site like Google Sites that will store it for you. (SmugMug doesn't support .ico files).

    Finally, add this code your Custom Header (not Head Tag) box, changing the teal for the url of your image file:

    <LINK REL="SHORTCUT ICON" HREF="http://myimageishere.com/stuff/img.ico">

     

     

    Gotcha: IE doesn't always play nice with favicons. Sorry!



42. Can I hack it so my categories have descriptions?

    Sure! Add this code to your Bottom JavaScript box, changing the teal to reflect the name of your categories and the descriptions you want to show:

    function addCategoryDescription() {
     var categoryDescription = {
         "category_name" : "multiple word categories are separated by an underscore",
         "category2" : "This is another test.",
          "category3" : "Final test"
     };
    
      if ((YD.hasClass(document.body, "category")) && (!YD.hasClass(document.body, "subcategory"))) {
    
        re = /category_(\S+)/i;
        re.exec(document.body.className);
    
        breadCrumb = YD.get("breadcrumb");
        if (breadCrumb && categoryDescription[RegExp.$1]) {
          divTag = document.createElement("div");
          divTag.className = "categoryDescription";
          divTag.appendChild(document.createTextNode(categoryDescription[RegExp.$1]));
          breadCrumb.parentNode.insertBefore(divTag, breadCrumb.nextSibling);
        }
      }
      if (YD.hasClass(document.body, "homepage")) {
        re = /\>([\w\-]+)<\/a>/i;
    
        divTag = YD.get("categoriesBox");
       if (divTag) {
          divTags = YD.getElementsByClassName("albumTitle", "p", divTag);
    
          for (i=0; i<divTags.length; i++) {
           re.exec(divTags[i].innerHTML);
            if (categoryDescription[RegExp.$1] != undefined) {
              pTag = document.createElement("p");
              pTag.className = "categoryDescription";
              pTag.appendChild(document.createTextNode(categoryDescription[RegExp.$1]));
              divTags[i].parentNode.insertBefore(pTag, divTags[i].nextSibling);
            }
          }
        }
      }
    }
    YE.addListener(window, "load", addCategoryDescription);
     

    Note that you can add more and less category descriptions as needed. Also, category names are CaSE SenSITive.



43. Can I expose filenames so they show up under each photo in SmugMug style?

    Sure! It's a simple as adding the following code to your CSS box:

    #fileNameBoxWrapper {
    display: block;
    }


44. Can I link to my Facebook page?

    Please do. Here are three quick ways:

    1. Visit Facebook's badge maker where they'll make one for you. Just copy and paste their code into your Advanced Site-Wide Customization, Custom Footer section, or any area on SmugMug that accepts HTML code. Just remember to wrap it in <html> </html> tags if you're embedding it in your Bio, the Gallery Description field or your photo Caption areas.

    2. For a plain centered HTML link, see this super simple solution:

       <html><center>
       Visit our <a href="http://www.facebook.com/yourfacebookprofile">Facebook</a> page.
       </center></html>

    3. Would you rather have a fancy button? Find great Facebook badges and buttons for free! Here's a bunch on Google.

Uh-oh something went wrong...

45. Is your customization not showing up in a gallery?

    For your customization to show up in a gallery, the hide owner option in Customize Gallery MUST be toggled to no, also, the appearance option should be toggled to custom.

    If you associate your gallery with a community, you can choose for it to either take on the community's look and feel or SmugMug's look and feel.



46. Stuck? Want more customization help?

    The customization forum over at Dgrin should be your next stop. You'll find lots of friendly customization wizards who will help you get things up and running "just right". Happy customizing!