Menu Border

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Does anybody know how to add a border to a menu in a text widget? Please answer. Thanks!
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Grace

I'm sure this can be done. Would you mind showing me where on your site this is? I just need to look at it and then hopefully be able to assist you.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
My site is destinedfate-shinzo.synthasite.com.
I want the border to be added around the side menu (left) and around the rollover mouseover button links at the top.
Note - the side menu is in html box widget and the top menu is in the text box widget.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
It's on a placeholder page.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
So what do you suggest I do? What kind of script should I use?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Sorry Grace.. I meant I can't see your page... it's on a placeholder page. Can you publish it for a second then I can give you some advice. I think you just need to add a snippet of code to your table.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
It is already published. I'll give you the url again.
http://destinedfate-shinzo.synthasite...
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Ahh.. now I see it. Okay... do you want to have border around each button along the top or something to encompass the whole thing?

As for your side menu... I just see one little thing - the "updates" - Is that what you're talking about?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Take a look at my site: http://littleus.synthasite.com... did you want your menu buttons on the top to sort be like what I have?
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Yes, I want to add border like that. Both to the top and side menu.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
I want add a menu around all the buttons on the top page. Not a border around each one.

As for the side menu I want to add a border to that. If you click on any of the rolloever buttons it will show you a page with different side menu. I made that.

I just want to add a border to each one.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Okay.. for your buttons on the top... here's the code: You will need to change the color to match your site and you can adjust the alignment, height & width:
<!--<table align="center" bgcolor="#89d81a" border="0" cellpadding="5" cellspacing="0" width="100%" height="100%"> <tbody><tr><td bgcolor="#839636"><div align="center">
<div style="margin: 0px; padding: 0px; width: 100%;" class="layout_1-column">
<div id="layout_row1">
<div id="sys_region_1" style="margin: 0px; padding: 5px; vertical-align: top; line-height: normal; min-width: 100px;" class="zone_top"><div id="I474" style="display: block;" class="Text_Default"><div id="I474_sys_txt" class="sys_txt" style="margin: 0px; padding: 0px;"><a onmouseover="if (document.images) document.Main01.src= 'http://destinedfate-shinzo.synthasite..." onmouseout="if (document.images) document.Main01.src= 'http://destinedfate-shinzo.synthasite..." href="http://destinedfate-shinzo.synthasite... src="http://destinedfate-shinzo.synthasite..." name="Main01" border="0"></a>   <a onmouseover="if (document.images) document.Info01.src= 'http://destinedfate-shinzo.synthasite..." onmouseout="if (document.images) document.Info01.src= 'http://destinedfate-shinzo.synthasite..." href="http://destinedfate-shinzo.synthasite... src="http://destinedfate-shinzo.synthasite..." name="Info01" border="0"></a>   <a onmouseover="if (document.images) document.Gallery01.src= 'http://destinedfate-shinzo.synthasite..." onmouseout="if (document.images) document.Gallery01.src= 'http://destinedfate-shinzo.synthasite..." href="http://destinedfate-shinzo.synthasite... src="http://destinedfate-shinzo.synthasite..." name="Gallery01" border="0"></a>   <a onmouseover="if (document.images) document.Extras01.src= 'http://destinedfate-shinzo.synthasite..." onmouseout="if (document.images) document.Extras01.src= 'http://destinedfate-shinzo.synthasite..." href="http://destinedfate-shinzo.synthasite... src="http://destinedfate-shinzo.synthasite..." name="Extras01" border="0"></a> </div></div><div id="I259" style="display: block;" class="Layout1_Default"><table style="width: 100%;" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td id="Left_I259" style="text-align: left; vertical-align: top; width: 11.9438%;"><div id="I261" style="display: block;" class="HTML_Default"><div id="I261_html"></div></div></td></tr></tbody></table></div></div></div></div></div></td></tr></tbody></table>-->

I would suggest putting it into an html widget instead of the text widget. When I try to use the code in the text widget, my text box kept growing but it viewed okay. Just looks really wacky.

As for the side menu- you can use the same code above. If you don't want a background, just take that snippet of code out.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
You'll also have to replace the whole menu buttons with the side bar buttons. Am I making sense? Please let me know if you have any questions.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
No you are not making sense. As for the code that you showed above, there is one problem. My mouseover button won't work. I published it so that so can see it. Any idea on how to make it work?
Also another thing, can you make the border look grey instead of green?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Let me look into the mouseover problem and I'll get back to you and I'll change to green to grey.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Alright.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
First of all... I don't know if this is what you wanted but here's the code for the side menu - I just put a border around it. I didn't know what color you wanted.. so I did blue to match your menu buttons' text color.

