Site layout

This tutorial will explain and guide you through the process of setting up your Power- or Pro-smugmug account with a custom header, navbar, homepage with a slideshow but no galleries/categories and a separate page for the galleries/categories.

Examples of this can be found here: www.moonriverphotography.com; ivar.smugmug.com; www.photoscapedesign.com. Also, many other sites are set up like this.

By Ivar. This tutorial will explain how to get your smugmug site setup with a Header, a navbar, a slideshow on the homepage and a separate page linked in the navbar with all your galleries/categories.
smugmug site layout css navbar slideshow galleries html tutorial
TOP TO BOTTOM; The Header. There is a separate tutorial for the header, which is located here. Read and follow the instructions in that tutorial first, and then come back to this tutorial.
smugmug site layout css navbar slideshow galleries html tutorial
The Navbar For the Navbar, there is also a separate tutorial. You can find it here. Do that first, and then come back here for the rest of this tutorial.
smugmug site layout css navbar slideshow galleries html tutorial
The Slideshow The slideshow instructions can be found in a separate tutorial here. Specific problems with the slideshow should be asked in the slideshow thread on our forum at Dgrin. Read and follow the instructions in that tutorial, and then come back here.
smugmug site layout css navbar slideshow galleries html tutorial
$The Galleries Page I For the Galleries page we are going to use one of <a href="http://www.dgrin.com/member.php?u=1150">Devbobo's</a> tricks. See the dgrin thread <a href="http://www.dgrin.com/showthread.php?p=355505#post355505">here</a>. What it does, in short, is it duplicates the homepage, but makes it separately adressable for us. Add this to your "Bottom javascript": function hasPath(sPath) { re = new RegExp("\/" + sPath + "(\/|$)"); return re.test(window.location) } if (hasPath("galleries")) YD.addClass(document.body, "galleries"); Now we have your 'normal' homepage which is accessible at XXXXX.smugmug.com and your 'duplicate' homepage which is accessible at XXXXX.smugmug.com/galleries$
The Galleries Page I

For the Galleries page we are going to use one of Devbobo's tricks. See the dgrin thread here.

What it does, in short, is it duplicates the homepage, but makes it separately adressable for us.

Add this to your "Bottom javascript":

function hasPath(sPath)
{
re = new RegExp("\/" + sPath + "(\/|$)");
return re.test(window.location)
}

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

Now we have your 'normal' homepage which is accessible at XXXXX.smugmug.com and your 'duplicate' homepage which is accessible at XXXXX.smugmug.com/galleries
smugmug site layout css navbar slideshow galleries html tutorial

The Galleries Page II<br>
<br>
<br>
Add this to your CSS:<br>
<br>
<table><td><font color=yellow>.homepage #galleriesBox,<br>
.homepage #categoriesBox,<br>
.homepage #featuredBox {<br>
display: none;<br>
}<br>
<br>

.galleries #homepageSlideshow,<br>
.galleries #bioBox {<br>
display: none;<br>
}<br>
<br>
.galleries #galleriesBox,<br>
.galleries #categoriesBox,<br>
.galleries #featuredBox {<br>
display: block;<br>
}</font>
</td></table><br>
If you want to have the galleries show up on your homepage when you are logged in (your visitors will not see them), you can add the following to your <font color=green>CSS</font> box:<br><br><font color=yellow>
.loggedIn .homepage #galleriesBox,<br>
.loggedIn .homepage #categoriesBox {<br>
display: block;<br>
}</font><br><br>

If you are using the Homepage Layout slideshow, and want to hide that on your galleries page, add the following to your <font color=green>CSS </font>box:<br><br>

<font color=yellow>.galleries #slideshowBox {display: none;} </font>
<br><br>

If you are using the Homepage Layout single photo/video box, and want to hide that on your galleries page, add the following to your <font color=green>CSS </font>box:<br><br>
<font color=yellow>.galleries #photoVideoBox {display: none;} </font>
<br><br>

The Galleries Page II

Add this to your CSS:

.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}

.galleries #homepageSlideshow,
.galleries #bioBox {
display: none;
}

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}

If you want to have the galleries show up on your homepage when you are logged in (your visitors will not see them), you can add the following to your CSS box:

.loggedIn .homepage #galleriesBox,
.loggedIn .homepage #categoriesBox {
display: block;
}

If you are using the Homepage Layout slideshow, and want to hide that on your galleries page, add the following to your CSS box:

.galleries #slideshowBox {display: none;}

If you are using the Homepage Layout single photo/video box, and want to hide that on your galleries page, add the following to your CSS box:

.galleries #photoVideoBox {display: none;}

smugmug site layout css navbar slideshow galleries html tutorial

The Galleries Page III Now we have to link the galleries page in the navbar. Set the link to the galleries in your header code from your navbar. (see the navbar tutorial if you necessary) Link it to: XXXXX.smugmug.com/galleries In case you are using a custom domain, link it to: /galleries Linking to a gallery, can be done, too! For instance: http://dgrin.smugmug.com/gallery/6846171_zKp5q That's it, you're done! You can add some HTML-only pages for a bio- or information page. Or you can make a guestbook, and link them in your navbar. Look in the customization FAQ to see how. Discuss it at the Dgrin Customization Forum

smugmug site layout css navbar slideshow galleries html tutorial