1. Tutorials
  2. SmugMug - Site Stuff

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.
Read More
  • By <a href="http://ivar.smugmug.com">Ivar</a>.


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.

    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.

    smugmugsitelayoutcssnavbarslideshowgallerieshtmltutorial

  • TOP TO BOTTOM; The Header.


There is a separate tutorial for the header, which is located <a href="http://dgrin.smugmug.com/gallery/1932865">here</a>.

Read and follow the instructions in that tutorial first, and then come back to this 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.

    smugmugsitelayoutcssnavbarslideshowgallerieshtmltutorial

  • The Navbar


For the Navbar, there is also a separate tutorial. You can find it <a href="http://dgrin.smugmug.com/gallery/1932803">here</a>. 

Do that first, and then come back here for the rest of 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.

    smugmugsitelayoutcssnavbarslideshowgallerieshtmltutorial

  • The Slideshow


The slideshow instructions can be found in a separate tutorial <a href="http://dgrin.smugmug.com/gallery/3624147" target="_blank">here</a>. Specific problems with the slideshow should be asked in the <a href="http://www.dgrin.com/showthread.php?t=73247" target="_blank"> slideshow thread</a> on our forum at Dgrin.

Read and follow the instructions in that tutorial, and then come back here.

    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.

    smugmugsitelayoutcssnavbarslideshowgallerieshtmltutorial

  • The Galleries Page I<br>
<br>
<br>
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>.<br>
<br>
What it does, in short, is it duplicates the homepage, but makes it separately adressable for us.<br>
<br>
<br>
<br>
<br><br><br><br>
Add this to your "Bottom javascript":<br><br>
<br>

<font color=yellow>
function hasPath(sPath)<br>
{<br>
re = new RegExp("\/" &#43;  sPath &#43; "(\/|$)");<br>
return re.test(window.location)<br>
}
<br><br>

if (hasPath("galleries"))<br>
YD.addClass(document.body, "galleries");<br><br>
</font>
<br><br>

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

    smugmugsitelayoutcssnavbarslideshowgallerieshtmltutorial

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

    smugmugsitelayoutcssnavbarslideshowgallerieshtmltutorial

  • 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


<b>That's it, you're done!</b>

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 <a href="http://www.dgrin.com/showthread.php?t=26043">the customization FAQ</a> to see how.

Discuss it at <a href="http://www.dgrin.com/showthread.php?t=44182"> the Dgrin Customization Forum</a><br><br>

    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

    smugmugsitelayoutcssnavbarslideshowgallerieshtmltutorial

  • Photo Sharing
  • About SmugMug
  • Browse Photos
  • Prints & Gifts
  • Terms
  • Privacy
  • Contact
  • Owner Log In
© 2023 SmugMug, Inc.