Wednesday, May 13, 2009

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 ****

 

Barb Gates - Smugmug Superhero
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:
smugmug default look - ronmart.smugmug.com

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:
Afer few simple clicks of customizations using its cool new Easy Customizer the default site can be updated to look like this:
smugmug easy customized look - ronmart.smugmug.com
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:
For this example, I customized http://ronmartinsen.smugmug.com/ to look like this:
Ron Martinsen Photography
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.


If you enjoyed this article, please support future articles like this by making a donation or saving money by using my discount coupon codes. Either way, your support is greatly appreciated!

Click here to learn more about how this blog is funded. Residents from Arkansas, California, Georgia, Illinois, Kansas, Maine, Michigan, Minnesota, Missouri, Nevada, New Jersey, North Carolina, Ohio, Rhode Island, Tennessee, Vermont, Washington, West Virginia, and Wyoming (and where prohibited by law) may be prohibited from using the links to make purchases, so please consider making a donation instead. This blog is intended for freelance writing and sharing of opinions and is not a representative of any of the companies whose links are provided on this site.

The opinions provided are of Ron Martinsen alone and do not reflect the view of any other entity

16 comments:

Ant said...

what an awesome tutorial! only one question... instead of hiding the horizontal lines that separate journal entries, is there a way to change the color of those lines? thanks!

Barb Gates said...

Hi, yes, you can change the color of the journal entry separators by adding the following to your CSS in the advanced site-wide customization:

.journal_entry {border-color: #fff !important;}

Of course, use the color you wish in place of the #fff.

Lou said...

Hi Barb, do you know if and how I could change the updated box format (.. just want to see the date, not the time..).
Thanks !

Lou

Ron Martinsen said...

Hey Lou, you might want to try using help@smugmug.com for support questions - the folks there are very helpful and you'll get a quicker response.

David W said...

Love the codes!! But is there a way to make the galleries closer together?

www.davidbwalkerphotography.com

Ron Martinsen said...

David, that's probably a good question for help@smugmug.com. While support for custom programming might be limited, if you are lucky they might just know the answer off the top of their head. In fact, if you are lucky Barb might respond to your mail.

David said...

Thanks Ron,

Also how do i make my banner not look small?

what should the width and height be when i make it in photoshop??


david

www.davidbwalkerphotography.com

Mark J. said...

Hey Barb and Ron,

I noticed in your code - for the slideshow background - you have it coded #ssContainer. Do you have to identify it anywhere else in order for it to read. I was testing out the code and when I checked it out - it's being identified as userbio instead of BioSS. Any idea what I did wrong?

Mark J. said...

Hi Barb and Ron.

I tested out your code in the tutorial - which is one of the best and easiest to follow. Thanks. My question pertains to the background image behind the slide show. I have one that I tried but could not get it to work. I noticed you have it identified by sscontainer...which I added per the tutorial but I don't see it anywhere - do I have to id it anywhere else? Stuck on that part.

Ron Martinsen said...

Hi Mark,

For support questions, you'll get the fastest response by visiting the SmugMug support forum at DGrin, or by sending an email to the support desk.

Anonymous said...

Script typo, should be ';' at the end of the breadCrumbTrail statement below:



/*============================*/
/*== Change Breadcrumb ==*/
/*============================*/

var objElement = document.getElementById("breadCrumbTrail")

Harish said...

Hi,

Thanks for the wonderful tutorial about customizing the smugmug website.
I had a question like is it possible to show randomly the pictures in all the galleries in the homepage slideshow?

thanks for the help

Paul Abrahams said...

This is great but frustrating, there must be some typos in the code. PLEASE FIX and update this page.

Ron Martinsen said...

Paul,

This is meant to be an example of what is possible. My site works and this code was pasted from its actual working code.

This isn't for beginners though. It's assumed you are a seasoned web programmer who is fluent in CSS, HTML and JScript. If you aren't then this article is not for you and you should consider hiring a web programmer.

Ron

Anonymous said...

Hi. I wanted to try out the copyright footer ("RMFooter"). For the life of me, I do not know how to center it. What do I need to edit to center the RMFooter?

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

Ron Martinsen said...

My guess is that you'll need to change:

text-align:left

to

text-align:center

I don't maintain that site anymore so it's only their for illustration purposes. The code and CSS featured here is live still though.