Advanced Smugmug Customization by Barb Gates

 

**** WARNING ****  **** WARNING ****  **** WARNING ****  **** WARNING ****

THIS ARTICLE HAS BECOME TOO OLD AND OUTDATED. I now use Zenfolio exclusively for my personal portfolio and http://ronmartinsen.com now only points to my Zenfolio site. Click here to read my Zenfolio review and learn why I feel it’s the best service available now.

**** WARNING **** **** WARNING **** **** WARNING **** **** WARNING ****

 

During the process of doing my Professional Web Hosting Roundup investigation, Markham Bennett of Smugmug put me in touch with Support Hero Barb Gates (shown above). At Smugmug they have a really cool  gallery of photos of the Smugmug Superheroes and I totally understand why now – people like Barb rock! She bent over backwards to help me under a compressed schedule to get my smugmug site looking like a cool custom site.
I’m taking this short diversion from the series to show you how it was done before I dive into the review later this week.

First, the Easy Way (by Ron)

At the time I was beginning my review, the easy way didn’t exist. A typical default smugmug site might look like this:

Easy Customizer

However, Smugmug was working hard to make things both easier and more powerful. The answer? – Easy Customizer. Here’s a short video demo of the Easy Customizer in action:

Click here to view a larger version

Afer few simple clicks of customizations using its cool new Easy Customizer the default site can be updated to look like this:

Pretty cool, huh?
However, for as cool as that is, it still looks like a consumer level template site. The rest of this article is geared for the web programmer who isn’t afraid to roll up their sleeves and get some killer results.

Now for the Power Users in Barb’s own words…

Customizing SmugMug can be as simple or as advanced as you want. All up to you. Pretty much anything goes, and you can completely change the look & feel of your site with some CSS and HTML. Advanced hacks are available via JavaScript to also change some of the default functions, text, etc.
Most all of your customization will live in the CSS, Custom Header and Custom Footer boxes inside your customization panel.
CSS stands for “Cascading Style Sheets” and controls the look and formatting of your site. SmugMug uses default CSS for each theme. With customizing, you can override the default CSS and use your own. You are able to change the colors, fonts and layout of your page. All of this goes in the CSS box in your customization panel.
Your HTML lives in the Custom Header and Custom Footer boxes. Here is where you can add a navbar, header banner (logo), and custom footer. You then use CSS to change the color, position, fonts, etc., for each.
Your HTML and CSS live in harmony. The HTML creates the elements, and the CSS styles them.
You can use JavaScript “hacks” to change certain default functionality of the site. There are two sections for JavaScript - top and bottom. You want to use the Bottom JavaScript box most of the time, as scripts placed in the Top JavaScript box will slow down the loading of your pages.
Site-wide customization can be found in the account holder’s control panel, under the Customize tab. Here’s a short video flyover of the site-wide customization for Ron’s test site:

Click here to view a larger version

For this example, I customized http://ronmartinsen.smugmug.com/ to look like this:

Let’s start with the basics:

1. Banner/Logo
2. Navbar

These both live in the Custom Header box. We use individual Div ID’s for each. Those Div ID’s will be used in the CSS to position, change font, color, etc.
The following has been placed in the Custom Header box for the above site:

<!-- Begin Header and Navbar -->

<div id="RMHeader">

 <div id="RMLogo"><a href="/"><img src="/img/spacer.gif" width="300" height="55" border="0" /></a></div>

 <div id="RMNav">

  <ul>

    <li><a href="/">home</a></li>

    <li><a href="/galleries">portfolio</a></li>

    <li><a href="http://ronmartinsen.blogspot.com" target="_blank">blog</a></li>

    <li><a href="/gallery/7973047_UNC2k">contact</a></li>

  </ul>

 </div>

</div>

<!-- End Header and Navbar -->

Now, to style and position the banner and navbar, the corresponding CSS for the above, goes in the CSS box:

/* BANNER */

#RMHeader {position: relative; width: 943px; height: 60px; margin: 0 auto;}

.homepage #RMHeader,

.category #RMHeader,

.subcategory #RMHeader,

.filmstrip #RMHeader,

.journal #RMHeader {margin-top: 50px;}

#RMLogo {

width: 300px;

height: 55px;

background: url(/photos/517708344_ZGVQ5-300x55-1.jpg) no-repeat;

}

/* NAVBAR */

#RMNav {position: relative; float: right; margin-top: -8px;}

