Lurk all you'd like, but why not register and post some pics? Registering also makes it easier to find the good stuff. Need help?

Go Back   Digital Grin Photography Forum > Support > SmugMug Customization
Dgrinner
Password
Register FAQ Shooters Calendar Reviews Tutorials Gallery Books Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old Oct-05-2006, 07:41 AM   #1
ivar
Here for the crosswords
 
ivar's Avatar
 
Join Date: Nov 2005
Location: the Netherlands
Posts: 7,965
Lickout New Tutorials

Allright guys and girls, have at it, two new tutorials.

1) How to create a navbar
2) How to make (multiple) custom headers on your homepage


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


moderator: People & Go Figure
usefulness: how to do most anything on Dgrin - great tutorials - gear reviews - book reviews
me: www.ivarborst.nl - blog - smugmug


Kinkajou: "go comment on something and spread the love!"
ivar is offline   Reply With Quote
Old Oct-05-2006, 02:06 PM   #2
DavidTO
1/f
 
DavidTO's Avatar
 
Join Date: May 2004
Location: Thousand Oaks, CA
Posts: 16,042


They've been added to our tutorial index, in the How-To link in the navbar at the top of dgrin.

Great job, Ivar!

DavidTO is online now   Reply With Quote
Old Oct-07-2006, 05:22 PM   #3
SteveM
SmugMug Pro Concierge
 
SteveM's Avatar
 
Join Date: Jun 2006
Posts: 423
Quote:
Originally Posted by ivar
Allright guys and girls, have at it, two new tutorials.

1) How to create a navbar
2) How to make (multiple) custom headers on your homepage


Let me know if you find any problems with it, or if i go too fast at some point. Have fun (customizing).
Very nice, Ivar! I'm sure that'll cut down on the confusion for many many people!

P.S.: One typo in #2:
Code:
Copy the URL that shows last in the list. 

At the end you will see the last bit will say ...-L.gif, or ...-L.jpg, or ...-L.png

When pasting the link into the CSS code, change the 'L' to an 'O'.
__________________
Steve
SmugMug Support Hero
Image Specialist & Pro Concierge

-These tights itch.

http://www.downriverphotography.com
http://stevem01.smugmug.com
SteveM is offline   Reply With Quote
Old Oct-07-2006, 07:08 PM   #4
savannahga
Major grins
 
savannahga's Avatar
 
Join Date: Oct 2004
Posts: 198
Hi, I tried the Navbar but it doesn't have spaces between all the links,
just 3 spaces. I tried the cellspacing & spacing but nothing works.

__________________
GallerySavannah.com
savannahga is offline   Reply With Quote
Old Oct-08-2006, 12:14 PM   #5
justME
Justine
 
justME's Avatar
 
Join Date: Sep 2006
Posts: 207
thanks Ivar

Thank you Ivar. Good tutorial and easy to follow.

I'd like to know how do I place that navbar below my custom banner? I'm not sure I want that but would like to try it if possible.
T.Y.
http://justineolson.smugmug.com/
justME is offline   Reply With Quote
Old Oct-08-2006, 01:12 PM   #6
Andy
SmugMug COO & House Pro
 
Andy's Avatar
 
Join Date: Dec 2003
Location: New York City
Posts: 52,623
Quote:
Originally Posted by justME
Thank you Ivar. Good tutorial and easy to follow.

I'd like to know how do I place that navbar below my custom banner? I'm not sure I want that but would like to try it if possible.
T.Y.
http://justineolson.smugmug.com/
Place the navbar html in your header html section, underneath the banner code. We'll help you style it.
__________________
Andy

Moon River PhotographyTwitterFacebook
Andy is offline   Reply With Quote
Old Oct-08-2006, 05:08 PM   #7
justME
Justine
 
justME's Avatar
 
Join Date: Sep 2006
Posts: 207
moved it

Okay. Great I did it and it worked. Perfect.
Thanks yet again.
justME is offline   Reply With Quote
Old Oct-29-2006, 01:27 PM   #8
natedreger
Beginner grinner
 
Join Date: Oct 2006
Posts: 3
linking the banner

i've got my banners built, your tutorial was quite helpful thank you, but I now want the banner to link back to my main page. using the <div> method is there a way to do that?


Quote:
Originally Posted by ivar
Allright guys and girls, have at it, two new tutorials.

1) How to create a navbar
2) How to make (multiple) custom headers on your homepage


Let me know if you find any problems with it, or if i go too fast at some point. Have fun (customizing).
natedreger is offline   Reply With Quote
Old Oct-30-2006, 03:01 AM   #9
ramdisk
Major grins
 
ramdisk's Avatar
 
