BlogsWeek.com

you rock! keep up this awesome work! peace

This is cool new feature. I’m using Superfish without CSS with older version (the version before 4.5). I noticed that there are new menu templates for SuperFish that utilize images.

Are they coming?

1. Will I be able to use images using a template without CSS?

2. Have you looked at this site? Can this menu effect be achieved using the image feature in the new release?

Thanks a lot for your continued support of the plugin. I love it.

Best.
Joe

Forgot to add the site for point # 2:

The site is at http://chrispederick.com/work/web-developer/features/

It uses images and the menu options span two lines.

It look pretty neat!

Hi Joe,

yes, I’m working to add images to Superfish and other templates as well. Regarding your other questions:

1. Yes, you can use templates with images “without CSS” (that is, using the theme CSS instead of the template CSS);

2. I think so, but you’ll need to tweak the template a bit, like you did with your other two-line menu items!

Hi Andrea,
Thanks for your reply. It would be great if the image option you provide can take the height and width parameter so instead of 16 x 16, we can add larger images (say 32 x 32) esp when the a single menu item will span two rows.

Also the image is essentially between two A tags e.g. IMAGE

Is it possible to have the image to either left or right of the menu item text? It will make the image align better and stand on its own. Again if you look at the menu at http://chrispederick.com/work/web-developer/features/ you will get a sense of why I’m asking for these.

I will be glad to clarify further if you need me to but I think additions like these will make the plugin even more potent and lethal

Take care!

Hello Joe,

all the menu HTML is defined in the template PHP file wpm3.php. It’s not documented (yet) but it’s not difficult to understand and modify.

For instance you can easily move the image to the right of the text (lines 49 and 63, replace %image%name with %name%image) and you can modify the height and width parameter of the image (line 55).

The Name field accepts HTML too, so you could put the two menu lines there, e.g. if your menu name is

Blog

you can make it

Blog <p>read my blog</p>

and style the <p> properly. So I think you could achieve the result you need, playing a bit with the template. Anyway I’m looking forward to implementing your suggestion in one of the next Menubar updates.

Thanks for your feedback!

Hi Andrea,
Thanks for letting me know the trick to customization, that’s a great idea. I will play with it and report back.

Just so that you know, I upgraded to latest version (4.5) and used suckerfish without CSS, it showed the image option. I had used superfish without css before the upgrade.

After the upgrade, the existing settings were not affected, which is good.

I wish there was an edit comment option so I wouldn’t clutter your site with repeated corrections

The comment above got messed up because of embedded html and php. I have taken screenshots of the code, so have a look at them to get a better sense of what I’m trying to do.

The menu look on my local wordpress theme:

http://img85.imageshack.us/img85/6736/menutwolines.png

HTM code that I think describes my approach with tables, I would like to avoid using tables but achieve same effect using css or DIV.

http://img340.imageshack.us/img340/1859/htmlcode.jpg

Changes in the wpm3.php:
http://img44.imageshack.us/img44/5203/phpcode.jpg

Hi Joe,

I removed the messed up comment, the trick to pass the WordPress filter is to replace the HTML tag character ‘<‘ with ‘& lt;’ (without the space).

You are making good progress, I know that CSS styling is a lenghty process, because we have to test it in many browsers and some are really nasty…

Hi again,

I would like to be able to have a different hover color on each submenu at http://blueyonderranch.com. Right now, they are all gray, but I would like to have a unique hover color to go with each of the primary colors of the top menu. I can’t seem to figure it out. I assume this is the statement that I have to repeat for each one.

.ssf-blue li li:hover, .ssf-blue li li.wpm-hover,
.ssf-blue li li a:focus, .ssf-blue li li a:hover, .ssf-blue li li a:active {
background: #d1d1d1; /* #a5d8ff; /* color 3 */

Thanks for your excellent support of Menubar.

Hi Rick,

you are right, just repeat that statement for each top menu item, like this:

.ssf-blue li.shop li:hover, .ssf-blue li.shop li.wpm-hover,
.ssf-blue li.shop li a:focus, .ssf-blue li.shop li a:hover, .ssf-blue li.shop li a:active {
background: yellow; /* #a5d8ff; /* color 3 */

Remember each time to change the class (.shop) and the color (yellow)!

Wow! It’s working great! I also had to make a new hover image for each of the top menu items and change the code like this example:

.blog li:hover, .blog li.wpm-hover,
.blog a:focus, .blog a:hover, .blog a:active {
text-decoration: none;
background: url(‘blu-6DC1E8.png’) no-repeat;
outline: 0;
}

Hello,

Thank you for your help and your very good tool.
I use WordPress but I have a problem with the dropdown in IE7.

My Dropdown menu works very well with Mozilla Firefox but it is hidden by the Featured Gallery Content in IE7

Thanks for help
Arno

Hello Arno,

I need a link to your test site to look at the problem. Please let me know!

Hello,

First off – an amazing plugin with incredible versatility and customization. Great work!

I have a problem with the menu showing up in IE 8. It works fine in Chrome and FF but just does not appear in IE. I’m not that proficient at PHP or CSS so any help would be appreciated!

The site is at:
http://subtlism.servsuit.com/wordpress/

Thanks in advance

Lev

Hello Lev,

I can see your menu in IE8, try reloading the page or clearing the cache. If that doesn’t help, please let me know!

Ah, thank you Andrea! Clearing the cache did the trick.

Hi Andrea,
I would love to hear your thoughts on my troubles with images. I’m still interested in using the images with text spanning two lines for single menu item.

Would love to hear what you have in store about how I could achieve that. Please have a look at my comments above Rick’s.

Thanks

Hi Joe,

I spent some time to try and find a suitable solution, but I wasn’t able to find one, otherwise I would have shared it.

My opinion is that it’s best to use a single image, containing the icon and the two lines of text, to make it work in all browsers (like http://www.jasonvanorden.com ) instead of using separate elements (like http://chrispederick.com, almost perfect but not so in IE6).

Thanks Andrea. That may be the best solution for now. I may just make all images with shades and text.

Great addition! Have been hoping there would be a way to do this with custom css but you’re way ahead of me! Keep up the good work!