• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support SmugMug Customization How To: Create a Navbar and Custom Headers

FAQtoid

Ever wanted to create an Avatar? Creating an Avatar!

Searching Dgrin with Google Searching with Google

Dgrin Challenges

Congratulations to the Winner of DSS #128 (Sunrise or Sunset), ShootingStar.

The next Dgrin Challenge DSS #129 (Silhouette Revisited ) is open for entries through May 27th, 2013 at 8:00pm PDT.

As always, we look forward to your participation but please do take a moment to read through the rules before posting your entry.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Need some help with Accessories?

Tutorials

Ever find yourself wondering just how someone managed to create an image using different effects?

Here are three simple tutorials we hope will encourage you to try something new.

The Hot Seat

A lifelong interest in landscape photography has led Eyal Oren to make a study of his adopted hometown of Marblehead, MA. As you can see, his dedication is paying off!

Africa!

Dgrinners Harryb, Pathfinder, and others joined Andy Williams and Marc Muench on Safari in East Africa recently. Here are some awesome threads to check out!

 
Thread Tools Display Modes
Page 2  of  35
1 2 3 4 5 6 12 Last »
Old Jan-10-2007, 02:43 PM
#21
Manticore is offline Manticore
Big grins
Quote:
Originally Posted by Allen
???? I see it right there in your bio below the most popular photos box.

Or did you fix something after posting?
Al
Thanks Andy. RichW and IVAR helped me out.
Old Jan-16-2007, 04:51 PM
#22
keithmtx is offline keithmtx
Beginner grinner
Navbar tutorial
Thanks for sharing your knowledge.
Keith


Let me know if you find any problems with it, or if i go too fast at some point. Have fun (customizing).[/QUOTE]

Last edited by keithmtx; Jan-17-2007 at 07:06 AM.
Old Feb-28-2007, 06:47 PM
#23
gimper4god is offline gimper4god
Big grins
how to make a banner
Hi....well I am about to start all this....and this is silly....buy what software is the easiest one to do a banner?
Old Mar-01-2007, 04:10 AM
#24
S&SPhoto is offline S&SPhoto
Major grins
S&SPhoto's Avatar
Quote:
Originally Posted by gimper4god
Hi....well I am about to start all this....and this is silly....buy what software is the easiest one to do a banner?
Welcome to Dgrin and SmugMug. I used gimp, but I believe you could just as easily do this in Photoshop.

Samir
__________________
ssp.smugmug.com
Old Mar-01-2007, 04:25 AM
#25
Andy is offline Andy
panasonikon
Andy's Avatar
Quote:
Originally Posted by gimper4god
Hi....well I am about to start all this....and this is silly....buy what software is the easiest one to do a banner?
welcome! As a photographer, you probably have an image editing program like Photoshop or something- if not, follow S&S's advice just above.

Holler in our Finishing School if you need help to actually make the art/text/banner http://www.dgrin.com/forumdisplay.php?f=10
__________________
Andy
Moon River PhotographyWorkshopsGoogle+FacebookTwitter
Old Mar-30-2007, 06:24 PM
#26
girouardphotography is offline girouardphotography
Big grins
girouardphotography's Avatar
Huh
I'm lost can some one give me some insight as to what I did to my site. I thought I did the slideshow right, this time. Made it further than before. Now the space for the slide show is there but no pictures, and the galleries link in the nav bar takes me nowhere. Please Help
__________________
Girouard Photography


Old Mar-31-2007, 04:22 AM
#27
Andy is offline Andy
panasonikon
Andy's Avatar
Quote:
Originally Posted by girouardphotography
I'm lost can some one give me some insight as to what I did to my site. I thought I did the slideshow right, this time. Made it further than before. Now the space for the slide show is there but no pictures, and the galleries link in the nav bar takes me nowhere. Please Help
You are fixed... you listed a Category instead of a galley as the source file. I fixed it for you.



