<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
Sure, glad to provide it. Here's how my theme function ended up:
<br>
<br>
function mytheme_menu_links($links) {
<br>
global $base_path;
<br>
$directory = drupal_get_path('theme','mytheme');
<br>
if (!count($links)) {
<br>
return '';
<br>
}
<br>
$level_tmp = explode('-', key($links));
<br>
$level = $level_tmp[0];
<br>
$output = "<ul class=\"links-$level\">\n";
<br>
foreach ($links as $index => $link) {
<br>
$link['html'] = TRUE;
<br>
$output .= '<li';
<br>
if (stristr($index, 'active')) {
<br>
$output .= ' class="active"';
<br>
}
<br>
switch ($link['title']){
<br>
case "Home":
<br>
$button = "<img
src=\"".$base_path.$directory."/images/btn_home.jpg\"
height=\"40\">";
<br>
$img_class = "home";
<br>
break;
<br>
case "About the Center":
<br>
$button = "<img
src=\"".$base_path.$directory."/images/btn_about.jpg\">";
<br>
$img_class = "about";
<br>
break;
<br>
case "Sponsors":
<br>
$button = "<img
src=\"".$base_path.$directory."/images/btn_sponsors.jpg\">";
<br>
$img_class = "sponsors";
<br>
break;
<br>
case "Board of Directors":
<br>
$button = "<img
src=\"".$base_path.$directory."/images/btn_board.jpg\">";
<br>
$img_class = "board";
<br>
break;
<br>
case "Resources":
<br>
$button = "<img
src=\"".$base_path.$directory."/images/btn_resources.jpg\">";
<br>
$img_class = "resources";
<br>
break;
<br>
case "News":
<br>
$button = "<img
src=\"".$base_path.$directory."/images/btn_news.jpg\">";
<br>
$img_class = "news";
<br>
break; case "Store":
<br>
$button = "<img
src=\"".$base_path.$directory."/images/btn_store.jpg\">";
<br>
$img_class = "store";
<br>
break;
<br>
case "Contact":
<br>
$button = "<img
src=\"".$base_path.$directory."/images/btn_contact.jpg\">";
<br>
$img_class = "contact";
<br>
break; }
<br>
$output .= ' class = "';
<br>
$output .= $img_class;
<br>
$output .= '">'. l($button, $link['href'], $link['attributes'],
$link['query'], $link['fragment'], $link['absolute'], $link['html'])
."</li>\n";
<br>
}
<br>
$output .= '</ul>';
<br>
<br>
return $output;
<br>
}
<br>
<br>
It's probably not as pretty as it could be since I hardcoded the image
names for the buttons, but I'm not real good with regex stuff, so this
will do. Also, one thing that is left out in this chain was that I had
to add the $link['html'] parameter to the l() function (it's at the top
of the for loop to generate each item) so that my <img> tags
would be written out as HTML. Notice that I also added a class to the
<li> tag for each item so that I could specifically target it
with CSS.
<br>
<br>
Another interesting thing that I discovered has to do with the CSS to
display the buttons. For some reason (and if somebody could explain
this, that would be great), getting the buttons to display inline
without any spaces between them didn't work with this CSS:
<br>
<br>
ul.links-menu li {
<br>
display:inline;
<br>
list-style-type:none;
<br>
}
<br>
<br>
This left spaces between the images (making it too wide for the page),
even when there was no padding or margins set on any of the selectors.
With the help of a designer friend of mine, I changed it to
<br>
<br>
ul.links-menu li {
<br>
display:block;
<br>
float:left;
<br>
list-style-type:none;
<br>
}
<br>
<br>
and they display just fine.
<br>
<br>
As for the mouseover functionality, I haven't been able to get that to
work yet. I've tried using a:hover with my class selector that I
added, like this:
<br>
<br>
li.home a:hover {
<br>
background-image: url(images/btn_homeup.jpg);
<br>
}
<br>
<br>
but no dice. If anyone has a suggestion for doing this, I'm all ears.
<br>
<br>
Steve
<br>
<br>
<br>
Brett Evanson wrote:
<blockquote
cite="mid:972255370803281455v293690feu2bf33bf72db47c1d@mail.gmail.com"
type="cite">Steve,<br>
<br>
I'm trying to do something just like this, and I was wondering if you
had a chunk of code you wouldn't mind sharing? Also, did you get the
mouse over to work? I could help with that, if I had something to start
with. I have done this, but I've always done it as a hack, and not as a
theme function.<br>
<br>
Brett Evanson<br>
<br>
<div class="gmail_quote">On Mon, Mar 24, 2008 at 10:04 AM, Steve
Edwards <<a moz-do-not-send="true"
href="mailto:killshot91@comcast.net">killshot91@comcast.net</a>>
wrote:<br>
<blockquote class="gmail_quote"
style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">Actually,
that's what I did. I put a copy of theme_menu_links() in<br>
template.php and renamed it to mytheme_menu_links(), and then in<br>
page.tpl.php I changed it to<br>
<br>
theme('menu_links', $primary_links);<br>
<br>
and that's worked pretty well. Now all I have to do is get a mouseover<br>
effect to work and get the images aligned properly.<br>
<br>
If anybody is curious to see this and has any suggestions, I'm working<br>
on the page at <a moz-do-not-send="true"
href="http://dev.capusfiresafety.org" target="_blank">http://dev.capusfiresafety.org</a>
(Drupal), and trying to<br>
get it to look like <a moz-do-not-send="true"
href="http://www.campusfiresafety.org" target="_blank">http://www.campusfiresafety.org</a>
(non-Drupal).<br>
<br>
Thanks.<br>
<font color="#888888"><br>
Steve<br>
</font>
<div>
<div class="Wj3C7c"><br>
Eric McKenna wrote:<br>
> use theme_image to create your image source. For the path, use<br>
> path_to_theme() . "/images/yourimage.png"<br>
><br>
> Another option entirely, is to create your own theming function. I<br>
> like to do this when I have a totally separate primary links
section.<br>
><br>
> themename_do_my_links($links) { ... }<br>
><br>
> then in page.tpl.php file use theme("do_my_links", $primary_links)
for<br>
> the main nav items<br>
><br>
> This makes it easy to separate display of your primary links with
any<br>
> other menus you have.<br>
><br>
><br>
> On Mon, Mar 24, 2008 at 10:25 AM, Steve Edwards <<a
moz-do-not-send="true" href="mailto:killshot91@comcast.net">killshot91@comcast.net</a>>
wrote:<br>
><br>
>> I tried doing that, but I haven't had any luck with that.
Would I use<br>
>> the background-image property for the list item? Or is there
a better<br>
>> property to use?<br>
>><br>
>> Steve<br>
>><br>
>><br>
>><br>
>> Michael Prasuhn wrote:<br>
>> > While this isn't exactly the answer to your question,
which I see that<br>
>> > you found on your own. I would definitely recommend
doing the image<br>
>> > replacement via CSS, so that print and screen reading
versions of your<br>
>> > site don't have any loss of experience. In my experience
this also is<br>
>> > better for browsers that have images turned off as well.<br>
>> ><br>
>> > -Mikey P<br>
>> ><br>
>> ><br>
>> > On Mar 23, 2008, at 2:26 PM, Steve Edwards wrote:<br>
>> ><br>
>> >> I'm trying to edit my primary links menu to replace
the text with a<br>
>> >> button image, and I'm having a problem with getting
my <img><br>
>> >> tag to display. I've overridden the
theme_menu_links() function in<br>
>> >> template.php, and it looks like what I need to do is
replace<br>
>> >> $link['title'] with the <img> tag. To do
this, I added this line to<br>
>> >> the function:<br>
>> >><br>
>> >> $link['title'] = "<img
src=\"images/btn_home.jpg\">";<br>
>> >><br>
>> >> However, the whole tag is displayed as text on the
page, and when I<br>
>> >> view source, this is what I see for the link:<br>
>> >><br>
>> >> <li><a href="/drupal57/" title="Home page"
class="active">&lt;img<br>
>> >>
src=&#039;images/btn_home.jpg&#039;&gt;</a></li><br>
>> >><br>
>> >> I don't understand this, because in other places in
the function,<br>
>> >> that is how tags are written out in the code. What
do I need to<br>
>> >> change to get the actual quotes and < >
symbols written out<br>
>> >> correctly?<br>
>> >><br>
>> >> Thanks.<br>
>> >><br>
>> >> Steve<br>
>> >> --<br>
>> >> [ Drupal support list | <a moz-do-not-send="true"
href="http://lists.drupal.org/" target="_blank">http://lists.drupal.org/</a>
]<br>
>> >><br>
>> ><br>
>> > __________________<br>
>> > Michael Prasuhn<br>
>> > <a moz-do-not-send="true" href="mailto:mike@mikeyp.net">mike@mikeyp.net</a><br>
>> > <a moz-do-not-send="true" href="http://mikeyp.net"
target="_blank">http://mikeyp.net</a><br>
>> > 949.200.7595<br>
>> > 714.356.0168 cell<br>
>> > 949.200.7670 fax<br>
>> ><br>
>> ><br>
>> ><br>
>> --<br>
>> [ Drupal support list | <a moz-do-not-send="true"
href="http://lists.drupal.org/" target="_blank">http://lists.drupal.org/</a>
]<br>
>><br>
>><br>
--<br>
[ Drupal support list | <a moz-do-not-send="true"
href="http://lists.drupal.org/" target="_blank">http://lists.drupal.org/</a>
]<br>
</div>
</div>
</blockquote>
</div>
<br>
<br clear="all">
<br>
-- <br>
Brett Evanson<br>
<a moz-do-not-send="true" href="mailto:brettev@gmail.com">brettev@gmail.com</a><br>
801-599-0584
</blockquote>
</body>
</html>