Step by Step

[gundog]

Does anyone have a step by step guide on how you build a smugmug customized website? I am not looking for the Customization FAQ...I have been there many times. I have been through all the links many times.

I am looking for some help on WHAT you build first and why. I see all kinds of links with code. For a new user...those are like hammers and nails...I am still looking for the blueprint.

Here's my desired outcome with some questions (if that's helpful):

* Splash page with large picture, centered slide show
* Navbar with 3-4 subjects
* Header using text but text should be customizable (size, style, color) without affecting other text on the same page.
* Understanding the difference between categories, galleries and sub categories (this is far less intuitive than one might think!)
* Galleries or categories (whichever one they should be) only visable on the Galleries link of the Navbar
* On the navbar...if a galleries button takes you to galleries (or categories) what is the URL that you link to go to the galleries page?
* Adding a sponsor link with graphics to the first page - how can I position that graphic, description and link?
* Setting up Pricing - how do I get there once logged in?
* Setting up Guestbook - how and WHEN do you set that up?
* People are always saying paste This code and That code. Can you paste that ANYWHERE in the box? Do you delete some previous code related to the change (i.e.font or positioning?) Should it go above or below the code in the box?

Thank you for any consideration. I do not want to trial and error again building this site. A roadmap or plan in a logical order would be gold! I would like the site to be much the same as Andy's Moon River in terms of look and navigation.

Thanks!

www.gundogphotos.smugmug.com (http://www.gundogphotos.smugmug.com)

[black_fx_35]

Does anyone have a step by step guide on how you build a smugmug customized website? I am not looking for the Customization FAQ...I have been there many times. I have been through all the links many times.

I am looking for some help on WHAT you build first and why. I see all kinds of links with code. For a new user...those are like hammers and nails...I am still looking for the blueprint.

Here's my desired outcome with some questions (if that's helpful):

* Splash page with large picture, centered slide show
* Navbar with 3-4 subjects
* Header using text but text should be customizable (size, style, color) without affecting other text on the same page.
* Understanding the difference between categories, galleries and sub categories (this is far less intuitive than one might think!)
* Galleries or categories (whichever one they should be) only visable on the Galleries link of the Navbar
* On the navbar...if a galleries button takes you to galleries (or categories) what is the URL that you link to go to the galleries page?
* Adding a sponsor link with graphics to the first page - how can I position that graphic, description and link?
* Setting up Pricing - how do I get there once logged in?
* Setting up Guestbook - how and WHEN do you set that up?
* People are always saying paste This code and That code. Can you paste that ANYWHERE in the box? Do you delete some previous code related to the change (i.e.font or positioning?) Should it go above or below the code in the box?

Thank you for any consideration. I do not want to trial and error again building this site. A roadmap or plan in a logical order would be gold! I would like the site to be much the same as Andy's Moon River in terms of look and navigation.

Thanks!

www.gundogphotos.smugmug.com (http://www.gundogphotos.smugmug.com)

All good questions. I understand it can be frustrating at times, but if you take it one step at a time, I am confident you will be able to get things done. I know this because I had NO CLUE how to do anything on my site, if I am being honest, I still have no clue. But by asking specific questions, and taking it one step at a time, so many people have helped me put together my site.

As far as a roadmap is concerned, or direction on what to do first, second or third...I don't think you will find this. The nice thing about SmugMug is the extreme diversity in customization options...so what you may want on your site, others may not want. As a relative newbie myself (with no clue how to build a site), I would encourage you to ask specific questions, and take things on one at a time. I think you will get better results, and have a sense of gratification as you see your site coming together.

Good luck with your site!

[gundog]

All good questions. I understand it can be frustrating at times, but if you take it one step at a time, I am confident you will be able to get things done. I know this because I had NO CLUE how to do anything on my site, if I am being honest, I still have no clue. But by asking specific questions, and taking it one step at a time, so many people have helped me put together my site.

As far as a roadmap is concerned, or direction on what to do first, second or third...I don't think you will find this. The nice thing about SmugMug is the extreme diversity in customization options...so what you may want on your site, others may not want. As a relative newbie myself (with no clue how to build a site), I would encourage you to ask specific questions, and take things on one at a time. I think you will get better results, and have a sense of gratification as you see your site coming together.

Good luck with your site!

Thanks. I agree there is some cool stuff you can do. I guess I operate off the "you don't know what you don't know" premise.

Asking questions is great. What order you ask them in seems critical? Just my observation having deleted hours of work so far not knowing which/what to do first...then next.

Given the above desires...would you build a Gallery first or a Category? Smugmug kinda leads you to believe Galleries come first (logical order when on your website working) but if you do that...how would you then put a gallery under a category created later?

Any insight appreciated.

[Andy]

Does anyone have a step by step guide on how you build a smugmug customized website? I am not looking for the Customization FAQ...I have been there many times. I have been through all the links many times.

I am looking for some help on WHAT you build first and why. I see all kinds of links with code. For a new user...those are like hammers and nails...I am still looking for the blueprint.

Here's my desired outcome with some questions (if that's helpful):

