Image links in custom bbcode problems...


Well-known member
I changed the [medio] custom BBcode in my mod. You can see an example here: (click the image)

The code below is how its being done. As you can see, I am taking the thumbnail to the media, setting it as the background of a DIV, and then setting the image on the DIV as the transparent play button...

$link = XenForo_Link::buildPublicLink('full:media/popout', $media);
$back = XenForo_Link::buildPublicLink('full:data/media/').$media['media_id'].'.jpg';
$thum = XenForo_Link::buildPublicLink('full:js/8wayrun/').'EWRmedio_play.png';

return '<div style="text-align: center;">
            <div style="display: inline-block; background: url(\''.$back.'\') no-repeat; background-size: 100%;">
                <a href="'.$link.'" class="OverlayTrigger"><img src="'.$thum.'" /></a>
You may however have noticed an issue when you clicked the link. An issue with the ugc css. By default, with XenForo, when you mouse over an image link, it will add a light brown box at the bottom to give a nice looking mouseover effect. The problem is that the image itself is transparent and thus the brown box is viewable infront of the thumbnail.

Is there a way I can disable this behavior only in this specific spot?


Well-known member
Can't you just add a new css class to the div and use !important to override the ugc class?
How would I do this inline? The point of this is to use it in areas where there isn't a view class, and thusly can't build templates... so the style must be doable inline. I dont know how to apply HOVER rules inline.


Well-known member
Got it:

return '<style type="text/css">
	.medioBBc { text-align: center; }
	.medioBBc div { display: inline-block; background: url(\''.$back.'\') no-repeat; background-size: 100%; -moz-background-size: 100%; }
	.medioBBc a { margin: 0px; }
	.medioBBc a:hover, .medioBBc a:focus { background: transparent; border-radius: 0px; -moz-border-radius: 0px; }

<div class="medioBBc"><div><a href="'.$link.'" class="OverlayTrigger"><img src="'.$thum.'" /></a></div></div>';