Custom Buttons for Nav Bar

navaldesign · #1 02-02-2006, 12:46 AM

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, 08: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, 10: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, 03: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, 03: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, 03:57 AM

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

sandysewin · #7 06-08-2006, 12:39 AM

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-08-2006, 12:48 AM

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, 01: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, 03: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, 10: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-10-2006, 12:33 AM

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, 06: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, 06: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, 06:45 AM

Ευχαριστώ!

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

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

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

Ramkumar · #17 08-23-2006, 07:09 PM

Hi Naval,

Thanks for the excellent info.

Is it possible to Bold, Italize or Underline text in Custom Buttons of Nav Bar. (I know Re-sizing is possible).

Thanks.

navaldesign · #18 08-24-2006, 09:58 AM

Once you have fixed the button image, the rest can be customized from thr Nav bar properties, Style. You can set Font, Color, Size, Style, and mouseover color.

Ramkumar · #19 08-24-2006, 04:44 PM

Thanks very much. I missed it somehow.

bigjayy · #20 02-01-2007, 03:43 PM

I really would love to create a proffesionally looking website with great onmouseover drop down navigation effect but I cannot seem to find the get-around with vodahost website builder.There is no option that would let me do that.A good example of the kind of style I am talking about is as in the following sites;

http://www.redtractorfarm.com/
http://www.thepottershouse.org/

How can I create my own on_mouse_over drop-down effect???????

bigjayy

navaldesign · #21 02-01-2007, 04:07 PM

These are the built in BV drop down menus. They have only customized colors. Have a look at

Sliding Menu Bars (Drop Down) - creating and editing

innaphog · #22 02-10-2007, 10:46 AM

Hello...Please help if you can

.I want to navigate around my site with text: <back next>
.I do not want this text "button" to appear blue or underlined
.I do understand that this is two blocks of text...not one
.So question is...how can I navigate with these two "text buttons" without using the hyperlink tool?
. My page has a background color (pumpkin). I just want the text to appear directly on the background NOT in some colored bar or button.
. Can this be done? Please help if you can.
Thanks Innaphog

CarbonTerry · #23 02-19-2007, 07:10 AM

You will have to use the hyperlink tool and then make your own "style"
This option appears when you select your text and click on the hyperlink tool. Play around with the options.
For this example I de-selected the "underline" option.
the "link" is black
the "visited link" is grey
the "active link" is green
and the "hover link" is blue
Of course, you can choose any color(s)
http://www.zone5pix.com/test/pumpkin.html

LadyEye · #24 02-19-2007, 02:45 PM

OR you could use the Menu Bar ... found near the bottom on the left side of your blue voda website builder

For each time you would like to use the word NEXT or BACK as a linkable option without a button just use the MENU BAR ... you can link the word, and you can change the background, etc., to your own colors, with the style option ... you will need to use custom color for your pumpkin color and you can do this by changing the RGB Code ... (which you should have from the pumpkin color itself.)

jenv · #25 08-15-2007, 03:44 AM

Hi there, I've made my customised navigation buttons. Looks great. still use the standard yext function. when I publish it the words are 'tiny'. so small you can't ready them. I have increased them to 36pt, which looks silly on the file but at least it's readable when I publish. Am I missing something?

navaldesign · #26 08-15-2007, 10:32 AM

Please provide a link to the problematic page.

guitarman62278 · #27 08-25-2007, 03:11 PM

Thanks for posting this thread,,, i have been working on this problem for a few days now.. Just wasnt happy with the navs that was premade for us. Thanks again.

guitarman62278 · #28 08-25-2007, 04:02 PM

I did what you said with the nav bar,,, and for some reason my background is pink. When it is supposed to be black. It is black in the editor and when i preview the page. But when i view it online its pink.

I am in desperate need of help....I cant have a pink backgroung...lol

www.rocksolidsales.com

navaldesign · #29 08-25-2007, 08:47 PM

This is because the buttons are transparent and this is the color (fuchsia) that BV renders the transparency with.

Your only solution is to make your original button image have a black background

kesenator@gmail.com · #30 09-08-2007, 05:30 PM

