Custom Buttons for Nav Bar

navaldesign · #1 02-01-2006, 11:46 PM

Hi everybody,

I'm honored to start this new section on the Forum. I think that all of us have had problems sometimes in acheiving something that others have already found out how to do.

So the thought has been to create a section in the Forum where everyone can post anything that in his opinion might help others. It can be a Tip, a Trick, a Script, anything to help move things over. Having everything toghether, without the need to go through the entire forum searching.

Please share your experience with others. You will also get ideas from this
section of the forum

As for starters, here comes a Tip on

How to create or modify Nav Bar buttons to better suit the style of your site.

In some cases, ready made buttons just don't suit our needs or our site style. Someone has tricky-solved the problem by using an image as a button, that is linking the image to the page url. However this has an inconvenient: You have to either embbed the text to your image, so you have to create a lot of different button images, one for every link, or you have to put the button text over your image, which lets you with a"dead" area over the button, that is an area where the link dosn't work.

But it is really easy to create a button image that you can save in the BV library, so you can always use the same button for your Nav Bar and change directly the text content, style and size.
These are the steps you have to follow:

1. Create your button image, as you like it. You will need a graphics program to do that: Photoshop, Corel, Paint or other. In this example I will used a ready button image found at http://www.sleepybumblebee.girlonthehill.co.uk/ by Girl On The Hill, a member of our forum.
I'm using it because I liked it very much. These are the images:

for the main button image

for the mouseover image

Of course you may create any other button image, or even use a picture.

It is important that the height / lenght ratio of your image is suitable for your site needs. It is NOT important to have it already in the final dimensions. You can use PIXResizer to resize it afterwards

2. Save the images with the name you want, f.e. as button.jpg and button_over.jpg. You can also use any other image format supported by BV

3. At this point, if it is required, resize your images to their final size. You can use the Voda PIXResizer, a very friendly, 2 minutes to learn program from Voda. For those who never heard about it, it is here:
http://www.vodahost.com/pix.htm
Usually lenght is 120 - 140 pixels, height is 20 - 40 pixels.

4. Save the images in the BV button library folder: it usually is C:\programs\BlueVoda Website Builder\navbar.

You are done! You can use the BV Nav bar and going in Style, choose your new button images for normal and mouseover. One more tip: if you save them in the library under the names of 0_button.jpg and 0_button_over.jpg, they will appear first in the list of available buttons.

The same tip can also be used to simply resize Nav bars. If you like certain buttons but they are too small or too big for your pages, go directly to step 3. Load and resize the images of the buttons you have chosen from the BV library, and go the rest of the steps down.

Thanks to everybody, and please, even if this section is now on the air, we still want your opinion, your feedback. Please vote on the pol at:

http://www.vodahost.com/vodatalk/wis...html#post17444

beegud2 · #2 05-26-2006, 07:53 PM

Hi Naval,

This is a great bit of info. I can't wait to try it and create my own nav bars. And thanks to amanda for pointing me in your direction. Thanks again.

Bzzz

luisalirio · #3 06-03-2006, 09:05 PM

Excellent only 5 minutes after amanda led me here and i've already created my own buttons for my nav bar. I love the support here at Voda Host. Thanks again.

Dream Lady · #4 06-05-2006, 02:25 AM

Naval: I'm glad I found this thread. You explained this process very well, even I could understand! I assume it is ok for us to take the existing buttons from the BV Button Library folder and re-size them in pixresizer? There are already some great buttons, just need a little more width and that worked great for me. Thanks again.

Girlonthehill · #5 06-05-2006, 02:28 AM

Quote:

Originally Posted by Floor Lady

Naval: I'm glad I found this thread. You explained this process very well, even I could understand! I assume it is ok for us to take the existing buttons from the BV Button Library folder and re-size them in pixresizer? There are already some great buttons, just need a little more width and that worked great for me. Thanks again.

Go for it Cindy, I don't think they mind you re-sizing them.

Dream Lady · #6 06-05-2006, 02:57 AM

Thx Amanda! Been playing with them all afternoon. having way to much fun..lol

sandysewin · #7 06-07-2006, 11:39 PM

Ok, this is close to what I want to do. Many thanks to those who asked/answered the question before I even thought of it!

What I want to do involves having each button in my nav bar slightly different. I want the left edge to be flush, as usual, but the right edge will follow a curved shape.

