Weaver II Support Forum  Forum via Feedburner
    Home  |   Blog  |   Why Weaver?  |   Download  |   FAQ  |   About  
How to change the gradient in menu bar - Weaver II Support Forum
Search Support Forum First!
Loading

Posting Guidelines & Vanilla Forum Help

Before posting, please read the Posting Guidelines. Failure to follow the guidelines can result in being ignored!
There also is some help there for using the Vanilla Forum.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

Categories

Appreciate the help you got from this forum? Show your appreciation by leaving a tip for the volunteer moderator who helped you out!
Brighten your day with this inspirational music video: Free download at Ivory Drive

In this Discussion

How to change the gradient in menu bar
  • BruceCassidyBruceCassidy
    Member
    I'm on the latest version of Weaver Pro
    Using dark-transparent sub-theme
    The gradient is 180 degrees out of sync when you select an item on the menu. Looks 'funny'.
    A look at the front page of www.Nadananda.com and selecting a menu item will show what I mean.

    Can the gradient on the menu bar be changed 180 degrees i.e. vertically transposed.

    thank you

    Bruce
  • scramblerscrambler
    Member, Moderator

    The gradient is made by the picture

    wp-content/themes/weaver-ii-pro/images/theme/fade.png

    So you could create a Child theme and flip the image in it

    Or you can try the CSS below I found on the web and that seems to work (I tested IE)

    Add the rules below to Advanced option > Head Section > Custom CSS Rule box.

    To flip the main menu bar gradient

    .menu_bar, .weaveriip_vertical_menu .menu_bar li {
        -moz-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        transform: scaleY(-1);
        -ms-filter: flipv; /*IE*/
        filter: flipv; /*IE*/
    }
    If you have sub menus also add

    .menu_bar ul ul a, .menu_bar li:hover > a, .menu_bar ul ul :hover > a {
        -moz-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        transform: scaleY(-1);
        -ms-filter: flipv; /*IE*/
        filter: flipv; /*IE*/
    }

    Make sure to test all browsers and let us know

     

  • BruceCassidyBruceCassidy
    Member
    Thank you Scrambler

    I have first to make a child theme - haven't done that before and should have done. I will only be able to get to it in a few days.

    thanks again - will report

    Bruce
  • scramblerscrambler
    Member, Moderator

    I tested the code I gave you before to try and avoid a child theme, but unfortunately it only works on IE. On chrome and Firefox it also flips the Menu text.

    There is a way to flip only the background on Chrome and Firefox, but it is not responsive, which means that as the Browser window shrinks, and the menu ends up on two lines, the background would only be on the first line.

    So child theme seems to be the best for that

  • scramblerscrambler
    Member, Moderator

    EDIT: This was bugging me and digging further, I found a 90% solution with just CSS

    .menu_bar {
        -moz-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        transform: scaleY(-1);
        -ms-filter: flipv; /*IE*/
        filter: flipv; /*IE*/
    }

    .menu_bar a {
        -moz-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        -o-transform: scaleY(-1);
    }

    the first set of CSS flips the background only on IE but everything on Chrome and Firefox (not tested O)

    The second set flips the Menus back on Chrome and Firefox so they look normal on the flipped background.

    Only hiccup, on Chrome if you have social buttons on the menu bar, their icon are screwed up (no clue why)

    That being said, I think the Child theme may be more complicated, but is is a cleaner solution

    I will leave this alone now :)

  • JoyJoy
    Member, Moderator
    Why don't you just change the image in the CSS rule? It is set to fade.png. Change it to fadeup.png.
  • scramblerscrambler
    Member, Moderator
    This answer was Accepted.

    Now I feel really Dumb :)

    @brucecassidy, Of course this is the easiest way (why do complicated when you can do simple...).

    Download the initial fade image(http://nadananda.com/wp-content/themes/weaver-ii-pro/images/theme/fade.png). Create a fliped version and upload it in your media, then just override the CSS rule that puts it as the background image of the menu bar and of the Sub menu (see these rules below).

    .menu_bar, .weaveriip_vertical_menu .menu_bar li {background-image:url("pathandnameofthenewimage");}

    .menu_bar ul ul a, .menu_bar li:hover > a, .menu_bar ul ul :hover > a {background-image:url("pathandnameofthenewimage");}

    Thanks @joy for bringing me back to reality

  • JoyJoy
    Member, Moderator
    @scrambler, the fadeup.png is part of the Weaver theme.
  • scramblerscrambler
    Member, Moderator

    Then it is simply:

    .menu_bar, .weaveriip_vertical_menu .menu_bar li {background-image:url("/wp-content/themes/weaver-ii-pro/images/theme/fadeup.png");}

    .menu_bar ul ul a, .menu_bar li:hover > a, .menu_bar ul ul :hover > a {background-image:url("/wp-content/themes/weaver-ii-pro/images/theme/fadeup.png");}

     

  • BruceCassidyBruceCassidy
    Member
    I just did what scrambler suggested - looks OK now. I didn't make child theme though so I'll have to stay on top of it if I



    Download the initial fade image(http://nadananda.com/wp-content/themes/weaver-ii-pro/images/theme/fade.png). Create a fliped version and upload it in your media,

    thank you
    Bruce
Add a Comment