#RMNav ul {list-style:none; margin:0; padding:0; font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif;}

#RMNav li {float:left; padding:0; margin:0;}

#RMNav li a {text-decoration: none;

padding: .1em .4em;

color: #4f4f4f;

background-color: none;}

#RMNav ul li a:hover {

color: #0677a1;

background-color: none;

}

For the footer, I have added the following into the Custom Footer box in customization:

<!-- Begin Footer -->

<div id="RMFooterWrapper">

<div id="RMFooter">copyright (c) 2009 - ron martinsen photography - all rights reserved</div>

</div>

<!-- End Footer -->

To style the footer, and position it, I have used the following CSS in the CSS box:

/* FOOTER */

#cobrand_footer {display: none !important; width:943px; margin:0 auto;}

#cobrand_footer .nav,

#cobrand_footer .text {font:8pt verdana, arial, sans-serif; color: #404040; margin-top: -5px; }

#cobrand_footer #footer {width:943px; text-align:left; font:8pt verdana, arial, sans-serif; color:#404040;}

#RMFooterWrapper {width:943px; margin:0 auto;}

#RMFooter {font:8pt verdana, arial, sans-serif; color: #aaa; margin-top: -4px; float: right;}

For this particular site, I have changed the default width of the homepage (typically 750px) to accommodate a background image behind the slideshow.
Some CSS is required to accomplish this. This CSS is in the CSS box is the customization:

/* HOMEPAGE */

#homepage {width:943px;}

#homepage #breadcrumb {display:none;}

#homepage p.note {display:none;}

#homepageTools {border: none; text-align: center;}

#feeds {display:none;}

.cartlink_footer {display: none;}

#userName {display: none;}

#userHome {display: none;}

#galleryTitle, #categoryTitle {visibility: hidden;}

.albumTitle .nav {color: #666 !important; font-size: 7pt !important;}

#breadcrumb .nav,

#breadcrumb .title {color: #aaa; font-size: 8pt; font-family: Verdana, Arial, Helvetica, sans-serif;}

/* BIOBOX */

#ssContainer {background: url(/photos/517878808_X2UFX-O.jpg); width: 943px; height: 615px;}

#bioSS {padding-top: 33px;}

#bioBox {width:943px; height: auto; margin:0 auto;}

#bioBox .boxBottom,

#bioBox #userBio {padding:0;}

#bioBox .photo {display:none;}

#bioText {display: none;}

#userBio {text-align: center;}

This accomplishes several things:

1. Changes the default width of the homepage to 943px, the width of the background image
2. Removes the default breadcrumb from the homepage, which includes the account holder’s name
3. Removes the feeds from the footer
4. Removes the shopping cart link from the footer
5. Removes the default gallery box title
6. Centers the slideshow in the biobox
7. Adds the background image for the slideshow
8. Removes any text that has been added into the bio

Some other CSS I have added includes: changing the background color of the site, adding borders to the images when hovered over, changing the title colors, making the box top backgrounds transparent, and removing the keywords listed for individual photos:

/* GENERAL */

body {background-color: #fff;

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #aaa;}

a:hover img.imgBorder,

.imgBorderOn {

border-color: #0677a1;

}

#photoKeywords { 

display: none; 

}

.title {

color: #0677a1; 

}

.box {background: transparent;}

.boxTop {border: 0;}

These particular tweaks are all optional, and will depend upon how you wish to set up your site.
On this site, we have created a separate galleries page. The default setup shows your galleries on your homepage. Since I have created a navbar that links to the galleries, I need to hide the galleries on the homepage, and create a separate page for those. This requires both CSS and JavaScript to accomplish this. We will start with the JavaScript. This is placed in the Bottom JavaScript box in customization:

/*============================*/

/*== Virtual Gallery Pages ===*/

/*============================*/

function hasPath(sPath)

{

re = new RegExp("\/" + sPath + "(\/|$)");

return re.test(window.location)

}

if (hasPath("galleries"))

YD.addClass(document.body, "galleries");

That creates the galleries page. To now hide the galleries, and other elements, from the homepage, and show them on the new galleries page, I added the following to the CSS box in customization:

/* SEPARATE GALLERY PAGE */

.homepage #galleriesBox,

.homepage #categoriesBox,

.homepage #featuredBox {

display: none;

}

.galleries #bioBox {

display: none;

}

.galleries #galleriesBox,

.galleries #categoriesBox,

.galleries #featuredBox {

display: block;

}