You also had JS in your CSS. I moved it for you to the Javascript section. Finally, don't know where you wan this, but it does NOT belong in CSS:

<A HREF="mailto:randy@girouardphotography.com">Contac t ME</A>
__________________
Andy
Moon River PhotographyWorkshopsGoogle+FacebookTwitter
Old Mar-31-2007, 06:47 AM
#28
girouardphotography is offline girouardphotography
Big grins
girouardphotography's Avatar

THNAK YOU
you are the man
__________________
Girouard Photography


Old May-09-2007, 07:16 PM
#29
Diff is offline Diff
~ Diff ~
Diff's Avatar
Navbar - You have to tell it!
"How does the navbar know where it has to take you? You have to tell it!"

"Add the location of the gallery you wish to link."

Okay, I'm just starting out & I'm stuck with the navbar tutorial. I don't have a clue how to "add the location of the gallery you wish to link."

Right now, my page (diffphotos.smugmug.com) contains everything on 1 page. The galleries are right there in front of me.

~ Thanks ~
__________________
~ Diff ~

Old May-09-2007, 07:40 PM
#30
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by Diff
"How does the navbar know where it has to take you? You have to tell it!"

"Add the location of the gallery you wish to link."

Okay, I'm just starting out & I'm stuck with the navbar tutorial. I don't have a clue how to "add the location of the gallery you wish to link."

Right now, my page (diffphotos.smugmug.com) contains everything on 1 page. The galleries are right there in front of me.

~ Thanks ~
If you have a power or pro site you can customize just about anything. A lot of people are adding a slideshow to their homepage and applying the "galleries" hack to show the galleries on another page. Some also add a navbar to browse their galleries.

This is the link to your Tri-Cities WA. gallery.

http://diffphotos.smugmug.com/gallery/2773767

You would insert it as shown below in bold.

This is the sample from this tutor.

<div id="navcontainer">
<ul>
<li><a href="http://nickname.smugmug.com">Home</a></li>
<li><a href="http://nickname.smugmug.com">About Me</a></li>
<li><a href="http://nickname.smugmug.com">Galleries</a></li>
<li><a href="http://diffphotos.smugmug.com/gallery/2773767">Tri-Cities WA.</a></li>
<li><a href="http://nickname.smugmug.com">Information</a></li>
<li><a href="http://nickname.smugmug.com">Guestbook</a></li>
</ul>
</div>

You sound fairly new and this stuff can be intimating, we've all been there.
But, never fear, there are many here to help. Best way is create a new
thread in the customization forum that would be all yours. Then, one step at
a time, get all the things you want done in hopefully no time.

Probably the first question asked is what do you want your site to look like.
There are many examples so providing a link will greatly help. Or create a
mockup of a page and post the image.

Looking forward to helping.
Old May-09-2007, 09:49 PM
#31
Diff is offline Diff
~ Diff ~
Diff's Avatar
Accolades!!
Yes! A kind, helpful voice, er...Reply!

Okay, so inside the "customiziation" section, each time I have a topic specific question, I should begin a new thread. Got it.

RE: <li><a href="http://diffphotos.smugmug.com/gallery/2773767">Tri-Cities WA.</a></li>

Here's where I'm lost. I have numerous galleries. What is done in regards to each of them? Do I enter each gallery as shown above? I'm thinking yes.

Okay, once we get this issue resolved, I'll start new threads.

~ Al - Much Thanks ~
__________________
~ Diff ~

Old May-10-2007, 11:20 AM
#32
OdiliaB is offline OdiliaB
Rookie
OdiliaB's Avatar
bringing nav down below banner
Quote:
Originally Posted by Andy
Place the navbar html in your header html section, underneath the banner code. We'll help you style it.
I tried this but it's still not working for me????
Old May-10-2007, 01:06 PM
#33
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by OdiliaB
I tried this but it's still not working for me????
Add a margin-bottom to space the nav down form the banner.

