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

How to add an Image to avatarHolder? Diff for Groups?

Discussion in 'Styling and Customization Questions' started by UltimaOX, Aug 31, 2011.

  1. UltimaOX

    UltimaOX Active Member

    So ive seen a few sites that use custom images for avatarHolder and it looks neat. My current style just have a color section, no image.

    But how would you make it so that you cold have a custom avatar image boarder?

    And how could you make it diffrent for each group?

    An example of it is, Firefall's website, they have custom avatar holders for the various ranks.

    This thread shows it, they have custom avatar holders for admins and super mods and mods.

    Also, i inspected the css.php for their avatarHolder but its all greek to me. i dont quite understand enough about css to kno what its really saying. i will include the css in the 2nd post of this thread.
     
  2. UltimaOX

    UltimaOX Active Member

    Code:
    /* --- message_user_info.css --- */
    
    .messageUserInfo
    {
        float: left;
    width: 135px;
    
    }
    
        .messageUserBlock
        {
            background-color: rgb(255, 0, 4);
    border-style: none;
     
            position: relative;
        }
    
            .messageUserBlock div.avatarHolder
            {
                padding: 10px;
    border-radius: 4px; -webkit-border-radius:  4px; -moz-border-radius:  4px; -khtml-border-radius:  4px;
    
                            float:left;
            }
    
                .messageUserBlock div.avatarHolder a
                {
                    display: block;
                }
    
                    .messageUserBlock div.avatarOutline
            {
                width: 140px;
                            height: 142px;
                            background: url('styles/xxx/avatar_bg.png') no-repeat;
                            position: absolute;
                            top: -13px;
                            left: -11px;
                            padding-left:21px;
                            padding-top:23px;
            }
    
                    .messageUserBlock div.avatarOutline_r5
            {
                            background: url('styles/xxx/avatar_r5_bg.png') no-repeat;
            }
    
                    .messageUserBlock div.avatarOutline_supermod
            {
                            background: url('styles/xxx/avatar_supermod_bg.png') no-repeat;
            }
    
                    .messageUserBlock div.avatarOutline_nco
            {
                            background: url('styles/xxx9/avatar_nco_bg.png') no-repeat;
            }
    
            /*.messageUserBlock .ipLink
            {
                display: block;
                float: right;
                font-size: 8px;
                width: 12px;
                height: 12px;
                line-height: 12px;
                text-align: center;
                background-color: rgb(104, 109, 111);
                border-radius: 3px; -webkit-border-radius:  3px; -moz-border-radius:  3px; -khtml-border-radius:  3px;
            }
    
                .messageUserBlock .ipLink:hover
                {
                    background-color: rgb(37, 43, 47);
                    text-decoration: none;
                }*/
    
            .messageUserBlock h3.userText
            {
                padding: 6px;
    position: absolute;
    top: 0px;
    left: 120px;
     
            }
    
            .messageUserBlock a.username
            {
                font-weight: bold;
    font-size: 14px;
    display: block;
    overflow: hidden;
    line-height: 14px;
    white-space: nowrap;
     
            }
    
            .messageUserBlock .userTitle
            {
                font-size: 12px;
    display: block;
    min-width: 120px;
    
            }
    
            .messageUserBlock .extraUserInfo
            {
                font-size: 11px;
    background-color: rgb(37, 43, 47);
    padding: 4px 6px;
    border-radius: 4px; -webkit-border-radius:  4px; -moz-border-radius:  4px; -khtml-border-radius:  4px;
    
            }
    
                .messageUserBlock .extraUserInfo dl
                {
                    margin: 2px 0;
                }
    
                    .messageUserBlock .extraUserInfo dt
                    {
                        font-size: 9px;
                        display: block;
                    }
    
            .messageUserBlock .arrow
            {
                position: absolute;
                top: 10px;
                right: -10px;
    
                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;
    
                border: 10px solid transparent;
                border-left-color: ;
                border-right: none;
    
                /* Hide from IE6 */
                _display: none;
            }
    
                .messageUserBlock .arrow span
                {
                    position: absolute;
                    top: -10px;
                    left: -11px;
    
                    display: block;
                    width: 0px;
                    height: 0px;
                    line-height: 0px;
    
                    border: 10px solid transparent;
                    border-left-color: ;
                    border-right: none;
                }
    
     
  3. Brogan

    Brogan XenForo Moderator Staff Member

    I replied to your conversation.

    I suspect they are using the staff class.

    If you use Firebug to check the code, you can see this in the source:
    Code:
    <li id="post-182355" class="message  staff" data-author="Brogan">
    Either that or they are using a conditional based on user group, which is more likely if staff have different avatar holders (I only saw red and blue so I'm not sure if that's the case or not).

    You can see the conditional statements here: http://xenforo.com/community/threads/frequently-asked-questions.5183/#post-182355
     
  4. UltimaOX

    UltimaOX Active Member

    i use google chrome and i can "inspect element" to see the code and all that jazz of any elemt on the page.

    But theirs seems to be user group based. The red is for admins, the blue for members, they super mods are yello and their mods are green.

    I looked at that conditional thing and its way over my head. I have a general knoladge of php and css, but i really dont understand fully most of what i do, and that is way past me.

    but yeah, i mean from looking at the CSS it seems they have a phrase or somethign associated with each group for avatarHolder or something. i really dont know, buti was hoping you might.
     
  5. UltimaOX

    UltimaOX Active Member

    so i checked back at the code and its useing the class "message".

    Code:
    <li id="post-999999" class="message" data-author="ModeratorsName">
    like that.

    How would you set the avatarHolder to be diffrent for user Groups? like where would that go? i see the css part, but would i need to adjust other code or add some magic phrases to make this work?
     
  6. James

    James Well-Known Member

    They're applying a class of avatarOutline_r5 to <div class="avatarOutline"> that changes the avatar outline for the relative group. I'd guess they're doing it by adding the following conditional to the message_user_info template:
    Code:
    {xen:if '{$user.is_admin}', 'avatarOutline_r5'}
     
  7. UltimaOX

    UltimaOX Active Member

    and so this code says that if they are admin, to goto the css and find the "avataroutline_r5" and use it?

    where in the message_user_info would i put that?

    and where would the avaratOutline_r5 css go?
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    I don't think they're using that James as according to the post above there are at least 4 different colours.

    So they must be using a user group conditional.
     
  9. UltimaOX

    UltimaOX Active Member

    could you maybe show me how one would use user group conditionals for this? or is it a complicated process?
     
  10. James

    James Well-Known Member

    I'd only ever seen blue and red but yeah now I see green too. They're using usergroup conditionals in the message_user_info template, just look for <div lass="avatarOutline"> and add classes, for example:
    Code:
    <div class="avatarOutline {xen:if $user.is_admin, 'avatarOutline_admin'} {xen:if $user.is_moderator, 'avatarOutline_mod'} {xen:if '{xen:helper ismemberof, $user, 27}', 'avatarOutline_27'}">
     
    Brogan likes this.
  11. Brogan

    Brogan XenForo Moderator Staff Member

    Edit: James has done it above.
     
    James likes this.
  12. James

    James Well-Known Member

    You want $user, not $visitor - the avatar is being displayed depending on the user's usergroup, not the visitor's usergroup ;)
     
  13. Brogan

    Brogan XenForo Moderator Staff Member

    Yeah, I edited it out anyway as you had already posted :)
     
    James likes this.
  14. UltimaOX

    UltimaOX Active Member

    i dont have a div class= avatarOutline in my message_user_info. this is all the code in it.

    Code:
    <xen:require css="message_user_info.css" />
    
    <div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
    <div class="messageUserBlock">
        <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
            <div class="avatarHolder">
                <xen:avatar user="$user" size="m" />
                <!-- slot: message_user_info_avatar -->
            </div>
        </xen:hook>
    
    <xen:if is="!{$isQuickReply}">
        <xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
            <h3 class="userText">
                <xen:username user="$user" itemprop="name" rich="true" />
                <xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user}</xen:contentcheck></em></xen:if>
                <!-- slot: message_user_info_text -->
            </h3>
        </xen:hook>
    
        <xen:if hascontent="true">
            <div class="extraUserInfo">
                <xen:contentcheck>
                <xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
                    <xen:if is="@messageShowRegisterDate">
                        <dl class="pairsInline">
                            <dt>{xen:phrase member_since}:</dt>
                            <dd>{xen:date $user.register_date}</dd>
                        </dl>
                    </xen:if>
    
                    <xen:if is="@messageShowMessageCount">
                        <dl class="pairsInline">
                            <dt>{xen:phrase message_count}:</dt>
                            <dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed">{xen:number $user.message_count}</a></dd>
                        </dl>
                    </xen:if>
    
                    <xen:if is="@messageShowTotalLikes">
                        <dl class="pairsInline">
                            <dt>{xen:phrase likes_received}:</dt>
                            <dd>{xen:number $user.like_count}</dd>
                        </dl>
                    </xen:if>
    
                    <xen:if is="@messageShowTrophyPoints">
                        <dl class="pairsInline">
                            <dt>{xen:phrase trophy_points}:</dt>
                            <dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
                        </dl>
                    </xen:if>
    
                    <xen:if is="@messageShowGender AND {$user.gender}">
                        <dl class="pairsInline">
                            <dt>{xen:phrase gender}:</dt>
                            <dd itemprop="gender"><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd>
                        </dl>
                    </xen:if>
    
                    <xen:if is="@messageShowOccupation AND {$user.occupation}">
                        <dl class="pairsInline">
                            <dt>{xen:phrase occupation}:</dt>
                            <dd itemprop="role">{xen:string censor, $user.occupation}</dd>
                        </dl>
                    </xen:if>
    
                    <xen:if is="@messageShowLocation AND {$user.location}">
                        <dl class="pairsInline">
                            <dt>{xen:phrase location}:</dt>
                            <dd><a href="{xen:link 'misc/location-info', '', 'location={xen:string censor, $user.location}'}" target="_blank" rel="nofollow" itemprop="address" class="concealed">{xen:string censor, $user.location}</a></dd>
                        </dl>
                    </xen:if>
    
                    <xen:if is="@messageShowHomepage AND {$user.homepage}">
                        <dl class="pairsInline">
                            <dt>{xen:phrase home_page}:</dt>
                            <dd><a href="{xen:string censor, $user.homepage}" rel="nofollow" target="_blank" itemprop="url">{xen:string censor, $user.homepage}</a></dd>
                        </dl>
                    </xen:if>
    
                    <xen:comment>
                    <xen:foreach loop="{$user.identities}" key="$service" value="$account">
                        <dl class="pairsInline">
                            <dt>{$service}</dt>
                            <dd>{$account}</dd>
                        </dl>
                    </xen:foreach>
                    </xen:comment>
    
                </xen:hook>
                </xen:contentcheck>
            </div>
        </xen:if>
    
    </xen:if>
    
        <span class="arrow"><span></span></span>
    </div>
    </div>
     
  15. James

    James Well-Known Member

    Maybe they're adding a class to xen:avatar then, depending on the usergroup. Let me play.

    EDIT: They seem to have wrapped the <xen:avatar /> inside a div.

    Find:
    Code:
    <div class="avatarHolder">
    <xen:avatar user="$user" size="m" />
    
    Replace:
    Code:
    <div class="avatarHolder">
    <div class="avatarOutline">
    <xen:avatar user="$user" size="m" />
    </div>
    
     
  16. UltimaOX

    UltimaOX Active Member

    haha honestly this is way past me. so i havent a clue, all i can do is inspect their code and make assumptions based off that XD

    But definatly try out a couple thigns and let me know if you get it.

    Ide love to have more seperation between staff and members on my site.
     
  17. James

    James Well-Known Member

    Read my edit, wrap the <xen:avatar /> inside a div with a class of avatarOutline, apply my code above (depending on what you want to do, you haven't specified the information) and then apply the CSS styling in EXTRA.css to the class avatarOutline, etc.
     
  18. UltimaOX

    UltimaOX Active Member

    ok so i replace it with that, but then what after that? then would i change the message_user_info.css to include the css they did to display the image boarder?

    o.o
     
  19. James

    James Well-Known Member

    Add to EXTRA.css styling for the avatarOutline class.
    Apply my code above (the {xen:if /})
    Apply styling for the new classes.
     
  20. UltimaOX

    UltimaOX Active Member

    ok welll let me tell you what im trying to do then.

    I have various user groups, ide like each group to have thier own avatarholder.

    So like i have the groups admin, general officer, moderator, member, etc.

    could i use the group id's ionstead of names in this too? cause a few groups have 2 word names. dunno how that would be done
     

Share This Page