<!--<div id="I259" style="display:block;" class="Layout1_Default"><table border="2px" bordercolor="#1E90ff" cellspacing="0" cellpadding="0" style="width:100%;"><table style="border: 2px solid #1E90FF"><tr><td id="Left_I259" style="text-align:left; vertical-align:top; width:11.943793911007025%;" ><div id="I261" style="display:block;" class="HTML_Default"><div id="I261_html"><div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="index.php" id="current">Updates</a></li> </ul> </div></div></div></table> -->

I cannot figure out why the mouseovers don't work. What program did you use to make your buttons?
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Okay, now this was the kind of code I was looking for in the beginning for both the top and side menu. As for the mouseover, I was using this online generator at this link:
http://www.creatingonline.com/webmast...
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I've a chance now to look at the button generator.. and I think I know why it isn't working very well. The code requires that you put part of it in the head of the document and the rest in the body of the document. We don't have access to the head. Although it is working on its own, I am assuming that the table is interfering with the code somehow. I would suggest using cooltext for your buttons. Also... your buttons don't seem to be the same sizes. This could be remedied in cooltext. If you decide to go that route, make sure the button fits the longest word first, then make your text all the same size and length for the other words.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Someone else may be able to help you figure out how to make the border work with your existing mouseovers. Sorry I couldn't be more helpful in this area.

If you decide to go the cooltext route, then, I can further assist you.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Littleus,

The buttons were made by cooltext. And I'm fine with the different sizes of the buttons. And as for the border, if you can't do it, then I can just settle for the one that is like on the sidebar that you put. Though the only is I don't know how to put it in the middle.

If you still want to help with what I originally wanted then that is fine with me, but if you don't, then I can always settle for the one I currently have. Besides, I just wanted to improve my site a bit.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Let me work on it a bit then... and I'll come up with a code that includes everything okay? Thanks for being patient!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Grace

Here's the code... be sure to test on a test page first to see if it worked for you. If you want to change the color - you can do so! Just change the bgcolor and the td bgcolor in your code.

<!--<table width="100%" height="100%" align="center" bgcolor="#000000" border="3" bordercolor="#1390ff" cellpadding="5" cellspacing="0"> <tbody><td bgcolor="#000000"><div align=center>
<a href="http://destinedfate-shinzo.synthasite... style="border-width:0px;" src="http://destinedfate-shinzo.synthasite..." onmouseover="this.src='http://destinedfate-shinzo.synthasite..." onmouseout="this.src='http://destinedfate-shinzo.synthasite..." /></a>     <a href="http://destinedfate-shinzo.synthasite... style="border-width:0px;" src="http://destinedfate-shinzo.synthasite..." onmouseover="this.src='http://destinedfate-shinzo.synthasite..." onmouseout="this.src='http://destinedfate-shinzo.synthasite..." /></a>     <a href="http://destinedfate-shinzo.synthasite... style="border-width:0px;" src="http://destinedfate-shinzo.synthasite..." onmouseover="this.src='http://destinedfate-shinzo.synthasite..." onmouseout="this.src='http://destinedfate-shinzo.synthasite..." /></a>     <a href="http://destinedfate-shinzo.synthasite... style="border-width:0px;" src="http://destinedfate-shinzo.synthasite..." onmouseover="this.src='http://destinedfate-shinzo.synthasite..." onmouseout="this.src='http://destinedfate-shinzo.synthasite..." /></a></div></td></tr></tbody></table>-->
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Thanks Littleus, that worked perfectly.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Ohh... I'm so glad to hear that it worked for you! I look forward to seeing your completed site!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Ohh.. I forgot to add.. if you want to change the border color, just look for bordercolor="kdjakldfj" and replace the stuff between " " to a color you want using hex numbers and don't forget the # sign.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Okay. I'll tell you once I finish editing my site.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Littleus,

I just finished editing my site. The reason it only took so long was because of a bug with the vertical menu. Luckily, though I fixed it, by deleting the pages and then redoing it.

Now I want you to take a look at the top menu, As you can you can see, there is a new link, but the picture is not showing. However, if you mouse over it, it will appear.

Do you think this may affect my site later? If so, please tell me how I can fix this.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Grace

I'm not seeing what you are talking about. I see the 4 buttons along the top.. but I don't see the new link, even when I try to put my mouse over it. Have you updated the site?
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
The site is already updated and the new link is between the "Gallery" and "Extras" rollover buttons.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Littleus,

Never mind I already solved the problem. I just accidentally renamed the source wrong. So it's all fixed. You can still check out my site if you want.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Ahh... great job Grace! I can now see the button you're talking about! That's the one thing about html, eh? It's so finicky - the slightest error and whammo - it can throw your entire universe out of whack! =)

Your site looks great!
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Thanks!
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Thank you littleus.