By seismicmike on

Hey. I apologize if this seems obvious to anyone. I'm a noob.

Does anyone know if there is any way to use button images for the primary links (like as in sliced up images from a photoshop layout). My 'client' used an obscure font for the navigation and not wanting to force font downloads, I think images would be the best way to go. Is there any way to do this?

Would a custom block do it? Would I need to create a custom module?

Any help would be greatly appreciated! Thanks in advance.

⋅ Categories: Drupal 5.x

Comments

timmillwood’s picture

timmillwood
Primary language English
Location 🏴󠁧󠁢󠁷󠁬󠁳󠁿 Wales, UK
commented

You would do it by editing the CSS.

Create a menu, then in the theme files add the image as the background in the CSS.

nevets’s picture

nevets commented

Sounds like you want to check out the Dynamic Rendering module which using sIFR allows for dynamic replacement of text using a specific font.

pbarnett’s picture

pbarnett commented

Hi.

Take a look at the code in one of the themes that uses a navigation bar for the primary links; there are quite a few.

You'll need to examine the theme's page.tpl.php and style.css to see how it's done.

Then use firebug to show you the CSS id's for each button and edit your theme's CSS accordingly.

Pete.

avangelist’s picture

avangelist commented

I would suggest looking at all the possible options for using background images for links, it is always advised to use background images and utilising the existing text strings for w3c standards and screen reader compatibility.

I have an example of how to implement the sprint technique on my website www.avangelistphotography.com look at the css and the source code for the top navigation list to see how this has been done using just one image which saves hassle with multiple image files but removes the use of original link text.

Web Developer
Music Photographer

seismicmike’s picture

seismicmike commented

If I was going to use CSS, I would need to customize the menu function in order to include id's, right?

pbarnett, can you give me an example of a theme that does this that I could download and look at?

Thanks guys.

With tremors,
SeismicMike

pbarnett’s picture

pbarnett commented

This is the chap to override, I suspect; it's in includes/menu.inc, along with a few other useful themeable functions.

Pete.

seismicmike’s picture

seismicmike commented

Thanks Pete! That's a huge step in the right direction.

With tremors,
SeismicMike

pbarnett’s picture

pbarnett commented 
function phptemplate_menu_links($links) {
  if (!count($links)) {
    return '';
  }
  $level_tmp = explode('-', key($links));
  $level = $level_tmp[0];
  $output = "<ul class=\"links-$level\">\n";
  foreach ($links as $index => $link) {
    $output .= '<li';
    $class = str_replace('-active','',$index);
    if (stristr($index, 'active')) {
      $class .= ' active';
    }
    $output .= " class=\"$class\"";
    $output .= ">". l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']) ."</li>\n";
  }
  $output .= '</ul>';

  return $output;
}
avangelist’s picture

avangelist commented

Thanks for that coding, I can see what that is acheiving, I am not sure it will explain how you put links in a specific order though, or will it?

Web Developer
Music Photographer

pbarnett’s picture

pbarnett commented

The link ordering is determined by the item weights in the menu; the code is simply assigning a unique and sequential class for each link. Try it, and use Firebug to show the difference; the original code makes all the links the same class so you can't assign anything (background image, colour etc) to an individual link.

Pete.

chlobe’s picture

chlobe commented

interested

Athaclena’s picture

Athaclena commented

I was trying to figure out how to add ids to the links but didn't manage.
I think there was a howto somewhere which didn't work...
Thanks

pbarnett’s picture

pbarnett commented

Give me a shout if you need any further help with this...

Pete.