By Ivar.


This tutorial will explain you 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.

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.

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.

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.

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

The Galleries Page II


Add this to your CSS:

.homepage #galleriesBox, .homepage #categoriesBox, .homepage #featuredBox {     display: none; } .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;}

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