PDA

View Full Version : Creating a NAVigation bar for Dummies :)

Behind the scenes helper
Dec-16-2009, 06:41 AM
This is SIMPLE – NO FRILLS – NO FANCY FONTS – NO PICTURES – TEXT ONLY
Being a non-geek / non-html person (but I do envy some of you J) - Calling this a labor of love – is – well – something I want to share after spending way too many hours trying to use the tools some very well intentioned people have tried before me – so thank you to those who have led the way and hoping someone will take this even further
Here we go…. I am making some small leaps of faith that you are sort of comfortable in this GREAT site and will be able to find the reference points I am directing you to.
Please understand there are many other variations – but this seems to have worked for me --
Before worrying about the actual NAVigation bar –
Take the time to figure out what you want to see on your NAVigation bar:
(don’t fret over it – once you get the idea – you will be unstoppable J – so let’s pick 3 headings:
a. About Me
b. Ordering Information
c. Test
Now go out to Word (or whatever else you use to create documents) and create what you want to say that corresponds to the Headings you are about to create.
You can spell check – etc –
Do NOT get carried away with fonts and colors because they will NOT work – just concentrate on the spacing so someone else can read it comfortably

Now are you ready for this adventureJ
Tools
Go To Control Panel
Click on the TAB: Customize
Click on: Categories
Create your own category: (I have used NAV Bar – but use whatever works for you)
Now click on Add Photos
Create: New Gallery
Title: Type one of the Headings you had decided you want on your NAVigation bar and click Create
Category: Drop down to NAV Bar (or whatever other Category you had created)
Privacy: - CHANGE to UNLISTED
And DO NOT forget to SAVE
You will be asked if you want to upload photos – for now and simplicity – enter as: Done
(you can play with this later J)

Click on the Settings (oval will appear)
Now remember that word document you have created J
Extras:
Description:
Cut and Paste whatever you created in Word (or similar tools)
If and when you want to change-edit-redo – etc – again – go out to Word to edit/re-create and then cut and paste

Look & Feel
Theme: (you can experiment later – BUT – each Page CAN have its own theme – have fun J
Gallery Style: drop down and CHANGE to: Journal

Security & Privacy
Privacy: should already be Unlisted (but if it is not then make it unlisted)

SAVE

Repeat this process for each Heading you want to appear on your NAVigation bar
When you think you are done creating – then it is time for the actual Navigation Bar J

Tools
Easy Customizer
Header
Navigation Bar: click on ADD a navigation Bar
You can experiment with where it looks best for your site
(below – above – to the left of – to the right of) – so just pick one and see what happens

Click on the Box – Navigation bar Builder
Name – should be what you want to appear on the NAVigation Bar
a. About Me
b. Ordering Information
c. Test

Now for your HOME Page (which is probably all of your “public” galleries – link this to HOMEPAGE
Which is already there
Click to URL
Under Galleries – you should find the NAVigation bar heading you have created – (Home – Ordering Information – About Me – Test – Etc) - click on the one that corresponds to this Name

Now simply -Experiment with:
Font
Color
Roll-over color
Text Decoration
Separator
Alignment

Once this is to your liking

Eventually CLICK – OK

Repeat these steps for all of your Headings (that you want on your Navigation Bar)

And Do NOT forget to PUBLISH

Created: December 12, 2009
Speakoff
Dec-16-2009, 11:28 AM
This was incredibly helpful. Thank you so much.

:clap
jfriend
Dec-16-2009, 05:11 PM
Sorry, but I can't read black text on gray background. No color for the text please and the forum software will automatically pick a text color that works with the selected background color.
denisegoldberg
Dec-17-2009, 06:54 AM
Jfriend, Sorry about that... I haven't changed my font color for my posts... help?
Your post was fine - it was the original poster's text that is unreadable. The background for posts that I am using is dark gray - and black text on dark gray is unreadable.

That often happens when text is written in a tool like Word and is then copied and pasted into the forum. If you ever write a post outside of dgrin for posting here, a plain vanilla text editor like notepad is fine.

--- Denise
Speakoff
Dec-17-2009, 08:02 AM
P.S. I was wondering if anyone could help me put my navbar below the slideshow on my homepage?

I'm http://elizabethdavisphoto.smugmug.com (http://elizabethdavisphoto.smugmug.com/)

Also, how do I make my navbar a drop-up once it's below the slideshow?

Any help would be so very appreciated. :) Thank you!:rolleyes
Allen
Dec-17-2009, 08:33 AM
P.S. I was wondering if anyone could help me put my navbar below the slideshow on my homepage?

I'm http://elizabethdavisphoto.smugmug.com (http://elizabethdavisphoto.smugmug.com/)

Also, how do I make my navbar a drop-up once it's below the slideshow?

Any help would be so very appreciated. :) Thank you!:rolleyes Lets start with using your current nav and placing at the bottom of
homepage only. Remove the nav in ECZ, you can't customize it there.

Add this to your header in "advanced site-wide customization".

<div class="navTop">
<ul class="customNav">
<li><a href="/People">people</a></li>
<li>&nbsp;•&nbsp;</li>
<li><a href="/places">places</a></li>
<li>&nbsp;•&nbsp;</li>
<li><a href="/things">things</a></li>
<li>&nbsp;•&nbsp;</li>
<li><a href="/NAVbar/bio/10669249_2UN7D">bio</a></li>
<li>&nbsp;•&nbsp;</li>
<li><a href="/NAVbar/contact/10669255_a7g5C">contact</a></li>
</ul>
</div>
Add this to your footer in "advanced site-wide customization".

<div class="navBottom">
<ul class="customNav">
<li><a href="/People">people</a></li>
<li>&nbsp;•&nbsp;</li>
<li><a href="/places">places</a></li>
<li>&nbsp;•&nbsp;</li>
<li><a href="/things">things</a></li>
<li>&nbsp;•&nbsp;</li>
<li><a href="/NAVbar/bio/10669249_2UN7D">bio</a></li>
<li>&nbsp;•&nbsp;</li>
<li><a href="/NAVbar/contact/10669255_a7g5C">contact</a></li>
</ul>
</div>
Add this to your CSS in "advanced site-wide customization".

.navBottom, .navTop { text-align: center; }
.customNav { font-family: georgia !important; font-size: 18px; color: #212121 !important; list-style-type: none; padding: 0; margin: 0; }
.customNav li{ display: inline; }
.customNav li a, #customNav li a:active, #customNav li a:visited, #customNav li a:link { font-family: georgia !important; font-size: 18px; color: #212121 !important; text-decoration: none !important; }
.customNav li a:hover { font-family: georgia !important; font-size: 18px; color: #017C80 !important; text-decoration: none !important; }

.navBottom {display: none;}
.homepage .navBottom {display: block;}
.homepage .navTop {display: none;}
To get drops ... and/or ups :D will involve much more work.
Speakoff
Dec-17-2009, 10:14 AM
Allen, you're brilliant. :barb (http://elizabethdavisphoto.smugmug.com/)Thank you. I spent (an embarrassing amount of) hours trying to figure out how to do that.


http://elizabethdavisphoto.smugmug.com/ (http://elizabethdavisphoto.smugmug.com/)
Allen
Dec-21-2009, 08:04 AM
How do I put the custom navbar on the bottom (below the slideshow) on all my pages?
Please don't post same question in two threads, see other thread.
http://www.dgrin.com/showthread.php?t=48349&page=107
Speakoff
Dec-21-2009, 08:14 AM
Sorry about that, Allen.