.loggedIn .homepage #galleriesBox,

.loggedIn .homepage #categoriesBox {

display: block;

}

The above CSS allows the galleries to be seen on the galleries page, and not on the homepage. However, there is also CSS included that will allow the account holder, when logged in, to see their galleries on the homepage, which makes it much more convenient for adding galleries, adding images to created galleries, etc. The resulting page is http://ronmartinsen.smugmug.com/galleries. It has been linked to in the navbar as Portfolio. That is part of the HTML in the Custom Header box discussed earlier. You can name that page anything you wish.
This account holder wanted the thumbs on the gallery page centered. This works if you only intend on having a certain number of thumbs. Gallery thumbnails will center themselves as you add more galleries; however, if you intend to only have, like in this case, three galleries, they can be centered on the page. I used the following CSS in the CSS box for this:

/* CENTER GALLERY THUMBS */

.miniBox {

width:125px;

height: 125px !important; 

padding:0 0 5em 0; 

margin:190px 90px 0;

} 

.miniBox .photo {

height:auto; 

_height:1px;

} 

.miniBox .albumTitle, 

.miniBox .private {

width: 100px; text-align: center;} 

.albumLarge {

width:160px; 

height:  160px !important;

padding:0 0 5em 0; 

margin:130px 40px 0;

} 

.albumLarge .photoLarge {

height:auto; 

_height:1px;

} 

.albumLarge .albumTitle, 

.albumLarge .private {

text-align:center;

width: 160px; text-align: center;

}

To keep the galleries page clean and uncluttered, I have also used CSS to remove the updated date and time (which is a default setting) underneath the gallery thumbnails. The following CSS was added for this:

/* REMOVE DESC AND UPDATED TIME */

#categoriesBox .miniBox p.description,

#galleriesBox .miniBox p.description,

#featuredBox .miniBox p.description {display: none;}

#categoriesBox .miniBox p.updated,

#subcategoriesBox .miniBox p.updated,

#galleriesBox .miniBox p.updated,

#featuredBox .miniBox p.updated {display: none;}

This account holder wanted to use the filmstrip viewing style in his public galleries. You are able to force a certain viewing style in the gallery settings, which I have done. Let’s take this gallery, for example http://ronmartinsen.smugmug.com/gallery/7923208_3y7Uh. To make that gallery clean and sharp, a lot of the default elements of the gallery have been removed, using CSS. I have removed the size picker under the images, the album navigation, and the fullscreen slideshow. I have also changed the color, size, and font of the navigation above the filmstrip. The account holder also wanted to change the arrows. Images were uploaded to a gallery, and then linked to in the CSS to change the default arrows. The following was added to the CSS box in customization to accomplish this:

/* FILMSTRIP VIEWING STYLE */

.filmstrip #sizePicker {display: none;}

.filmstrip #albumNav_bottom {display: none;}

.filmstrip #albumNav_top .nav {color: #aaa; font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif;}

.filmstrip #albumNav_top .title {color: #aaa; font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif;}

.filmstrip .play_slideshow {display: none;}

#filmstrip #leftMove {

background: url(/photos/518609615_ba4nL-O.png) no-repeat;

}

#filmstrip #rightMove {

background: url(/photos/518609616_oPqzH-O.png) no-repeat;

}

Since I have styled the banner/logo and navbar on the homepage to fit the new width I gave it, I needed to make some tweaks to the default SmugMug viewing style, which fills the browser. I wanted the banner/logo in SmugMug viewing style to be to the far left, and the navbar to be to the far right. I added the following CSS to accomplish this for the SmugMug viewing style:

/* SMUGMUG VIEWING STYLE */

.smugmug #RMHeader {width:auto; padding-left: 10px; margin-top: 10px; padding-bottom: 10px;}

