By drupaceous on

Hello,

When in friendselectric I hover over one of the primary links, the background is colored and the corners are rounded:

http://themes.drupal.org/node?theme=friendselectric

How is this effect (rounding of the corners) accomplished? I looked at the CSS but I couldn't find anything.

Thanks,

⋅ Categories: Drupal 4.7.x

Comments

benbruscella’s picture

benbruscella commented

For this type of stuff, use firefox and install the firebug plugin.

https://addons.mozilla.org/firefox/1843/

It tells me that its defined in style.css, line 200:

#top-nav ul li a .lw1 {
display: block;
position: relative;
_width: 1px;
background: url(nav-right.png) no-repeat 100% -100px;
}
#top-nav ul li a .lw2 {
padding: 2px 5px;
display: block;
position: relative;
_width: 1px;
cursor: pointer;
background: url(nav-left.png) no-repeat 0% -100px;
}
#top-nav ul li a:hover .lw1 {
background: url(nav-right.png) no-repeat 100% 0px;
}
#top-nav ul li a:hover .lw2 {
background: url(nav-left.png) no-repeat 0% 0px;
}

It also shows you the images used:
http://themes.drupal.org/themes/contribs/friendselectric/nav-left.png

Hope that helps?

drupaceous’s picture

drupaceous commented

thanks, it's gonna take some time before I'm able to understand what happens there, including the override in template.php:

function phptemplate_wrap_links($link, $n) {
  $classes = array("lw1", "lw2");
  $before = $after = "";
  foreach ($classes as $c) {
    $before .= '<span class="'. $c .'">';
    $after .= '</span>';
  }
  $link = preg_replace('!<a[^>]*>!i', '\0'. $before, $link);
  $link = preg_replace('!</a[^>]*>!i', $after . '\0', $link);
  return $link;
}

and in page.tpl.php

      <?php foreach ($primary_links as $link): ?>
        <li><?php print phptemplate_wrap_links($link, 2); ?></li>
      <?php endforeach; ?>

Q.