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

Avatar Customization on Member View ((how to center))

Discussion in 'Styling and Customization Questions' started by MsJacquiiC, Aug 28, 2012.

  1. MsJacquiiC

    MsJacquiiC Well-Known Member

    Okay - I'm modifying my member_view template as you can see at http://xen.jpicforum.info/members/msjacquiic.1/ --- I'm having a code issue with centering the avatar both horizontally as well as vertically in the space allotted:

    [​IMG]

    Any css enthusiasts out there who can advise how to make the code like:

    [​IMG]

    I'd appreciate you assistance! Thanks ;)

    J.
     
  2. ArnyVee

    ArnyVee Well-Known Member

  3. MsJacquiiC

    MsJacquiiC Well-Known Member

    Thanks for responding Arny - and I did use search btw and didn't see that thread :p
    I tried adding the declaration = didnt' work :(

    Here's the current code I use:
    HTML:
            <div class="avatarScaler">
    <div class="memberpage-avatar">
                <xen:if is="{$visitor.user_id} == {$user.user_id}">
                    <a class="Av{$user.user_id}l OverlayTrigger" href="{xen:link account/avatar}">
                        <img src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" style="{xen:helper avatarCropCss, $user}" itemprop="photo" />
                    </a>
                <xen:else />
                    <span class="Av{$user.user_id}l">
                        <img src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" style="{xen:helper avatarCropCss, $user}" itemprop="photo" />
                    </span>
                </xen:if>
            </div>
    </div>
    ...

    Now after an hour and a half of googling, trying different techniques, I say F**K it and wrapped it in a table LOL


    HTML:
            <div class="avatarScaler">
    <table class="memberpage-avatar">
    <tr><td style="vertical-align:middle;">
                <xen:if is="{$visitor.user_id} == {$user.user_id}">
                    <a class="Av{$user.user_id}l OverlayTrigger" href="{xen:link account/avatar}">
                        <img class="avatarScaler" src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" style="{xen:helper avatarCropCss, $user}" itemprop="photo" />
                    </a>
                <xen:else />
                    <span class="Av{$user.user_id}l">
                        <img class="avatarScaler" src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" style="{xen:helper avatarCropCss, $user}" itemprop="photo" />
                    </span>
                </xen:if>
            </td></tr>
            </table>
    </div>
    It's not ideal - but it works.
    Anyway - thanks again for responding. Anyone else have suggestions?

    Thanks,

    J.
     
  4. Shelley

    Shelley Well-Known Member

    not sure you want to go around doing it this way but you could force a max-width at 96px and center it with padding (hacky stuff).

    Code:
    .mast .avatarScaler img {
    max-width: 96px;
    padding: 25%;
    }
    
     

Share This Page