.pageNav {color:#0677a1;}

#smugmug #displayPhoto {text-align:center;}

#stylebar {visibility:  hidden;}

.smugmug #RMFooterWrapper {width: auto;}

.smugmug #RMFooter {margin-right: 15px;}

.smugmug #RMNav {margin-right: 10px;}

.smugmug #cobrand_footer {width: auto;}

.smugmug #cobrand_footer .text {+margin-left: 15px;}

I also wanted to remove the lines in the SmugMug viewing style that separate the header, footer, and images, for a clean look. The following CSS was used:

/* LINES */

.top_border {border-top: none;}

.bottom_border {border-bottom: none;}

.right_border {border-right: none;}

.left_border {border-left: none;}

.journal_entry {border-bottom: none;}

I’ve styled the comments box in the galleries to match the colors of the site. The following CSS was added:

/* COMMENTS */

#comment {margin-bottom:10px; border:0;}

#comments .box {border:1px solid #ccc;}

#comments .boxTop {background: #ccc; border-bottom:1px solid #fff;}

#comments .boxBottom {background:#eee;}

Instead of the default buttons, this user wanted them changed to not include borders, smaller text, different color, etc. The following CSS was used for this:

/* Buttons */

.buttons, .smbuttons { 

color: #aaa;

background-color: #fff;

border: 1px solid #404040;

}

.sm-button {

border-top: none;

border-bottom: none;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 9pt;

background: #fff url(/photos/517900816_fPZ7y-O.png)  repeat-x;

}

.glyphButton .first-child, .yui-menu-button button {

background-image: url(/photos/517900816_fPZ7y-O.png);

}

.sm-button button, .sm-button a {

color: #aaa; font-family: Verdana, Arial, Helvetica, sans-serif;}

.sm-button {

border-left: none;

border-right: none;

_border-left: none;

_border-right: none;

~border-left: none;

~border-right: none;

}

.sm-button .first-child {

border: none;

_border-left: none;

~border-left: none;

_border-right: none;

~border-right: none;

}

I also created a gallery for the account holder’s contact information, which is linked to from the navbar. When doing a mostly text gallery, I like to keep those galleries very clean, so I have used CSS to remove the navigation (breadcrumb), page navigation, and also to style and position the text in the gallery http://ronmartinsen.smugmug.com/gallery/7973047_UNC2k:

/* CONTACT GALLERY */

.gallery_7973047 .pageNav {display: none;}

.gallery_7973047 .nophotos {display: none;}

.gallery_7973047 #breadcrumb {display: none}

#contactText {color: #666; font-size: 8pt;}

#contactText a {color: #666; font-size: 8pt;}

#contactPic {width: 200px; height: 300px; border: 0;}

#contactContainer {width: 200px; padding-top: 55px; padding-left: 35px;}

That’s it for the CSS, Custom Header and Custom Footer boxes in the customization.
I have added several JavaScript “hacks” to accomplish various tasks. The following is in the Top JavaScript box:
1. Remove the pipes (separators) in the footer:

/*============================================*/

/*============= Remove Pipes in Footer =======*/

/*============================================*/

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

2. Remove the text bubble when you hover over images:

/*============================================*/

/*======= Remove Text Bubble on Hover ========*/

/*============================================*/

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)});

3. Stop the Filmstrip viewing style from auto scrolling:

/*======================================*/

/*== Stop Auto Scrolling in Filmstrip ==*/

/*======================================*/

filmstripMove = 0;

One other JavaScript function was added to the Bottom JavaScript box, which changes the default text in the navigation (breadcrumb). The default is to show your “displayed as” name. You might be displaying your full name, first name, nickname, etc. This account holder wanted that changed to “Home”, which was accomplished with the following JavaScript:

/*============================*/

/*== Change Breadcrumb ==*/

/*============================*/

var objElement = document.getElementById("breadCrumbTrail")

if (objElement != null) {

var str = new String(objElement.innerHTML);

str = str.replace('>Ron Martinsen<', '>Home</a><');

objElement.innerHTML = str;

}

Final tweaks include adding a favicon and changing the browser title. I have also added information to remove the IE print toolbar. This was placed in the Head Tag box in customization:

<script language="javascript">

   1: document.title="Ron Martinsen Photography"
</script> 

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

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

<LINK REL="SHORTCUT ICON"

HREF="http://bygates.googlepages.com/rmfavicon.ico">

It should be noted that .ico files cannot be uploaded currently to SmugMug. The file, however, can be uploaded to another site, and linked to in your customization, as I have done above.
In your navbar, you can link to any external site, also. For this user, I have added an external link to his blog, which opens in a new tab or window when clicked.

Conclusion

I was super impressed what Barb was able to accomplish in a very short period of time. I know it looks daunting, but she pulled this site together in about a day (in addition to doing her day job!!!!). Be sure to go check out the new Easy Customizer and Site-wide customizations so you pimp your site!

Special Offer for Blog Readers (Coupon Code: SmugRon)

If you haven’t used Smugmug before, you should AT LEAST try out the free trial. Should you decide to join you can get 20% off your first year membership when you use the coupon code SmugRon.