Image links in custom bbcode problems...

Jaxel

Well-known member
I changed the [medio] custom BBcode in my mod. You can see an example here: (click the image)
http://xen1.8wayrun.com/threads/media-hatsune-miku-po-pi-po-concert-ver.23/

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...

49.jpg

EWRmedio_play.png


Code:
$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>
            </div>
        </div>';

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?
 
Can't you just add a new css class to the div and use !important to override the ugc class?
 
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.
 
Got it:

Code:
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; }
</style>

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