Posted by tixilite on April 1, 2009 at 8:43pm
4 followers
| Project: | External Links |
| Version: | 6.x-1.7 |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (works as designed) |
Issue Summary
In a menu block with several external links, none of them have the extlink image next to them. Other blocks which are not menus but with external links in them work fine.
Comments
#1
It's probably because (just guessing) the links in that menu are styled with the CSS rule
display: block. External Links intentionally skips any link that is display: block to prevent the external icon from breaking navigation layouts or tabs along the main navigation.#2
Hi, I found a little patch to avoid breaking navigation layouts in blocks: substitute the after() api calls with append() in extlink.js:
$(this).append('<span class=' + Drupal.settings.extlink.extClass + '></span>')
And drop the
if ($(this).css('display') == 'inline')
This api inserts the inside the anchor text, so no problem imho. Here you have the patch. Do you see any drawback?
#3
brnnrc, this still doesn't fix the problem of the icon breaking the desired display. Say you have CSS that replaces the text link with an image, adding that external icon is going to break the navigation images. Some example CSS that's quite common:
#primary li {display: block;
width: 120px;
height: 24px;
float: left;
text-indent: -9999px;
}
#primary li.menu-home {
background-image: url(images/home.png);
}
#primary li.menu-about {
background-image: url(images/about.png);
}
This sort of CSS could be used to end up with a navigation like the attached image.
#4
quicksketch, it is true! I didn't take care of it. And there is no solution, I think. But, what about refine the if statement to: don't insert the ext link icon if there is a negative text-indent (or something else). So, if I'm using a "simple" css, I get the ext link icon in blocks too. And what about a checkbox "turn on the icon in blocks (at your own risk)" in config menu?
Yust my two cents, discard them if inappropriate.
#5
brnnrc, I'd prefer not to add options that users won't understand and (most likely) would misconfigure. It's difficult to explain to anyone not familiar with CSS what "display: block" means, even if you don't use that exact terminology.
A negative text-indent isn't the only approach that can be used for text-replacement, see http://css-tricks.com/nine-techniques-for-css-image-replacement/
An alternative I'm not sure that's been considered: why not just use inline display of your menu items to begin with? Then this won't be a problem at all.
#6
I'm marking this by design after a lack of response, since it is intended behavior.
#7
This gets the image into menu links (that have been given a "display:block;" in addition to their class="extlink") but doesn't solve it for all display block links (a JQuery solution.) At least this just has to go into your CSS file. Bummer is the link is on the right hand side of your
<a>and NOT next to the text, because we can't access that width. Better than nothing.<style>ul.menu li.leaf a.ext{
background-image:url(images/backgrounds/extlink.png);
background-position:97% center;
background-repeat:no-repeat;
padding-right:12px;
}
</style>
This does require you to add the extlink.png file into your theme's images folder... or to share the image use an address like "/sites/all/modules/extlink/extlink.png" in your CSS declaration.