Join Date: Sep 2005
Posts: 152
ivar
you are the man! Thank you for all of your help................
__________________
Nikon D70
Nikkor 18-70mm
Nikkor 70-300mm

My Gallery

Ahh! The joy of not much of anything.............
ramdisk is offline   Reply With Quote
Old Nov-09-2006, 06:14 PM   #10
MSMoore
Beginner grinner
 
Join Date: Nov 2006
Location: Dallas, Tx
Posts: 6
Custom Header is Half Hidden

Howdy. Newbie here. Lots of nice tuts on this forum. Thank you!

Having a problem with custom header. After following the instructions for the custom header tut to the letter using a .png image 750px by 150px, then hitting the update button...then submit button to preview...the top portion of custom header is hidden by what appears to be the top part of the web page. Any help you could provide would be appreciated.

my smugmug page is: bothphoto.smugmug.com

Thank you

msmoore
MSMoore is offline   Reply With Quote
Old Nov-09-2006, 06:20 PM   #11
Allen
"tweak 'til it squeaks"
 
Allen's Avatar
 
Join Date: Aug 2004
Posts: 23,116
Quote:
Originally Posted by MSMoore
Howdy. Newbie here. Lots of nice tuts on this forum. Thank you!

Having a problem with custom header. After following the instructions for the custom header tut to the letter using a .png image 750px by 150px, then hitting the update button...then submit button to preview...the top portion of custom header is hidden by what appears to be the top part of the web page. Any help you could provide would be appreciated.

my smugmug page is: bothphoto.smugmug.com

Thank you

msmoore
Start with this.

div #extraDiv1 {display:none;}
or
.homepage div #extraDiv1 {display:none;}
Al
Allen is offline   Reply With Quote
Old Nov-09-2006, 06:22 PM   #12
Andy
SmugMug COO & House Pro
 
Andy's Avatar
 
Join Date: Dec 2003
Location: New York City
Posts: 52,623
Quote:
Originally Posted by Allen
Start with this.

div #extraDiv1 {display:none;}

Al
and this code, goes in your CSS box on your customization page.

welcome to Dgrin!
__________________
Andy

Moon River PhotographyTwitterFacebook
Andy is offline   Reply With Quote
Old Nov-09-2006, 07:08 PM   #13
MSMoore
Beginner grinner
 
Join Date: Nov 2006
Location: Dallas, Tx
Posts: 6
Thank you

Quote:
Originally Posted by Andy
and this code, goes in your CSS box on your customization page.

welcome to Dgrin!
Thanks Allen and Andy. I appreciate your time.

Your solution worked. Now I see the banner.

However, the banner is now crowding out the buttons just below it. How would I put some space between the banner and the buttons? I tried adding Allen's "spacing" code in the CSS box just below the custom banner code but guess that doesn't work.

After this question, I'll move future questions to a new post and spend a little more reading time in the forum. I've got a shoot Saturday at a high school soccer game where I'll be handing out business cards to some soccer moms. I'm trying to get a basic web page up cuz the soccer moms are gonna wanna look at my pictures

bothphoto.smugmug.com

msmoore
MSMoore is offline   Reply With Quote
Old Nov-09-2006, 07:25 PM   #14
Allen
"tweak 'til it squeaks"
 
Allen's Avatar
 
Join Date: Aug 2004
Posts: 23,116
Quote:
Originally Posted by MSMoore
Thanks Allen and Andy. I appreciate your time.

Your solution worked. Now I see the banner.

However, the banner is now crowding out the buttons just below it. How would I put some space between the banner and the buttons? I tried adding Allen's "spacing" code in the CSS box just below the custom banner code but guess that doesn't work.

After this question, I'll move future questions to a new post and spend a little more reading time in the forum. I've got a shoot Saturday at a high school soccer game where I'll be handing out business cards to some soccer moms. I'm trying to get a basic web page up cuz the soccer moms are gonna wanna look at my pictures

bothphoto.smugmug.com

msmoore
Tweak to suit.
Code:
#my_banner {
    display: none;
    width: 750px;
    height: 150px;
    margin: 10px auto 10px auto;  /* top right bottom left */
    background: url(http://BothPhoto.smugmug.com/photos/109215559-O.png) no-repeat;
}
AL
Allen is offline   Reply With Quote
Old Nov-10-2006, 05:39 AM   #15
MSMoore
Beginner grinner
 
Join Date: Nov 2006
Location: Dallas, Tx
Posts: 6
Quote:
Originally Posted by Allen
Tweak to suit.
Code:
#my_banner {
    display: none;
    width: 750px;
    height: 150px;
    margin: 10px auto 10px auto;  /* top right bottom left */
    background: url(http://BothPhoto.smugmug.com/photos/109215559-O.png) no-repeat;
}
AL
Upon further review, I didn't have the 2nd problem (I didn't have the buttons on the home page where I thought I did) but learned something helpful in the process. Thanks for your time, Allen. I have lots to learn.

