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

Image replacement in sidebar

Discussion in 'Styling and Customization Questions' started by Sheldon, Mar 7, 2012.

  1. Sheldon

    Sheldon Well-Known Member

    I have this currently on my site:

    [​IMG]

    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:

    [​IMG]

    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:
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    You need to create a CSS class with the appropriate styling and apply it to the image.
    Possibly floating it left, width, height, etc.
     
  3. Sheldon

    Sheldon Well-Known Member

    This was the CSS being applied to the avatar image:
    [​IMG]

    How do I define that css to select my new image?
     
  4. Sheldon

    Sheldon Well-Known Member

    Well, I have it to this now:
    [​IMG]

    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.
     

Share This Page