Yola Champs I need You.... Help :)

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Ok, I know it was posted before but I lost it.

I have been putting this off for a long time. I need to make buttons for my menus if it is possible. I know it is because the champs do it. I would like a side menu and a top menu look at this page.

http://www.winnersedgetrading.com/rec...

Any help will be appreciated.

Thanks

Casey
Photo of Casey Stubbs

Casey Stubbs

  • 222 Posts
  • 6 Reply Likes
  • happy

Posted 9 years ago

  • 1
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Theres so many to choose from... you'd have to pick what you like and then we could get it up and running.

Try first and look through the menus here http://yolacodes.yolasite.com

Maybe for the side menu something like this (in a different colour) would work - http://skintime4u.com

I'm signing out now, try and get an idea of the menu you want to use and get back here if you need help. Someone will be around if im not.
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Maybe a bit of custom css editing instead of taking away the current navigation menu and having to add the pages manually?
Photo of Casey Stubbs

Casey Stubbs

  • 222 Posts
  • 6 Reply Likes
How would I customize my pages without having to do it manually?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Casey

You may be interested in learning how we can easily customize our pages now due to the Yola upgrade a few weeks ago with our style editor: http://www.yola.com/tutorials/persona...
Photo of Casey Stubbs

Casey Stubbs

  • 222 Posts
  • 6 Reply Likes
I saw the tutorial but I didnt see anything about menus. Can I customize a css menu to affect all pages?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Casey

I've always enjoyed using www.cooltext.com or http://www.htmlbasix.com/mouseoverima... to make my mouseover buttons. Lee and Connor both have offered some great ideas as well. Please let us know if you need further assistance.
Photo of Casey Stubbs

Casey Stubbs

  • 222 Posts
  • 6 Reply Likes
I added a menu but I can't get it to work?

http://www.winnersedgetrading.com/con...

What did I do Wrong?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Casey

It doesn't look like you copied all the codes. Did you by chance use the htmlbasix code? Make sure that you copy the head code and place into one HTML widget, and then the body code into another HTML widget. Please let me know if you need further assistance with this.
Photo of Casey Stubbs

Casey Stubbs

  • 222 Posts
  • 6 Reply Likes
Ok I got the menu to work but I need to make some adjustments.

Take a look http://www.winnersedgetrading.com/con...

Please help me to make it look good.

Thanks
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Casey

Well done on implementing the css menu! So.. now you just need to tweak it! I would make your menu boxes a little longer so that everything is on one line. You may need to shorten some of your words as well to help make it all fit. You would need to change the width in this section: #sddm li a

If you're going to make the menu boxes a little wider, be sure to also change the drop-down menu a little wider as well. You can change the width in this section: //drop down menu// #sddm div a

Also.. in that same dropdown menu section, change your background color to the same as the one in this section: #sddm div a:hover
{ background: #66CC00;

This will get rid of the black line around the drop-down box. However, if you like it - then by all means, keep it! =)

Once you have your menu all set up - I would then take a look at centering it. You can do this by changing the padding:0px (at the very top, under #sddm) to padding-left: 3px (increase or decrease until it's centered)
Photo of Casey Stubbs

Casey Stubbs

  • 222 Posts
  • 6 Reply Likes
oK, i made some progress but I now the drop down text disappears when I hover. This is hard when I don't know what I am doing.

thanks Little us
Photo of Casey Stubbs

Casey Stubbs

  • 222 Posts
  • 6 Reply Likes
ok I got the color working. I can't line up the drop down boxes.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Almost got it!

In this section: #sddm div a:hover
color: #66CC00

change the color to a darker color such as black which is #000000

You're doing great! =)
Photo of Casey Stubbs

Casey Stubbs

  • 222 Posts
  • 6 Reply Likes
Thanks for the support.

Now how do I edit the drop down links and such?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
In your HTML section, you have this - which is one of your drop-down menu:

<li><a href="http://www.winnersedgetrading.com/tra...; onmouseover="mopen('m1')" onmouseout="mclosetime()">DAILY TRADE</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="http://www.yola.com/tutorials.html&quot; target="_blank">Yola</a>
<a href="http://forsite.synthasite.com/&quot; target="_blank">Forsite</a>
</div>
</li>

See the ('m1') and div id="m1" - this indicates this is the first drop-down menu. For each drop-down menu, this number goes up incrementally. So for your second drop-down, you would need to change it to ('m2') and div id="m2" For the third - ('m3') and div id="m3", etc..

After the onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
you will see some a href tags. These are the tags you change to reflect what you want to show up on your drop-down menu. So, replace the links (http://www.yola.com/tutorials and "http://forsite.synthasite.com") with your own link urls and the corresponding text (Yola and Forsite) with your own text:
<a href="http://www.yola.com/tutorials.html&quot; target="_blank">Yola</a>
<a href="http://forsite.synthasite.com/&quot; target="_blank">Forsite</a>

If you want to add to the drop down menu, just add another a href tag before the </div></li>.

I hope that makes sense! Let me know if you have any problems.