1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Image links in custom bbcode problems...

Discussion in 'XenForo Development Discussions' started by Jaxel, Nov 24, 2010.

  1. Jaxel

    Jaxel 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?
    Jeremy likes this.
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Can't you just add a new css class to the div and use !important to override the ugc class?
  3. Jaxel

    Jaxel Well-Known Member

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

    Jaxel 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>';

Share This Page