Weaver Xtreme menu bar gradient

[LorSmi]

Okay, I’ve found a few discussions on how to implement a menu bar gradient without the gradient button that Weaver II use to have. I implemented that mygradient class and I’m almost there but not quite. I sure wish there was a button like the old version because I am really not a coder and didn’t want to have to learn coding.
This is one of my older Weaver II sites, and this is the effect that I want to achieve –
http://www.vantastix.org/

But this is Xtreme and its not quite there –
http://www.lorriestestsite.com/

What can I do at this point?
Thanks

[scrambler]

Well, you have a gradient in your menu bar, do you mind telling us what your issue is??

If it is the fact it does not have the right colors, just change the top and bottom color codes in your gradient class rules

top #b6a392
bottom #715236

[LorSmi]

Yes, a gradient but not the right one. I’ll try and reverse to see how it looks. Thanks.

[scrambler]

It is up to you to set the top color and the bottom color to whatever you desire.

Unlike the gradient in the Weaver II them that used a transparent shaded image that combined with the menu bar color, the CSS you are  using is an opaque gradient where you select your own top and bottom color (I gave you the values in my previous post)

[LorSmi]

Okay, I fixed the bar…but now I don’t know what I did to get the buttons to blend? Take a look at the two sites again and let me know where I need to be. ASsigning colors to items on the web pages seems to be in so many places!

[scrambler]

If you mean how to get a gradient on the Hover color, you need to:

Determine the top and bottom color you want

Add the same CSS rule you used for the class with these new colors to Main Options > Menus > Primary Menu bar > Hover BG CSS+ box and put noting in the color box itself

[LorSmi]

Okay, I’m back to work on this but your last comment confuses me. Why do I need to determine the top and bottom color I want if I put nothing in the color box?

[LorSmi]

Also, need help here as well. Should I start a new topic with this question?
http://www.lorriestestsite.com/calendar/

[Weaver]

Gradients are defined in the CSS rule by specifying the top and bottom colors – that is how they work.

[scrambler]

Yes open a new thread with your new question explaining what the issue is.

As for the gradient question, how can a gradient give you what you want if you do not tell what colors you want for start and end ?

CSS does not read your thoughts (yet)  🙂

[MaureenT]

For what reason was the menu bar gradient option removed from Weaver Xtreme? That’s going backwards in functionality, not forwards. Using the checkbox was a quick and easy way to add a gradient. Now, people have to resort to writing custom CSS. I noticed that all of the options for adding background gradients are gone as well. They were a Weaver II Pro feature, but they appear to be completely missing from Xtreme, including in Plus.

[ToshMcIntosh]

I’ve built three websites with Weaver II that do everything I need them to do because the theme is so kind to amateurs like me with no coding experience.
 
A friend has asked for help in building his website, and I elected to use Weaver Xtreme because I wanted to start off with a more current theme that will serve him well in the future.
 
Imagine my surprise when I discovered that the super user-friendly one-click application of menu bar gradients had flown off into the sunset.
 
I agree with MaureenT, but since mourning the untimely passing of the menu bar gradient option doesn’t solve the issue now, I’ve tried to implement scrambler’s solution as presented here:
http://forum.weavertheme.com/discussion/11324/question-about-menu-gradient,
and the tutorial about taking advantage of the “Add Classes” Option Box here:
http://forum.weavertheme.com/discussion/10444/weaver-xtreme-tips-and-tutorial-part-3#Item_1
 
I’ve not yet been able to get any gradient effect in the primary menu bar, and I’d appreciate knowing what to enter in the CSS+ box to create the Menu Bar BG color #D9D9D9 on top and #BDBDBD on bottom, and for the Hover BG #F4D3A4 on top and #FFE4BD on bottom.
 
Thanks in advance for taking the time to assist.
 
Tosh

[scrambler]

What part of the tutorial instruction below is unclear?

Replace #444444 by #D9D9D9 and #999999 by #BDBDBD

You only need to define one custom CSS rule applying a gradient to a single class like adding the rule below in Main options > Custom > Custom CSS Rule box

.mygradient {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image: -moz-linear-gradient(top, #444444, #999999);
  background-image: -o-linear-gradient(top, #444444, #999999);
  background-image: -ms-linear-gradient(top, #444444, #999999);
  background-image: linear-gradient(to bottom, #444444, #999999);
  filter:prodig:DXImageTransform.Microsoft.gradient(startColorstr=’#444444′,endColorstr=’#999999′);
}

then in any area where you want the gradient, simply type   mygradient  inside the “Add classes’ box.

[Author]

Posts