Custom Menu Widget with Awake styling « My Site My Way Support

Custom Menu Widget with Awake styling

resolved (21 posts) (3 voices)

pearson
Member
Hi
I've been trying to use the Custom Menu Widget in the sidebar. There are several advantages over the 'Awake Sub Navigation' widget. 'Custom Menu' allows me to order menu items and include pages that don't have a parent child relationship.

I'm struggling to 'Custom Menu' to display using the Awake styling. Have a look at the attached jpgs for a visual description of what I'm trying to achieve.

This is the sidebar menu displaying correctly using the 'Awake Sub Navigation' widget.

This is the sidebar menu displaying in-correctly using the 'Custom' widget.

I've searched the forums for a solution but couldn't find anything the made the 'custom menu' look and function like the 'Awake Sub Navigation' widget.

I tried this solution but it would not display the currently selected item. http://mysitemyway.com/support/topic/sidebar-styles-for-new-widgets

Any advice would be massively appreciated.

Many thanks

Will
Attachments
image_002.jpg (40.1 KB, 1 downloads) 1 year old
image_001.jpg (27.3 KB, 1 downloads) 1 year old
Posted 1 year ago #
Elliott
Support

Hello pearson,

Try the solution in this thread and let us know if it works for you,

http://mysitemyway.com/support/topic/category-widget-css

Posted 1 year ago #
pearson
Member
Hi Elliot

Thanks for looking into this for me. I added to code to the css but it didn't work.

Here is a screen shot of how it looked.
Attachments
Screen_shot_2010-12-06_at_16.19.37.jpg (143.4 KB, 0 downloads) 1 year old
Posted 1 year ago #
Elliott
Support

Sorry, I forgot that CSS was for inFocus.

From looking at your image though it seems to be looking correct besides the left indention.

Go ahead and send us a link to your page if possible and let us know if you want additional styles for it etc etc.

Posted 1 year ago #
pearson
Member

Hi Elliott

The site is password protected for the time being (not allowed to send out password), thanks for the offer though. Are you able to work it out from my description / images above? Let me know if there is anything I can do to better articulate the requirement.

Thanks again

Will

Posted 1 year ago #
Elliott
Support

Adding this line should give them the correct padding,

.widget_nav_menu div ul li a { position: relative; display: inline-block; padding-top: 5px; padding-bottom: 5px; }

They seem to display fine on my end, Was there some other way you wanted to style them pearson?

Posted 1 year ago #
pearson
Member
Hi Elliott

The css outlined in your previous email is good for the padding / spacing but not the awake styling.

This css is good for the look of the awake menu -

.widget_nav_menu div ul li a { position: relative; display: inline-block; padding-top: 5px; padding-bottom: 5px; }

I'm trying to have the currently selected marker + awake styling as in this image.
Attachments
image_002.jpg.resize.jpeg (22.5 KB, 1 downloads) 1 year old
Posted 1 year ago #

Elliott
Support

Ahh I see now,

Go ahead and delete any previous changes we did and add these lines in your style.css file,

.right_sidebar #sidebar .widget_nav_menu{ padding-left:0px !important;}
.right_sidebar #sidebar .widget_nav_menu .widgettitle{ padding-left:30px; }
.right_sidebar #sidebar .widget_nav_menu div li a{ display:block; padding:5px 0 5px 30px; }
.right_sidebar #sidebar .widget_nav_menu div li{background: url(styles/_shared/li.png) no-repeat scroll 30px bottom transparent;}
.right_sidebar #sidebar .widget_nav_menu div li.current_page_item a{background: url(styles/_shared/subnav_active.png) no-repeat scroll 0px top transparent;}
.left_sidebar #sidebar .widget_nav_menu{ padding-right:0px; !important;}
.left_sidebar #sidebar .widget_nav_menu .widgettitle{ padding-right:30px; }
.left_sidebar #sidebar .widget_nav_menu div li a{ display:block; padding:5px 30px 5px 0; }
.left_sidebar #sidebar .widget_nav_menu div li{background: url(styles/_shared/li.png) no-repeat scroll 0 bottom transparent;}
.left_sidebar #sidebar .widget_nav_menu div li.current_page_item a{background: url(styles/_shared/subnavL_active.png) no-repeat scroll right top transparent;}

Let us know if that works for you pearson.

Posted 1 year ago #

pearson
Member

Elliott is Boss! Thanks loads for that =)

