Home Forums Weaver Xtreme Theme Menu Bar Gradient

Viewing 16 posts - 1 through 16 (of 17 total)
  • Author
    Posts
  • #64427
    LorSmi
    Participant

    I am struggling with trying to get my new Xtreme to look like my old Weaver II – specifically about having the menu bar gradient. In Weaver II it was simple – in Menu Bar Extras there was a box to check “menu bar gradient”

    Unfortunately, Weaver Xtreme does not have that, or I haven’t been able to find it!

    This is what I am going for (my current Weaver II site)  https://www.lcotgs.com/

    And here is where I’ve upgraded to Weaver Xtreme and am working on it   https://lorriestestsite.com/

    Also, I would also appreciate any tips on where to find menu bar width so I can fix that as well!

    Oh, I should add, I did also purchase Xtreme Plus, but I’ve looked in there and can’t find anywhere in there that looks like it would help

    #64430
    scrambler
    Moderator

    I am not sure I understand the question about the gradient background as you seem to have implemented one with CSS and a mygradient class on the menu bar

    There are two ways to add a gradient to the menu bar

    Using pure CSS as you are doing, or add an overlay transparent image like Weaver II did

    The CSS property in weaver II was

    {background-image: url(/wp-content/themes/weaver-ii-pro/images/theme/fade.png);}

    Regarding the width of the menu bar, by default it is the width of the header but every zone (Header. Footer widget areas, menu…) can be set to a width larger than the container using their Align option

    In the align drop down list you will find options like align Wide and Align full. Play with them.

    In your weaver II site you just had the whole site set to a width of 1216px, then you had some margin / padding on the content, you can do the same here without having to use the alignment option I mentioned above

    There is also a guide article that explains all the option to create full width site / content, have a look at it

    https://guide.weavertheme.com/full-width-design/

    #64431
    LorSmi
    Participant

    I don’t think I implemented the gradient with CSS – rather I just checked the gradient box. In any case it was many many years ago, and I’ve been delaying upgrading to Xtreme for this very reason!

    I will check out the guide article.

    Thanks

    #64432
    scrambler
    Moderator

    The Gradient appears to come with default settings from the Sub Theme.

    It added a mygradient class to the menu using the Menu Class box option, then it added the Custom CSS Rule below in Main options > Fonts & Custom > Custom CSS Rule box

    /* Custom CSS rules for Plain sub-theme */
    .mygradient {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b6a392), to(#715236));
    background-image: -webkit-linear-gradient(top, #b6a392, #715236);
    background-image: -moz-linear-gradient(top, #b6a392, #715236);
    background-image: -o-linear-gradient(top, #b6a392, #715236);
    background-image: -ms-linear-gradient(top, #b6a392, #715236);
    background-image: linear-gradient(to bottom, #b6a392, #715236);
    filter:prodig:DXImageTransform.Microsoft.gradient(startColorstr=’#b6a392′,endColorstr=’#715236′);
    }

    So just go there and change start and end the color to what you need in every line

    #64433
    LorSmi
    Participant

    Okay, I still can’t find where I put that CSS in for the gradient in Xtreme.

    And the menu bar is wider than the header – I want it to be the same. Can’t find where to do that, either.

     

    #64434
    LorSmi
    Participant

    Okay, re your last reply, I don’t want to do a gradient for the BG, I want to do the gradient for the menu (see lcotgs, not lorriestestsite)

    #64435
    scrambler
    Moderator

    It seems we are not understanding each other.

    The new Xtreme  lorriestestsite has the gradient on the Menu bar background, exactly like the old WII lcotgs site

    The colors of that gradient are defined in the CSS rule that came with the subtheme and that is located in Main Options > Fonts & Custom > Custom CSS rule box.

    The rule is

    /* Custom CSS rules for Plain sub-theme */
    .mygradient {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b6a392), to(#715236));
    background-image: -webkit-linear-gradient(top, #b6a392, #715236);
    background-image: -moz-linear-gradient(top, #b6a392, #715236);
    background-image: -o-linear-gradient(top, #b6a392, #715236);
    background-image: -ms-linear-gradient(top, #b6a392, #715236);
    background-image: linear-gradient(to bottom, #b6a392, #715236);
    filter:prodig:DXImageTransform.Microsoft.gradient(startColorstr=’#b6a392′,endColorstr=’#715236′);
    }

    It has a top color of #b6a392 and a bottom color of #715236

    Replace these values by the top and bottom colors you want everywhere in that rule to style the gradient to your liking.

    #64439
    LorSmi
    Participant

    Okay, I understand now about the gradient. Thank you.

    But the menu bar width is still an issue. I don’t want to align wide or full. I want to decrease the width. How is that done?

    #64440
    LorSmi
    Participant

    I put the CSS in the Main Options Fonts and Custom and that did nothing. (after changing to my colors) I then put it in Main Options Menu and that also had no affect.

    https://lorriestestsite.com/wp-admin/upload.php?item=3528

    https://lorriestestsite.com/wp-admin/upload.php?item=3529

    I hope you can access these two screenshots

    I wish Xtreme just had a box to check in Menu Bar Extras – the box says Menu Bar Gradient!

    #64441
    LorSmi
    Participant

    Here is the current view of the Xtreme version. I hope this picture can be uploaded

    https://lorriestestsite.com/wp-admin/upload.php?item=3530

     

     

    #64442
    LorSmi
    Participant

    Okay, I logged out and saw that you would not be able to access my images. I’ve put them here – please let me know what I am doing wrong

     

    https://www.apsforestsolutions.com/home-2/test-page-for-image-viewing/

    #64444
    scrambler
    Moderator

    It appears you gave me the link to the wrong site for the Xtreme version, because when I go to it I do not see the same site

    https://www.lorriestestsite.com/

    Does not look like the picture you posted… The site has a canvas background and a white cat at the top

    Remove whatever CSS you added and please give me the proper link to your Xtreme site so we can start from Scratch….

    #64445
    scrambler
    Moderator

    Here is what the site your link goes to look like

     

    #64447
    LorSmi
    Participant

    Yes, that was my former test site that was on lorriestestsite. Last week I used the migration plug-in and cloned the original (Weaver II) site and imported it to lorriestestsite.com but it appears that only I can see that because I am logged in to that site. I guess it is down a level or something like that.

    You’ll have to go to the last link I sent you to view the screenshots. I’ll give it to you again, here

     

    https://www.apsforestsolutions.com/home-2/test-page-for-image-viewing/

     

     

    #64448
    scrambler
    Moderator

    Screenshot are useless, I need to be able to inspect the site.

    For the Gradient, you should be able to add the CSS below to Main options > Menus > Primary Menu Bar > menu Bar BG CSS+ box

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

    With the values you want.

    For the menu bar, I need to see the settings you have, right now it looks like the Menu bar BG is extended, that setting would be in Main options > Full Width > Extend BG attribute to full width, and should be unchecked for the menu bar. Also make sure the Menu align option is not using any of the full or wide options

    While in there check what you have in One step Layout drop down list, and make sure it is on Traditional.

     

     

    #64449
    LorSmi
    Participant

    You were right on the menu bar BG extended! I found that box and unchecked it!

    The gradient is still an issue. My screenshot here SHOWS you the settings, please take a look at it!

     

    https://www.apsforestsolutions.com/home-2/test-page-for-image-viewing/

Viewing 16 posts - 1 through 16 (of 17 total)
  • You must be logged in to reply to this topic.