#my_banner {
display: none;
width: 750px;
height: 200px;
margin: 0 auto;
margin-bottom:20px;
background: url(http://IceBerghPhotography.smugmug.c...50792676-O.jpg) no-repeat;
}
Old May-22-2007, 08:30 AM
#34
BrendaO is offline BrendaO
BrendaO
Help with navigation bar & slideshow
OK, I finally got my banner, navigation bar and slideshow. I need some help with the following:
1. How do I remove all the Galleries under the slideshow?
2. How do I move the navigation bar up closer to the banner?
3. How do I center all the photos in the slideshow?
4. How do I add the bio on a separate page i.e."About Me"?
5. How do I get the flyouts?
I appreciate your help!

BrendaO
http://www.creative-shots.com
Old May-22-2007, 08:42 AM
#35
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by BrendaO
OK, I finally got my banner, navigation bar and slideshow. I need some help with the following:
1. How do I remove all the Galleries under the slideshow?
2. How do I move the navigation bar up closer to the banner?
3. How do I center all the photos in the slideshow?
4. How do I add the bio on a separate page i.e."About Me"?
5. How do I get the flyouts?
I appreciate your help!

BrendaO
http://www.creative-shots.com
Go to this tutor and scroll down to the "The Galleries Page I, II,....". It will
show you how to create the virtual homepage called "galleries". You'll then
have two homepages. then with CSS show the things that are homepage
stuff on either page.

Center show add to CSS

#bioBox {text-align:center;}


The actual banner image height is 117px. Easiest is to play with the height
in bold below to space the nav below.

#my_banner {
display: none;
width: 750px;
height: 130px;
margin: 0 auto;
background: url(http://www.creative-shots.com/photos/155105004-L.jpg) no-repeat;
}


To create a separate gallery for you "about me" see this FAQ #41.

Holler back if you have any questions.
Old May-22-2007, 10:21 AM
#36
BrendaO is offline BrendaO
BrendaO
Everything worked except: To create a separate gallery for you "about me" see this FAQ #41.


I'm not understanding this part:

/* html only page for gallery XXXXXX */
.gallery_XXXXXX .nophotos {
display: none;
}
.gallery_XXXXXX .pageNav {
display: none;
}

I entered the number of the gallery. Now my slideshow doesn't work.
Old May-22-2007, 11:23 AM
#37
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by BrendaO
Everything worked except: To create a separate gallery for you "about me" see this FAQ #41.


I'm not understanding this part:

/* html only page for gallery XXXXXX */
.gallery_XXXXXX .nophotos {
display: none;
}
.gallery_XXXXXX .pageNav {
display: none;
}

I entered the number of the gallery. Now my slideshow doesn't work.
Those will clean up the "about me" gallery page for un-needed items.
You have a link to the new "about me" gallery?
Old May-22-2007, 11:46 AM
#38
BrendaO is offline BrendaO
BrendaO
Quote:
Originally Posted by Allen
Those will clean up the "about me" gallery page for un-needed items.
You have a link to the new "about me" gallery?
You are good... you ask the right questions and get me thinking. I now have it linked properly but I want the "text" html to the right of the photo not just type on the top.

I read the thread on inserting "mail me" but am unsure what I should do. It's hard for me as a beginner to read through and pull out JUST the information that I need. It's hard to follow sometimes.
Old May-22-2007, 12:15 PM
#39
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by BrendaO
You are good... you ask the right questions and get me thinking. I now have it linked properly but I want the "text" html to the right of the photo not just type on the top.

I read the thread on inserting "mail me" but am unsure what I should do. It's hard for me as a beginner to read through and pull out JUST the information that I need. It's hard to follow sometimes.
First, under gallery customization check custom for appearance so your CSS
will show.