msmoore
MSMoore is offline   Reply With Quote
Old Jan-04-2007, 04:39 PM   #16
EZRyder
Big grins
 
Join Date: Oct 2006
Location: Napa, CA
Posts: 61
Hate to bother, but...

I followed the tutorial and it works fine, but, I'd like to change the color - background and text - of the nav bar ONLY on my gallery pages. I have a custom (different than homepage and gallery index page) banner for my Gallery pages. I guess I need to have custom nav bars, too. How do I do that? I want them to be spread out and change the font and size and all that.

Thanks!!
EZRyder is offline   Reply With Quote
Old Jan-04-2007, 04:57 PM   #17
Allen
"tweak 'til it squeaks"
 
Allen's Avatar
 
Join Date: Aug 2004
Posts: 23,116
Quote:
Originally Posted by EZRyder
Hate to bother, but...

I followed the tutorial and it works fine, but, I'd like to change the color - background and text - of the nav bar ONLY on my gallery pages. I have a custom (different than homepage and gallery index page) banner for my Gallery pages. I guess I need to have custom nav bars, too. How do I do that? I want them to be spread out and change the font and size and all that.

Thanks!!
For any color changes, etc. see this site and look down thru the code. All the colors are labeled. Add what pieces you need, just change .menu to .navcontainer.

You now have this defined in your header. (minus the spaces)
< div id="navcontainer" >

Create more there.
< div id="navcontainer2" >
< li> ......
< /div>

< div id="navcontainer3" >
< li> ......
< /div>

Then you'll need to add to your CSS for each piece of code. This if all
menus have commen code.

#navcontainer,
#navcontainer2,
#navcontainer3
{
blab:blab;
... }

If the new menu containers have diff code, copy just that piece of code
and change the front end.

#navcontainer2
{
blab:blab;
... }

#navcontainer3
{
blab:blab;
... }

#navcontainer2,
#navcontainer3
{
blab:blab;
... }


Hope this helps, holler back as you go along and we'll help.
Al
Allen is offline   Reply With Quote
Old Jan-05-2007, 01:58 PM   #18
EZRyder
Big grins
 
Join Date: Oct 2006
Location: Napa, CA
Posts: 61
Big help here! But, at the end of the day, I decided to go with just the same banner and color/theme on all pages, so I just need to modify the one set of nav buttons - which is ugly enough to figure out.

I'm getting REAL close here, though. I have two more (small) issues that I'll need help with asap, and I just can't find the place I saw this, but it's here somewhere. I want to remove two things from my gallery pages:

1) The "< Prev 1 of 60 Next > " thingy - but I want to keep the page ones, of course.

2) The Name > Album text over the thumbnails.

My next big project will be fixing up the Gallery Index page, but that will likely have to wait, as it looks like it'll likely be a big job. Basically, I want it to look like Andy's.

Thanks!!!!!
EZRyder is offline   Reply With Quote
Old Jan-10-2007, 11:46 AM   #19
Manticore
Big grins
 
Join Date: Jan 2007
Posts: 88
Help with customization

I've followed the instructions on FAQ #90 - I want a Banner, a Navbar, a slideshow, no galleries on my homepage, and a separate galleries page, can do? - TUTORIAL

But I can't seem to get it to work. Obviously I'm missing something. My banner is ok, and the nav bar is ok, but the slideshow isn't showing up.

My page is justastateofmind.smugmug.com

I'm not sure where to check for errors and I'm going cross-eyed!

Thanks.
Manticore is offline   Reply With Quote
Old Jan-10-2007, 01:02 PM   #20
Allen
"tweak 'til it squeaks"
 
Allen's Avatar
 
Join Date: Aug 2004
Posts: 23,116
Quote:
Originally Posted by Manticore
I've followed the instructions on FAQ #90 - I want a Banner, a Navbar, a slideshow, no galleries on my homepage, and a separate galleries page, can do? - TUTORIAL

But I can't seem to get it to work. Obviously I'm missing something. My banner is ok, and the nav bar is ok, but the slideshow isn't showing up.

My page is justastateofmind.smugmug.com

I'm not sure where to check for errors and I'm going cross-eyed!

Thanks.
???? I see it right there in your bio below the most popular photos box.

Or did you fix something after posting?
Al
Allen is offline   Reply With Quote
Reply

Tell The World!

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


Times are GMT -8.   It's 09:16 AM.


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.