Bottom Menu

[GR8FL]

First part relates to have a horizontal menu in the footer. 

I have a menu in Appearance > Menus, called “TopMenu” for the primary navigation instead of Default menu. The look (CSS) is defined in Menus > Primary Menu Bar.

In Weaver Pro I have another primary navigation menu defined in Appearance > Menus, called “Bottom“. 

Then under Head > CSS: 

.menu-horizontal ul {padding-left:0px;padding-right:0px;}

.menu-horizontal a {color:#FAFAFA;  border-color: #EDEDED; border-style: dashed; border-width: 0 1px 0 0;padding-right:15px;}

.menu-horizontal .current_page_item > a , .menu-horizontal .current-menu-item > a {text-decoration: none; color:#FFF68F !important;}

.menu-horizontal a:hover, .menu-horizontal a:focus {text-decoration: underline; color:#FFF68F !important;}

Then under HTML > Post Footer: <div style=”text-align: center;”>[weaver_extra_menu menu='bottom' style='menu-horizontal' css='width: 100%; ]</div>

Finally there is #inject_postfooter 

#inject_postfooter {background-color: #816687; padding-bottom:20px;padding-top:20px; padding-left:3%;padding-right:3%; color:#FFFBFA; font-size:117%; } 

#inject_postfooter a {text-decoration: none; color: #FFFBFA;}

#inject_postfooter a:hover {color:#FFFFD4; text-decoration: underline;}

I don’t even know if this was the best way to do this (seems like a lot of steps), but this site will be coming over to Xtreme some day and I have other sites in Xtreme that I want a bottom menu. What is the equivalent to do this in Xtreme?

[scrambler]

A link to what it looks like in Weaver II would have been more useful.

Xtreme has 3 available set of Styling Options to style extra menus (primary / Secondary / Extra), so you can easily have a fully styled menu bar at the bottom using the Extra menu shortcode.

If the style for the bottom menu needs to be different than the primary menu, you can use the Extra menu set of options in Main options > Menus, then put an Xtreme extra menu shortcode in the post footer area using that style.

Then we can talk if you need more styling.

[GR8FL]

Can I have multiple Extra Menu Styling?

I was thinking of using that for the navigation links for some pages to be placed on the Sitewide Top Widget.

Link to Weaver Pro site using bottom menu I described: hattiesgarden.com/

[Gillian]

You can put extra menus in different widget areas and style them differently.

[scrambler]

Using theme option boxes you can use 3 different styles, primary, secondary and extra.

But with custom CSS, you can always change any of these menu styles afterwards on a specific extra menu, as they each have their own ID, so we can use any of the styling rule and Add the specific ID at the appropriate place to change it.

When you have one in place you want to change give us a link with specifics and what you want to change and we can precise the rules

[GR8FL]

I am now revisiting this and need to know best way to proceed.

I have created a menu under appearances called “bottom”.

I want a simple horizontal menu in the post-footer that looks something like this site.  Please note this site was done in Weaver Pro II. I am working on a different site in Xtreme. 

I can use the Secondary menu to define the CSS or I can put the CSS in the Custom CSS Rules. I assume I can also set the background color using #inject_postfooter in Custom CSS Rules also. That is not the issue or question I have. 

The question I have is what is the equivalent of the following line which in Weaver Pro was entered in the HTML > Post Footer:

<div style=”text-align: center;”>[weaver_extra_menu menu='bottom' style='menu-horizontal' css='width: 100%; ]</div>

What is the Xtreme equivalent of weaver_extra_menu?

[scrambler]

if you want a simple styling, you can use the header mini menu style

[extra_menu menu_name='bottom' menu_style='header_mini' menu_type='horizontal']

Set your styling using the Header Mini menu options.

To center the menu and add the separator, add the rule below in the Mini menu BG CSS+ box

{text-align:center;} %selector% li {padding-left:10px;border-right:1px dotted black;}

To remove the last separator change the rule to

{text-align:center;} %selector% li {padding-right:20px;border-right:1px dotted black;} %selector% li:last-child {border:none;}

I added it in the last tutorial thread 🙂

[GR8FL]

How can I add this to the post-footer? I can see how I can style all this so it comes out in correct colors, padding, etc., but what I don’t see is where to put it so it comes under the footer content? In Weaver Pro we had option for four footer widget areas.

In this case I put the content (not the menu which I want underneath content) in the footer html.

Nevermind… I got this. Just put the shortcode in the HTML Insertion Area 

 

[GR8FL]

But now I have issues with borders, shadows, etc. 

Please see http://xtreme.littledropup.com/

[GR8FL]

In Weaver Pro I had up to four footer widget areas. Xtreme has one. I am also noticing what I put in the html footer is not aligned vertically at the top

What would be the equivilant? 

[scrambler]

It is not a border but the drop shadow of the wrapper that ends up on top.

Remove your border:none rule in the post footer BG CSS+ box and instead use the rule below in that CSS+ box

{position:relative;z-index:10;}

Xtreme has One footer area, but you can have as many widgets in it arranged any way you want, so you actually an infinite number of possibilities instead of just 4.

You can use a number of columns, so if you want 4 just drop 4 widgets and use column:4 in the settings. But if you have plus, you can actually create any kind of layout with rows of widgets with various width, and even control ho the layout changes on small tablets and phone. Have a look at the demo site footer widget area and how it changes when you reduce the browser size

http://demo.weavertheme.com/insertion-areas/

 and read the tutorial on how to create these

http://forum.weavertheme.com/discussion/10342/weaver-xtreme-tips-and-tutorials-part-1#Item_1

[GR8FL]

“The Plus Plugin adds the “Custom Widget Widths” option.”… It’s like uncovering a goldmine with Xtreme again and again.

I did the example on my test site. If you look at the footer, using 3 footer widgets, first row is in 2 columns) and second row is the horizontal menu.

Then I used what I had which as shown: first row (2 columns) from footer html and the menu is from post footer (thinking about putting this in bottom of footer anyway).

Problem is different font, colors, link colors, etc. How do I style the footer widget text including the link colors? Even though I did define under footer the text color, link color, hover color, etc. it is not using it. What is show for the 2nd set of footer info is the style I want to use.

I am also looking at the Plus help and it indicates I can use shortcode: area_style=’area-style-name’, but I don’t know where to define this. Or should I just put the style in the html text that I am using in the footer widget.

[scrambler]

Global styling for ALL widgets are in Main Options > Sidebar & Layout > Individual Widgets

If you wanted to style all widgets in the footer area differently, you could put rules like below in The Footer Widget Area BG CSS+ box

.widget {color:red;}

If you wanted to change text color and link color, the way to build the multiple rule would be

.widget {color:red;} %selector% .widget a {color:blue;}

The logic is that Xtreme adds the selector of the option in front of what is in the box, so for the first rule, you only add what comes after that. If you have more than one rule to put in, you need to insert the area selector using %selector% in front of each succeeding rule.

Regarding your remark on area_style… this is about the widget area Shortocde, which has nothing to do with this but has to do with inserting a Per Page widget area somewhere else. Read below item 1) B) for more on this

http://forum.weavertheme.com/discussion/11220/weaver-xtreme-tips-and-tutorial-part-5

[GR8FL]

where would I add for bottom widget something like this: 

.widget {color:red;} %selector% .widget a {color:blue;}

I don’t see a CSS +box.

[scrambler]

Main options > Footer > Footer Widget Area > Footer Widget Area BG CSS+ box

[GR8FL]

I am not getting this to style properly. 

My Footer Widget has .widget a {color:#2F4F2F;} %selector% widget a:hover {color:#0370FF;}

 yet the hover color is same as widget color.

The inject post-footer CSS is completely ignored and the hover color is incorrect. Also the font size is too big. For testing, I used this in my Custom CSS which is not being used:

#inject_postfooter {background-color: #816687; padding-bottom:20px;padding-top:20px; padding-left:3%;padding-right:3%; color:#FFFBFA; font-size:117%; } 

#inject_postfooter a {text-decoration: none; color: #FFFBFA;}

#inject_postfooter a:hover {color:#FFFFD4; text-decoration: underline;}

[Author]

Posts