* Splash page with large picture, centered slide show
* Navbar with 3-4 subjects
* Header using text but text should be customizable (size, style, color) without affecting other text on the same page.


Start with this, right in the Start Here Sticky. There's a tutorial for each of these three things. How about starting with those, then taking the next bite?

What will your navbar links be to? Reply with that and we'll help you get that part done :)

[Andy]

Given the above desires...would you build a Gallery first or a Category? Smugmug kinda leads you to believe Galleries come first (logical order when on your website working) but if you do that...how would you then put a gallery under a category created later?

Hi, you're over-thinking things :)

1. Create a new gallery. As you make it, you decide what category the gallery goes in (Portraits, Landscapes, Sports, ....) Put a few photos in it.

More on categories and subcategories, here:
http://wiki.smugmug.com/display/SmugMug/Site+Organization with some linked examples to help you visualize it.

[gundog]

Start with this, right in the Start Here Sticky. There's a tutorial for each of these three things. How about starting with those, then taking the next bite?

What will your navbar links be to? Reply with that and we'll help you get that part done :)

Andy- I have been to that Sticky and that FAQ page dozens of times. I do not get what I need from it.

For example - on the header (per my above comments) I want flexibility on the font size, color and shape. this code does not give me that.

<div align="center">
<h2>My amazing photos</h2>
</div>

[gundog]

Hi, you're over-thinking things :)

1. Create a new gallery. As you make it, you decide what category the gallery goes in (Portraits, Landscapes, Sports, ....) Put a few photos in it.

More on categories and subcategories, here:
http://wiki.smugmug.com/display/SmugMug/Site+Organization with some linked examples to help you visualize it.

You say Create New Gallery, as you make it decide what Category it goes into.

What I see is you have to Create a Category FIRST for that gallery to go into. Is that right?

So you Create Categories FIRST and then put your Galleries into those categories SECOND - First and Second being steps in a process.
----------------------------------------------------------------------

