WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: Chaploo on November 03, 2008, 11:46:45 AM

Title: #SOLVED# Different menu images: how to format show_menu2 output?
Post by: Chaploo on November 03, 2008, 11:46:45 AM

Hi everybody,

I tried to put different background images to every menu item on a multilanguage WB 2.7 site and finally ended - after studying the several threads to this topic in the forum - with this:

Code: [Select]

<div id="menu"><?php show_menu2(0, SM2_ROOT+1, SM2_CURR+1, SM2_TRIM,&#39;<li><a class="[page_id]">[menu_title]</a>&#39;, &#39;</li>&#39;, &#39;<ul>&#39;, &#39;</ul>&#39;); ?>

which gives me a fine html output of

Code: [Select]

<div id="menu"><ul><li class="33"><a href="http://www.example.de/pages/de/test.php" target="_top">Test</a></li>
But unfortunately I can't find a way to format this link via css. I tried

Code: [Select]

#menu li .33 a {
text-align:right;
font-size: 16px;
font-weight:bold;
color:#cc0000;
background:url(image.gif) top right no-repeat;
margin:0;
padding-right:20px;
height:30px;
line-height:30px;
text-decoration:none;
border-top:1px solid #fff;
display:block;
}

with different variations. But nothing seems to work. Does anybody know why?  :?

I know, this is more like a css questions, but it seems like it has to do with the show_menu2 code, so I desperately hope I can find answers in this forum.  :-)

Thanks in advance,
regards
Jochen

Title: Re: Different menu images: how to format show_menu2 output?
Post by: Ruud on November 03, 2008, 11:59:45 AM

What you are describing should work.
What you are not describing might be the problem ;-)
Other CSS data might overwrite this selector.

Do you have a link where we can have a look?
(Don't just post your complete CSS. That would require to setup a site like yours before someone is able to debug)

Ruud

Title: Re: Different menu images: how to format show_menu2 output?
Post by: Chaploo on November 03, 2008, 12:31:22 PM

Thanks for your reply.

You can view the site on my test Wb system:

http://www.internet-service-berlin.de/wb27/pages/de/startseite.php (http://www.internet-service-berlin.de/wb27/pages/de/startseite.php)

(Don't use the links underneath the main menu, they are connected to another site.)

Regards
Jochen

Title: Re: Different menu images: how to format show_menu2 output?
Post by: Ruud on November 03, 2008, 02:04:26 PM

Currently there are no CSS selectors for those classes in your stylesheet.

Can you add the #menu li.33 a { part again? (also remove the whitespace between li and .33)

Ruud

Title: Re: Different menu images: how to format show_menu2 output?
Post by: Chaploo on November 03, 2008, 02:58:15 PM

Quote from: Ruud on November 03, 2008, 02:04:26 PM

Currently there are no CSS selectors for those classes in your stylesheet.

Which ones do yo mean?

The url to the css file is
http://www.internet-service-berlin.de/wb27/templates/zeuthen_de/screen.css (http://www.internet-service-berlin.de/wb27/templates/zeuthen_de/screen.css)

I removed the space, but no effect.  :-(

Regards
Jochen

Title: Re: Different menu images: how to format show_menu2 output?
Post by: Ruud on November 03, 2008, 03:11:48 PM

The problem is that - according to the CSS specs (http://www.w3.org/TR/CSS21/syndata.html#characters) - a class id cannot start with a numeric value.

If you add just a fixed character in your show_menu2 call (generating class="c33") and do the same for your CSS it will work (without the whitespace!)

Ruud

Title: Re: Different menu images: how to format show_menu2 output?
Post by: Chaploo on November 03, 2008, 03:19:29 PM

GREAT!!! It works!

Thank you so much!

Regards
Jochen