Adding images to secondary links
Last modified: August 23, 2009 - 21:13
Here is an example of customizing the links to add an image to the titles. Specifically, in this example, I wanted to add images to the secondary links.
In order to get secondary links working, I set up a primary_links menu in admin/build/menu and set my primary and secondary links to point to it under admin/build/menu/settings.
In page.tpl.php
<?php if (isset($secondary_links)):?>
<div id="secondary">
<?php print custom_theme_links($secondary_links); ?>
</div>
<?php endif; ?>In template.php
function custom_theme_links($links) {
if (count($links) > 0)
{
foreach ($links as $key => $link)
{
// add the image
$customtitle = '<img alt="" src="' . path_to_theme() . '/images/bullet.gif"/>';
$customtitle .= $link['title'];
$link['title'] = $customtitle;
$link['html'] = TRUE;
$links[$key] = $link;
}
}
return theme('links',$links);
}This css will display them horizontally and keep the titles from breaking in a line -
In style.css in my custom theme directory:
#secondary li {
list-style: none;
display: inline;
}
#secondary a {
font-size:90%;
word-spacing: -1;
white-space: nowrap;
margin-right: 10px;
}.. and some other formatting ...
#secondary ul {
margin: 0 0;
padding-left: 0;
}
#secondary a.active {
color: #A5D3AE;
font-weight : bold;
}
#secondary img{
border-style:none;
margin-right: 5px;
}
Modify to add different images beside each link?
This is a very old post, so I'm not sure if this even applies or will be read, but is there a way to modify the "img src" code so that a different image can be placed beside each link?
Thanks!
testing testing