Confused about Categories and Subcategories (http://www.smugmug.com/help/upload-photo)? Don't go nuts about it. It's just a new method of organizing.
Put photos in galleries. Those galleries can then be organized with categories and subcategories.
Category > subcategory > gallery > photos
You can display either galleries or categories on your SmugMug homepage.
Say you are a wedding shooter. Simply create a new subcategory for each wedding. So, Smith-Jones gets a subcategory. In that Subcategory, you can now add galleries, for each part of the wedding: Before, The Ceremony, Formals, Reception, etc. The way it looks is just like this:
Here is the subcategories page (http://andydemo.smugmug.com/Weddings), all your weddings would be here. Click on one of the wedding couples, and you can see how the galleries are underneath. Clear as mud?
Do you have better ideas - or different ways of organizing? Share them here!

[gundog]

Start with this, right in the Start Here Sticky. There's a tutorial for each of these three things. How about starting with those, then taking the next bite?

What will your navbar links be to? Reply with that and we'll help you get that part done :)

Navbars:

Galleries
Contact Us
About Us
Guestbook (unless I can create a comments section at the gallery level)
Pricing

** Please keep in mind I have ZERO content on this site right now. I deleted all photos, galleries, etc. So when you ask what will the navbar link to do you mean what 'headings' or what 'content'?

[gundog]

Start with this, right in the Start Here Sticky. There's a tutorial for each of these three things.

Andy - can you identify which of the tutorials you believe walk me through each of these items?

[Andy]

Andy - can you identify which of the tutorials you believe walk me through each of these items?

Sure!

Banner
http://dgrin.smugmug.com/gallery/1932865

Slideshow
http://dgrin.smugmug.com/gallery/2160039

Navbar
http://dgrin.smugmug.com/gallery/1932803

[Andy]

Navbars:

Galleries
Contact Us
About Us
Guestbook (unless I can create a comments section at the gallery level)
Pricing

Put this in your Header HTML box:
(the # will actually be replaced with gallery links once you make the galleries)


<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/Galleries">Galleries Me</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="">Guestbook</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</div>

Put this in your CSS box:

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}

[gundog]

Sure!

Banner
http://dgrin.smugmug.com/gallery/1932865

So I DO have to create a Banner even though I am just using Text?

Slideshow
http://dgrin.smugmug.com/gallery/2160039

The slide show assumes you are using what gallery from what category and where does that reside?


Navbar
http://dgrin.smugmug.com/gallery/1932803

The navbar links assume you already have galleries so that you know where to link to? So the 3 things were going to 'start' with need content and a url to be directed to?

And what would be the URL to a Gallery page? Is it an empty Gallery that just makes up a page but has no pics?

[gundog]

Put this in your Header HTML box:
(the # will actually be replaced with gallery links once you make the galleries)


<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/Galleries">Galleries Me</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="">Guestbook</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</div>

Put this in your CSS box:

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}

Great. Now how would we move those and adjust color, etc?

[Allen]

The navbar links assume you already have galleries so that you know where to link to? So the 3 things were going to 'start' with need content and a url to be directed to?

And what would be the URL to a Gallery page? Is it an empty Gallery that just makes up a page but has no pics?
Your nav links will look like this.

To a specific gallery
<li><a href="/gallery_xxxxxxxx_xxxxx">Guestbook</a></li>

to a category using the category name Family
<li><a href="/Family">My Family pics</a></li>

These are relative links, you do not need the http://nickname.smugmug.com
in front of each.
<li><a href="http://nickname.smugmug.com/gallery_xxxxxxxx_xxxxx">Guestbook</a></li>

Create a couple galleries. The category that it is in can be changed at any
time in the gallery under "customize gallery".

Try this page (http://allen-steve.smugmug.com/gallery/3819841), it has step by step instructions of setting up your guestbook gallery.

[Allen]

Great. Now how would we move those and adjust color, etc?
Change the bolded colors in these. The 2nd one is for the hover.
Look here (http://www.december.com/html/spec/color.html) for color combinations.

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}

[gundog]

Your nav links will look like this.

To a specific gallery
<li><a href="/gallery_xxxxxxxx_xxxxx">Guestbook</a></li>

to a category using the category name Family
<li><a href="/Family">My Family pics</a></li>

These are relative links, you do not need the http://nickname.smugmug.com
in front of each.
<li><a href="http://nickname.smugmug.com/gallery_xxxxxxxx_xxxxx">Guestbook</a></li>

Create a couple galleries. The category that it is in can be changed at any
time in the gallery under "customize gallery".

Try this page (http://allen-steve.smugmug.com/gallery/3819841), it has step by step instructions of setting up your guestbook gallery.

Thanks Al. I don't understand any of that. :dunno I want the Gallery Navbar to go to a seperate page where all Galleries under Categories will be found. Just reading the code you gave...is that what it would do?

Also...per the question, wouldn't I need galleries created to take this (or a similar) step?

Here's what I'm afraid of...(and this is not your guys fault)...I am getting code again for cut-n-paste but not quite 'getting' why I would do this at this point. I have no pictures uploaded, no galleries created, no categories. Are you certain I should be pasting code right now?

[Allen]

...
This will get you a simple banner.
Add this above for nav html in the header.

<div id="myHeader">Gundog's Galleries</div>
<div id="navcontainer">
....


Add this to your CSS to format it.

#myHeader {
text-align: center;;
font-family: Comic Sans MS, verdana;
font-size: 300%;
color: #ccc;
margin: 10px auto;
}

[gundog]

Change the bolded colors in these. The 2nd one is for the hover.
Look here (http://www.december.com/html/spec/color.html) for color combinations.

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}

Thanks Al - would that also re-position the navbar listings?

[Allen]

Thanks Al. I don't understand any of that. :dunno I want the Gallery Navbar to go to a seperate page where all Galleries under Categories will be found. Just reading the code you gave...is that what it would do?

Also...per the question, wouldn't I need galleries created to take this (or a similar) step?

Here's what I'm afraid of...(and this is not your guys fault)...I am getting code again for cut-n-paste but not quite 'getting' why I would do this at this point. I have no pictures uploaded, no galleries created, no categories. Are you certain I should be pasting code right now?
If you look in your control panel under the homepage tab you'll see all the
different things/boxes that can be placed on your homepage. You have the
galleries/category box on your homepage now. What you'll probably do is
create another homepage, a duplicate, called galleries. Then with CSS, you
can hide/show any of these on either page.

Most want the biobox on their homepage with a slideshow or single big
photo and use the dup galleries page to display all their cats/galleries.
This tutor (http://dgrin.smugmug.com/gallery/2160039) will get you the galleries page (duplicate homepage), scroll down
to "The Galleries Page" sections. It creates the function hasPath in your
javascript. Then in your footer uses that function to create the dup
homepage galleries. It also has CSS that shows/hides the boxes on either
page.

[Allen]

Thanks Al - would that also re-position the navbar listings?
In post 17 the margin part will space out the header and nav.
margin: 10px auto; /* top/bottom right/left */


If you want space under the nav you can add some with the bold.

#navcontainer ul {
margin: 0 auto 10px auto; /* top right bottom left */
padding: 0;
list-style-type: none;
text-align: center;
}


btw, these are comment tags in CSS, notes for your use, add any you like to keep track of things
/* text between these */

[gundog]

In post 17 the margin part will space out the header and nav.
margin: 10px auto; /* top/bottom right/left */


If you want space under the nav you can add some with the bold.

#navcontainer ul {
margin: 0 auto 10px auto; /* top right bottom left */
padding: 0;
list-style-type: none;
text-align: center;
}


btw, these are comment tags in CSS, notes for your use, add any you like to keep track of things
/* text between these */

Sorry Al...not sure I get what you're saying here. What do you mean "In post 17"? I can't tell what the above would do or not do and where the code starts and stops! Sorry...don't know HTML!

[Allen]

Thanks Al - would that also re-position the navbar listings?
You have two navcontainer div's, remove one of them.
Also placed in the links you'll need to eventually add gallery links to.

<div id="myHeader">Gundog's Galleries</div>
<div id="navcontainer">
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">My Galleries</a></li>
<li><a href="/gallery_xxxxxxxx_xxxxx">Contact Us</a></li>
<li><a href="/gallery_xxxxxxxx_xxxxx">About Us</a></li>
<li><a href="/gallery_xxxxxxxx_xxxxx">Guestbook</a></li>
<li><a href="/gallery_xxxxxxxx_xxxxx">Pricing</a></li>
</ul>
</div>

[qsjewl]

welcome to smugmug!! I'm a newbie too, just trying to figure this thing out and scared and confused by HTML. I have some pointers that may or may not help you. I know that the guys on here are extremely helpful, but sometimes when they talk in 'code' it's like they are talking in French and when asked a question, they just keep talking in French...and I don't speak French!!!

So, I guess for your question about galleries or categories first; you can do both, but in my personal opinion, it's easier if you go to your control panel and choose the customize tab. From there, choose the categories link. You can create categories and then upload pictures to galleries in those categories. For example; if you vacation a lot and you create a category 'vacations' then you can upload some pictures to a gallery called 'puerto rico' and tell it to go under the category 'vacations'. But, if you don't vacation a lot, then you don't have to have a category called 'vacations', you can just have a gallery called 'Puerto Rico vacation'. Does that make sense??

To get a slideshow, you would create a gallery (you can call it slideshow) and then choose for it not to be public, so you can manipulate it when you are logged in, but no one else can see it when they go to your site. Then, when you create a navbar, you can link the tab that says 'home' to the gallery that you created called 'slideshow'.

when someone refers to a post #, they are referring to reply that was posted earlier. On the upper right hand side of every reply is a number.

I hope I've helped somewhat and not confused you even more!

[gundog]

welcome to smugmug!! I'm a newbie too, just trying to figure this thing out and scared and confused by HTML. I have some pointers that may or may not help you. I know that the guys on here are extremely helpful, but sometimes when they talk in 'code' it's like they are talking in French and when asked a question, they just keep talking in French...and I don't speak French!!!

So, I guess for your question about galleries or categories first; you can do both, but in my personal opinion, it's easier if you go to your control panel and choose the customize tab. From there, choose the categories link. You can create categories and then upload pictures to galleries in those categories. For example; if you vacation a lot and you create a category 'vacations' then you can upload some pictures to a gallery called 'puerto rico' and tell it to go under the category 'vacations'. But, if you don't vacation a lot, then you don't have to have a category called 'vacations', you can just have a gallery called 'Puerto Rico vacation'. Does that make sense??

To get a slideshow, you would create a gallery (you can call it slideshow) and then choose for it not to be public, so you can manipulate it when you are logged in, but no one else can see it when they go to your site. Then, when you create a navbar, you can link the tab that says 'home' to the gallery that you created called 'slideshow'.

when someone refers to a post #, they are referring to reply that was posted earlier. On the upper right hand side of every reply is a number.

I hope I've helped somewhat and not confused you even more!

Thanks - yes that helps. The term 'Gallery' intuitively to me means pictures but here it means container or even placeholder. Where I had struggled before was creating lots of galleries not realizing the importance around organizing them through categories and sub categories early on.