Replace what you have in the gallery description with this.
Code:
<html>
<div id="myImg">
<img src="/photos/155258420-S.jpg" width="400" height="268">
</div>
<div id="myText">
<p>
Welcome to Creative Shots.
</p>
<p>
Send me an email <a href="mailto:brenda@creative-shots.com">here</a>  
</p>
<p>
UNDER CONSTRUCTION……. 
</p>
<p>
Guarantee
</p>
<p>
If you are unhappy with your prints or gifts, smugmug will reprint or refund your order, whichever you prefer.
</p>
<p>
Simply send email to <a href="mailto:help@smugmug.com">Smugmug Help</a> within 30 days of receiving your order.</p>
</p>
</div>
</html>
Put this in your CSS.
Code:
.gallery_2888607 #myImg {
   position: relative;
   height: 268px;
   width:  400px;
   margin-top:  40px;
   margin-left: 140px;
   border:4px double #cccccc;
}

.gallery_2888607 #myText {
   position: relative;
   font-weight: bold;
   width:  280px;
   margin-top:   -260px;
   margin-left:   570px;
}

#albumDescription {height: 380px;}

 /* some of these may not be needed */
.gallery_2888607 .nophotos {display: none;}
.gallery_2888607 #breadcrumb {display: none;}
.gallery_2888607 #photos {display:none;}
.gallery_2888607 .play_slideshow {display: none;}
.gallery_2888607 #albumNav_top {display: none;}
.gallery_2888607 #albumNav_bottom {display: none;}
Old May-22-2007, 02:23 PM
#40
BrendaO is offline BrendaO
BrendaO
Quote:
Originally Posted by Allen
First, under gallery customization check custom for appearance so your CSS
will show.

Replace what you have in the gallery description with this.
Code:
<html>
<div id="myImg">
<img src="/photos/155258420-S.jpg" width="400" height="268">
</div>
<div id="myText">
<p>
Welcome to Creative Shots.
</p>
<p>
Send me an email <a href="mailto:brenda@creative-shots.com">here</a>  
</p>
<p>
UNDER CONSTRUCTION……. 
</p>
<p>
Guarantee
</p>
<p>
If you are unhappy with your prints or gifts, smugmug will reprint or refund your order, whichever you prefer.
</p>
<p>
Simply send email to <a href="mailto:help@smugmug.com">Smugmug Help</a> within 30 days of receiving your order.</p>
</p>
</div>
</html>
Put this in your CSS.
Code:
.gallery_2888607 #myImg {
   position: relative;
   height: 268px;
   width:  400px;
   margin-top:  40px;
   margin-left: 140px;
   border:4px double #cccccc;
}
 
.gallery_2888607 #myText {
   position: relative;
   font-weight: bold;
   width:  280px;
   margin-top:   -260px;
   margin-left:   570px;
}
 
#albumDescription {height: 380px;}
 
 /* some of these may not be needed */
.gallery_2888607 .nophotos {display: none;}
.gallery_2888607 #breadcrumb {display: none;}
.gallery_2888607 #photos {display:none;}
.gallery_2888607 .play_slideshow {display: none;}
.gallery_2888607 #albumNav_top {display: none;}
.gallery_2888607 #albumNav_bottom {display: none;}
This is getting fun. How about removing the line between the navigation bar and the slideshow on my home page?

I really liked the Customization - FAQ sheet. It is very user friendly.

How do you add frames to the slideshow? Am I asking too many questions? I am just so excited that my site is looking better all the time. I appreciate all your help!
Page 2  of  35
1 2 3 4 5 6 12 Last »
Tell The World!  
Similar Threads Thread Starter Forum Replies Last Post
Navbar that shows which link is the current page jfriend SmugMug Customization 485 May-02-2013 09:19 PM
created custom navbar, now share/style buttons are messed up yossarian123 SmugMug Customization 1 Jan-26-2010 10:40 AM
Adding Custom Navbar rmbrar SmugMug Customization 2 Dec-20-2009 03:15 AM
Custom Navbar countrifiedphotography SmugMug Customization 5 Feb-26-2009 06:08 AM
"Gallery" in Custom Navbar Points Back to Homepage nicegrizz SmugMug Support 2 Oct-20-2008 06:53 PM


Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump