[support] HTML displayed as text
Steve Edwards
killshot91 at comcast.net
Fri Mar 28 23:13:49 UTC 2008
Sure, glad to provide it. Here's how my theme function ended up:
function mytheme_menu_links($links) {
global $base_path;
$directory = drupal_get_path('theme','mytheme');
if (!count($links)) {
return '';
}
$level_tmp = explode('-', key($links));
$level = $level_tmp[0];
$output = "<ul class=\"links-$level\">\n";
foreach ($links as $index => $link) {
$link['html'] = TRUE;
$output .= '<li';
if (stristr($index, 'active')) {
$output .= ' class="active"';
}
switch ($link['title']){
case "Home":
$button = "<img
src=\"".$base_path.$directory."/images/btn_home.jpg\" height=\"40\">";
$img_class = "home";
break;
case "About the Center":
$button = "<img
src=\"".$base_path.$directory."/images/btn_about.jpg\">";
$img_class = "about";
break;
case "Sponsors":
$button = "<img
src=\"".$base_path.$directory."/images/btn_sponsors.jpg\">";
$img_class = "sponsors";
break;
case "Board of Directors":
$button = "<img
src=\"".$base_path.$directory."/images/btn_board.jpg\">";
$img_class = "board";
break;
case "Resources":
$button = "<img
src=\"".$base_path.$directory."/images/btn_resources.jpg\">";
$img_class = "resources";
break;
case "News":
$button = "<img
src=\"".$base_path.$directory."/images/btn_news.jpg\">";
$img_class = "news";
break; case "Store":
$button = "<img
src=\"".$base_path.$directory."/images/btn_store.jpg\">";
$img_class = "store";
break;
case "Contact":
$button = "<img
src=\"".$base_path.$directory."/images/btn_contact.jpg\">";
$img_class = "contact";
break; }
$output .= ' class = "';
$output .= $img_class;
$output .= '">'. l($button, $link['href'], $link['attributes'],
$link['query'], $link['fragment'], $link['absolute'], $link['html'])
."</li>\n";
}
$output .= '</ul>';
return $output;
}
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.
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:
ul.links-menu li {
display:inline;
list-style-type:none;
}
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
ul.links-menu li {
display:block;
float:left;
list-style-type:none;
}
and they display just fine.
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:
li.home a:hover {
background-image: url(images/btn_homeup.jpg);
}
but no dice. If anyone has a suggestion for doing this, I'm all ears.
Steve
Brett Evanson wrote:
> Steve,
>
> 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.
>
> Brett Evanson
>
> On Mon, Mar 24, 2008 at 10:04 AM, Steve Edwards
> <killshot91 at comcast.net <mailto:killshot91 at comcast.net>> wrote:
>
> Actually, that's what I did. I put a copy of theme_menu_links() in
> template.php and renamed it to mytheme_menu_links(), and then in
> page.tpl.php I changed it to
>
> theme('menu_links', $primary_links);
>
> and that's worked pretty well. Now all I have to do is get a
> mouseover
> effect to work and get the images aligned properly.
>
> If anybody is curious to see this and has any suggestions, I'm working
> on the page at http://dev.capusfiresafety.org (Drupal), and trying to
> get it to look like http://www.campusfiresafety.org (non-Drupal).
>
> Thanks.
>
> Steve
>
> Eric McKenna wrote:
> > use theme_image to create your image source. For the path, use
> > path_to_theme() . "/images/yourimage.png"
> >
> > Another option entirely, is to create your own theming function. I
> > like to do this when I have a totally separate primary links
> section.
> >
> > themename_do_my_links($links) { ... }
> >
> > then in page.tpl.php file use theme("do_my_links",
> $primary_links) for
> > the main nav items
> >
> > This makes it easy to separate display of your primary links
> with any
> > other menus you have.
> >
> >
> > On Mon, Mar 24, 2008 at 10:25 AM, Steve Edwards
> <killshot91 at comcast.net <mailto:killshot91 at comcast.net>> wrote:
> >
> >> I tried doing that, but I haven't had any luck with that.
> Would I use
> >> the background-image property for the list item? Or is there
> a better
> >> property to use?
> >>
> >> Steve
> >>
> >>
> >>
> >> Michael Prasuhn wrote:
> >> > While this isn't exactly the answer to your question, which
> I see that
> >> > you found on your own. I would definitely recommend doing
> the image
> >> > replacement via CSS, so that print and screen reading
> versions of your
> >> > site don't have any loss of experience. In my experience
> this also is
> >> > better for browsers that have images turned off as well.
> >> >
> >> > -Mikey P
> >> >
> >> >
> >> > On Mar 23, 2008, at 2:26 PM, Steve Edwards wrote:
> >> >
> >> >> I'm trying to edit my primary links menu to replace the
> text with a
> >> >> button image, and I'm having a problem with getting my <img>
> >> >> tag to display. I've overridden the theme_menu_links()
> function in
> >> >> template.php, and it looks like what I need to do is replace
> >> >> $link['title'] with the <img> tag. To do this, I added
> this line to
> >> >> the function:
> >> >>
> >> >> $link['title'] = "<img src=\"images/btn_home.jpg\">";
> >> >>
> >> >> However, the whole tag is displayed as text on the page,
> and when I
> >> >> view source, this is what I see for the link:
> >> >>
> >> >> <li><a href="/drupal57/" title="Home page"
> class="active"><img
> >> >> src='images/btn_home.jpg'></a></li>
> >> >>
> >> >> I don't understand this, because in other places in the
> function,
> >> >> that is how tags are written out in the code. What do I
> need to
> >> >> change to get the actual quotes and < > symbols written out
> >> >> correctly?
> >> >>
> >> >> Thanks.
> >> >>
> >> >> Steve
> >> >> --
> >> >> [ Drupal support list | http://lists.drupal.org/ ]
> >> >>
> >> >
> >> > __________________
> >> > Michael Prasuhn
> >> > mike at mikeyp.net <mailto:mike at mikeyp.net>
> >> > http://mikeyp.net
> >> > 949.200.7595
> >> > 714.356.0168 cell
> >> > 949.200.7670 fax
> >> >
> >> >
> >> >
> >> --
> >> [ Drupal support list | http://lists.drupal.org/ ]
> >>
> >>
> --
> [ Drupal support list | http://lists.drupal.org/ ]
>
>
>
>
> --
> Brett Evanson
> brettev at gmail.com <mailto:brettev at gmail.com>
> 801-599-0584
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.drupal.org/pipermail/support/attachments/20080328/da9d3d5c/attachment.htm
More information about the support
mailing list