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

Image replacement in sidebar

Sheldon

Well-known member
#1
I have this currently on my site:



Now, I can go into Firebug and simply replace the avatar being shown, but for whatever reason, when I transfer what I think it will be, I then get this:



This is my before code:
Code:
<xen:require css="xi_sportsbook_sidebar_recent_event.css" />
 
<li>
    <div class="sportsbookRecentIndexEvent">
        <xen:avatar user="$recentEvent" size="s" img="true" />
       
        <div class="sportsbookRecentIndexEventTitle"><a href="{xen:link sportsbook-event, $recentEvent}">{xen:helper snippet, $recentEvent.title, 25}</a></div>
        <div class="sportsbookRecentIndexEventMeta">
            <span class="sportsbookRecentIndexUser"><xen:username user="$recentEvent" />,</span>
            <xen:datetime time="$recentEvent.date_create" />
        </div>
</li>

This is the after code:
Code:
<xen:require css="xi_sportsbook_sidebar_recent_event.css" />
 
<li>
    <div class="sportsbookRecentIndexEvent">
        <img src="/10k/money.png" />
       
        <div class="sportsbookRecentIndexEventTitle"><a href="{xen:link sportsbook-event, $recentEvent}">{xen:helper snippet, $recentEvent.title, 25}</a></div>
        <div class="sportsbookRecentIndexEventMeta">
            <span class="sportsbookRecentIndexUser"><xen:username user="$recentEvent" />,</span>
            <xen:datetime time="$recentEvent.date_create" />
        </div>
</li>
Can anyone help? The change-over from Firebug to the template is apparently beyond me...:mad: :cry:
 

Brogan

XenForo moderator
Staff member
#2
You need to create a CSS class with the appropriate styling and apply it to the image.
Possibly floating it left, width, height, etc.
 

Sheldon

Well-known member
#4
Well, I have it to this now:


The code:
Code:
<li>
    <div class="sportsbookRecentIndexEvent">
        <div class="bookie" src="bookie/money.png" /></div>
       
        <div class="sportsbookRecentIndexEventTitle"><a href="{xen:link sportsbook-event, $recentEvent}">{xen:helper snippet, $recentEvent.title, 25}</a></div>
        <div class="sportsbookRecentIndexEventMeta">
            <span class="sportsbookRecentIndexUser"><xen:username user="$recentEvent" />,</span>
            <xen:datetime time="$recentEvent.date_create" />
        </div>
</li>
My CSS
Code:
.sportsbookRecentIndexEvent .bookie
{
    float: left;
    height: 32px;
    width: 32px;
    clear: left;
}
It just won't grab the image.