I made a couple of small changes (only on the left hand)

.right_sidebar #sidebar .widget_nav_menu{ padding-left:0px !important;}
.right_sidebar #sidebar .widget_nav_menu .widgettitle{ padding-left:30px; }
.right_sidebar #sidebar .widget_nav_menu div li a{ display:block; padding:5px 0 5px 30px; }
.right_sidebar #sidebar .widget_nav_menu div li{background: url(styles/_shared/li.png) no-repeat scroll 30px bottom transparent;}
.right_sidebar #sidebar .widget_nav_menu div li.current_page_item a{background: url(styles/_shared/subnav_active.png) no-repeat scroll 0px top transparent;}
.left_sidebar #sidebar .widget_nav_menu{ padding-right:0px;
	width: 195px;
}
.left_sidebar #sidebar .widget_nav_menu .widgettitle{ padding-right:10px; }
.left_sidebar #sidebar .widget_nav_menu div li a{ display:block; padding: 5px 10px 5px 0; }
.left_sidebar #sidebar .widget_nav_menu div li{background: url(styles/_shared/li.png) no-repeat scroll 0 bottom transparent;}
.left_sidebar #sidebar .widget_nav_menu div li.current_page_item a{background: url(styles/_shared/subnavL_active.png) no-repeat scroll right top transparent;
}

Posted 1 year ago #

Elliott
Support

Glad that worked for you pearson, if you have any other questions then let us know.

Posted 1 year ago #
bsmity
Member
I made these changes to my Awake styles.css and it is not displaying the currently selected menu item. Not sure if this code that I used is still pertinent to the latest theme (2.1)

Am I missing something here?
Attachments
Screen-shot-2011-08-09-at-2.43.jpg (56.4 KB, 3 downloads) 9 months old
Posted 9 months ago #
Elliott
Support

This was for Awake 1.3 bsmithy. If your using 2.0+ then send us a link to your site and we'll take a look to see if we can get this added.

Posted 9 months ago #
bsmity
Member

Thanks for the quick response. Here is url: http://www.halffulldesign.com/logo/

Posted 9 months ago #
Elliott
Support
Alrighty, this is kind of complex but we'll try it for now.

Navigate to Dashboard -> Awake -> General Settings and add this in the custom javascript section,
```
jQuery('.mysite_subnav_widget ul').addClass('fancy_list');
jQuery('.mysite_subnav_widget li').addClass('arrow_list');
```
And this in the custom CSS section,

.mysite_subnav_widget .fancy_list .arrow_list {background:url(images/shortcodes/sprites/custom_sprite_dddddd.png) no-repeat -303px -320px !important;}

You'll notice the icon path is set to "images/shortcode/sprites/custom_sprite_dddddd.png". What you'll want to do is open up that directory, /images/shortcode/sprites/ and find the correct sprite pattern you want to use and then make sure the icon path points to it.
Posted 9 months ago #
bsmity
Member

Thanks Elliot but that did not work for me. It's still not displaying the currently selected menu item.
CSS
.mysite_subnav_widget .fancy_list .arrow_list {background:url(/images/shortcodes/sprites/custom_sprite_00437f.png) no-repeat -303px -320px !important;}

JQuery
jQuery('.mysite_subnav_widget ul').addClass('fancy_list'); jQuery('.mysite_subnav_widget li').addClass('arrow_list');

any thoughts on this?

Thanks in advance,
B

Posted 9 months ago #
Elliott
Support

If possible then send us a link to the page where your using it.

Posted 9 months ago #
bsmity
Member

Here is the link:
http://www.halffulldesign.com/about/team/

Posted 9 months ago #
Elliott
Support

That appears to be a custom menu widget instead of our subnav widget.

Try adding this in Dashboard -> Awake -> General Settings -> Custom Javascript,

jQuery('.widget_nav_menu ul').addClass('fancy_list');

I think that should get the arrows up but we may need to play around with the CSS a bit to get them perfect.

Posted 9 months ago #
bsmity
Member

This added arrows to the left of the text, I am looking to get the same look as this page:
http://themes.mysitemyway.com/awake/features/features-overview/

with the active menu for current page.

I hope I am making sense.

Posted 9 months ago #
Elliott
Support

To get the look on that page then you'll need to use the "Feature Tour" template. http://mysitemyway.com/docs/index.php?title=Page_Templates

Posted 9 months ago #
bsmity
Member

Thanks Elliot!

Posted 9 months ago #