Hi, I would like to put a "back" on my pages. Typed in "on click:history.go(-1)" but it keeps going back or rather coming back to the same page. What am I doing wrong?
K

navaldesign · #31 09-10-2007, 07:35 AM

If there is no previous page, it will return to the same one. First open another page, then, in the same window open the one with the Back button. Now test it.

However, you can simply create a Back button using BV's Advanced Button (in the Forms Toolbar). Make it On click, action = Go to the previous page.

WSBlue · #32 10-22-2007, 05:16 AM

Hi! How can you I use navigation bar not link to URL but only for Bookmark within a page. I want to have something that can be move up or down, in order to have the items placed in alphabetically order and even can remove of those unwanted items. Thank you.

navaldesign · #33 10-22-2007, 06:46 AM

In the URL field of the Link dialog box, type #bookmarkname . Replace bookmarkname with the actual name of the bookmarks you have in your pages.

WSBlue · #34 10-22-2007, 07:30 AM

Quote:

Originally Posted by navaldesign

In the URL field of the Link dialog box, type #bookmarkname . Replace bookmarkname with the actual name of the bookmarks you have in your pages.

if the link type still using http://

navaldesign · #35 10-22-2007, 08:25 AM

Yes, but delete the http:// from the URL field

WSBlue · #36 10-22-2007, 09:20 AM

Quote:

Originally Posted by navaldesign

Yes, but delete the http:// from the URL field

it can't perform in preview, it shows messafe below or it must be published before it can have action? Thank you.

This link has been disabled.
BlueVoda has generated HTML for the current page only and as a result all internal links are disabled.

To enable these links be sure to publish all referenced pages to your website and specify their absolute URLs in the link properties.

WSBlue · #37 10-22-2007, 11:11 AM

Hi! if I choose 4 pieces bars of Navigation Bars goes horizontally in a row.
How can I have the 5th, 6th, 7th and 8th bar goes in the second row?
Thank Q.

navaldesign · #38 10-22-2007, 01:01 PM

Yes, bookmatks when placed in the menu bar will only work when the page is published.

You can't have a second row. If necessary add a second menubar

WSBlue · #39 10-22-2007, 02:38 PM

Quote:

Originally Posted by navaldesign

Yes, bookmatks when placed in the menu bar will only work when the page is published.

You can't have a second row. If necessary add a second menubar

Thanks George.

WSBlue · #40 10-22-2007, 06:36 PM

Quote:

Originally Posted by navaldesign

Yes, bookmatks when placed in the menu bar will only work when the page is published.

Hi! George,
No, It doesn't work even after being published.
Am I correct to do like these

link type: http:
URL: name of bookmark
Please advise.
Thank you.

WSBlue · #41 10-23-2007, 11:06 AM

Hi ! George,
In the URL field of the Link dialog box, I type Italy without http:// in the front and Italy also in the bookmark. But still can't work. After click the navigation bar, it shows :
The page cannot be found

ravikumar · #42 10-24-2007, 02:52 AM

hi,,
naval ,, i impressede with your suggestion,, i created my own buttons in photoshop,,, looks great to me
just checkout my buttons
www.telugumithrulu.com

navaldesign · #43 10-29-2007, 10:05 PM

Quote:

Originally Posted by WSBlue

Hi ! George,
In the URL field of the Link dialog box, I type Italy without http:// in the front and Italy also in the bookmark. But still can't work. After click the navigation bar, it shows :
The page cannot be found

it should work. if it doesn't you must have made something wrong.

bysandra · #44 07-03-2008, 01:10 AM

Hi George
Bethers sent me to this thread & I just had to say a big THANK YOU GEORGE.... Excellent instructions and a five minute job thanks to you. I am trying to forget the hours spent before reading your post. Thank you again.
Sandra
patternsbysandra. (not live yet I am still in learning mode)

simpleprod · #45 03-06-2009, 10:43 PM

Hi, can i do a drop down menu from the button that i made?

thanks....

Hamster_tango · #46 04-14-2009, 01:53 AM

Wonderful advice, I am really pleased with my Nav buttons, I took the company logo and re-did it in paint to create the Nav buttons.

Loads of thanks!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)