• 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?

UltimaOX

Active member
#1
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.
 

UltimaOX

Active member
#2
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;
            }
 

Brogan

XenForo moderator
Staff member
#3
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
 

UltimaOX

Active member
#4
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
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.
 

UltimaOX

Active member
#5
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
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?
 

James

Well-known member
#6
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'}
 

UltimaOX

Active member
#7
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'}
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?
 

Brogan

XenForo moderator
Staff member
#8
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.
 

UltimaOX

Active member
#9
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.
could you maybe show me how one would use user group conditionals for this? or is it a complicated process?
 

James

Well-known member
#10
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'}">
 

James

Well-known member
#12
<xen:if is="{xen:helper ismemberof, $visitor, x}">
Code here
<xen:else />
<xen:if is="{xen:helper ismemberof, $visitor, y}">
Different code here
<xen:else />
<xen:if is="{xen:helper ismemberof, $visitor, z}">
Different code here
</xen:if>
You want $user, not $visitor - the avatar is being displayed depending on the user's usergroup, not the visitor's usergroup ;)
 

UltimaOX

Active member
#14
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'}">
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>
 

James

Well-known member
#15
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>
 

UltimaOX

Active member
#16
Maybe they're adding a class to xen:avatar then, depending on the usergroup. Let me play.
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.
 

James

Well-known member
#17
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.
 

UltimaOX

Active member
#18
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>
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
 

James

Well-known member
#19
Add to EXTRA.css styling for the avatarOutline class.
Apply my code above (the {xen:if /})
Apply styling for the new classes.
 

UltimaOX

Active member
#20
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.
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