I know I can make these in Photoshop, no problem. But will I have to put them each on the page individually? Or is there a way to do them all in a group?

Thanks,

Sandy

Girlonthehill · #8 06-07-2006, 11:48 PM

Quote:

Originally Posted by sandysewin

Ok, this is close to what I want to do. Many thanks to those who asked/answered the question before I even thought of it!

What I want to do involves having each button in my nav bar slightly different. I want the left edge to be flush, as usual, but the right edge will follow a curved shape.

I know I can make these in Photoshop, no problem. But will I have to put them each on the page individually? Or is there a way to do them all in a group?

Thanks,

Sandy

If you want each to be a different shape, Sandy, you will have to add them as individual buttons. Alternatively, I've not tried this though, explore using an image map. Make your set of buttons into an image and use hotspots to link to your pages. It may work.

Girlonthehill · #9 06-08-2006, 12:22 AM

Quote:

Originally Posted by Girlonthehill

If you want each to be a different shape, Sandy, you will have to add them as individual buttons. Alternatively, I've not tried this though, explore using an image map. Make your set of buttons into an image and use hotspots to link to your pages. It may work.

I've just made one using an image map and hotspots and it works perfectly! I've uploaded it for you to have a look.

http://www.girlonthehill.co.uk/help2.html

It's only a rough idea and all three links go to my home page - but it shows that it works!

sandysewin · #10 06-08-2006, 02:42 AM

Very, very cool!! Thank you for taking the time to do that. I've just about got my buttons made, and was dreading trying to line them all up individually.

Sandy

sandysewin · #11 06-09-2006, 09:58 PM

Well, I've gotten THAT done. Sheesh, took the better part of 2 days. I wanted to have some sort of mouse-over/rollover change, so I ended up making each button individually. I also duplicated each button and changed the coloring to make the mouse-over buttons. I used the rollover tool to put them all on my website. Seems to work fine, (the real test will be when I publish it.)

It took me a while to figure out the sequence of how to do the buttons in Photoshop. I scribbled it out, and then had to type it so I could read it, lol.

So, if you want to know how I did it I can paste the directions in here. You'll have to know how to use layers in Photoshop. There are some great tutorials on the web if you need further help.

Sandy

Girlonthehill · #12 06-09-2006, 11:33 PM

Quote:

Originally Posted by sandysewin

Well, I've gotten THAT done. Sheesh, took the better part of 2 days. I wanted to have some sort of mouse-over/rollover change, so I ended up making each button individually. I also duplicated each button and changed the coloring to make the mouse-over buttons. I used the rollover tool to put them all on my website. Seems to work fine, (the real test will be when I publish it.)

It took me a while to figure out the sequence of how to do the buttons in Photoshop. I scribbled it out, and then had to type it so I could read it, lol.

So, if you want to know how I did it I can paste the directions in here. You'll have to know how to use layers in Photoshop. There are some great tutorials on the web if you need further help.

Sandy

Sandy I think, if you wrote some easy to follow instructions and posted them in a new thread here, that would be GREATLY appreciated by many. Good idea!!

ilanit · #13 07-14-2006, 05:02 AM

hello to everybody
1.If I want to write on the button two lines, it possible?
2.I create the navigation bar, I want that this navigation will appear in each page, I need to build this again in each page or it will appear automatically because of the links.
3.If I want that click on one of the navigation bar will brings the visitor to the middle of the page, how I can do this?
THANKS

navaldesign · #14 07-14-2006, 05:40 AM

1. No, at least with the standard BV menu bars. You will need to create independent buttons in a graphics program and arrange them in a menubar like layout in your page.
2. Yes, using an I-frame. Place an I frame in your pages, where you want the menubar to appear, then create a single page with the menubar. This page will be recalled by all the other pages. Look at: http://www.vodahost.com/vodatalk/blu...r-i-frame.html
3. You will need to use a bookmark in your pages, and the links will have to be associated to that bookmark. Look at: www.navaldesign.info/Tips/bookmark1.html

Vasili · #15 07-14-2006, 05:45 AM

Ευχαριστώ!

PS! Please look at "Forums" > "Can Sub-Domain Forum Be Protected AND Rankable?"

lovethatbluegrassmusic · #16 08-08-2006, 03:07 PM

I was wonderin' how to get new buttons into the navbar lib.
Thanks! You read my feable mind!