• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization Custom Navbar question...

Need some help with your New SmugMug Site?

Dgrin Challenges

They're back! Our latest series of Dgrin Challenges, the OOYCZ Challenges (Out of Your Comfort Zone), is a series of challenges to help you improve your photography by stepping out of your comfort zone and trying something new. Our challenge leader says "Consider it like a photography class with no diplomas.". Get started with OOYCZ by reading the Challenge Guide.

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

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Old Jun-06-2012, 07:13 PM
#1
arhoads is offline arhoads OP
Big grins
Custom Navbar question...
Hey all!

I've decided to knock down my site and build it up again from scratch and I seem to have forgotten how to do something. I've been scouring the DGrin threads and can't quite seem to find the specific answer. Can someone point me to the proper thread?

I have a custom banner, loaded from a graphic. I want to use a custom navbar (that matches the font of the banner), also from a graphic I made but can't quite seem to find the proper code. I know how to chart out the navbar coordinates and all that fun stuff (a skill I acquired because of SmugMug) but this has been puzzling me now for about two hours.

Any help would be much appreciated.

Here's my site:

www.hathaphoto.com

Thanks so much,
Andrew
Old Jun-07-2012, 05:00 AM
#2
arhoads is offline arhoads OP
Big grins
To be clear, I am looking for the code that makes my navbar image appear on my site. I can do the rest, I just can't quite seem to find that info anywhere.
Old Jun-07-2012, 02:42 PM
#3
Smug Eric is offline Smug Eric
Smug Hero
Smug Eric's Avatar
For that you would need to manually add the code for your nav bar. The Easy Customizer doesn't have that ability to use an image for those links. There is a tutorial here on how to create the nav bar:

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

And if you have images then where you put the title for your nav bar button you would instead add an <img src= style link. This page explains now those need to get set:

http://www.w3schools.com/html/html_images.asp
__________________
Eric
Support Hero and Customeister
http://www.smugmug.com/help
Old Jun-07-2012, 03:00 PM
#4
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by arhoads View Post
To be clear, I am looking for the code that makes my navbar image appear on my site. I can do the rest, I just can't quite seem to find that info anywhere.
Here's some generic code, see if you can adapt this.

html
Code:
<ul id="myNav">
    <li id="panel1b"><a href="link"></a></li>
    <li id="panel2b"><a href="link"></a></li>
    <li id="panel3b"><a href="link"></a></li>
    <li id="panel4b"><a href="link"></a></li>
</ul>
CSS
Code:
#myNav {
    width: 750px; height: 75px;
    background: url(image link);
    margin: 0px auto; padding: 0;
    position: relative;}
  #myNav li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;}
  #myNav li, #myNav a {
    height: 75px; display: block;}

  #panel1b {left: 35px; width: 135px;}
  #panel2b {left: 195px; width: 165px;}
  #panel3b {left: 405px; width: 115px;}
  #panel4b {left: 550px; width: 150px;}

#panel1b a:hover {
    background: transparent url(image link)
   -35px -75px no-repeat;}
  #panel2b a:hover {
    background: transparent url(image linkpg)
    -195px -75px no-repeat;}
  #panel3b a:hover {
    background: transparent url(image link)
    -405px -75px no-repeat;}
  #panel4b a:hover {
    background: transparent url(image link)
    -550px -75px no-repeat;}
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Tell The World!  
Tags
custom navbar graphic
Similar Threads Thread Starter Forum Replies Last Post
Brand New to all this - I have no clue where to start HELP! TheBradford Legacy SmugMug Customization 42 May-29-2012 10:44 AM
custom navbar dropdown (pop up?) dondada Legacy SmugMug Customization 20 Apr-24-2012 01:00 PM
Custom navbar help! jtboldt Legacy SmugMug Customization 4 Jan-14-2012 05:28 AM
navbar question meaganleigh Legacy SmugMug Customization 3 Jul-28-2011 09:14 AM
Custom HTML and Gallery Question CapturedCharms Legacy SmugMug Customization 15 Nov-06-2010 08:45 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