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

Give me the group IDs you wish to use and I'll create the conditionals for you.

James, can you (or Brogan or someone ) post this as a "how to" thread when you get it worked out? This would be a great tutorial to help people get their designs customized even further

well its alot, i want to do this for all my groups, but ill give you the main ones and ill look how you do it and make them for the others.

IDs
2 - is the member group
3 - is the admin group
5 - is the officer group
11 - is specialty admin
12 - is specialty admin

that should be enough to get me to figure it out.

Like i want to have each one able to have its own boarder image i can make a host

Lazy Brogan is Lazy. XP

no i really appreciate you and james helping me with this.

Im trying to help make the staff stand out as much as i can and i want to have as many custom graphics as i can fit in as well, and this is a major help.

oh i have custom icons for all my user groups as well. but i want to just be able to change more. Like make the group icons match the group avatarholders so it just all comes together and looks awsome.

this is my site, a forum post with alot of diff ranks posting.
http://gamerapoc.org/threads/the-welcome-thread.10/

=]

PRE-WARN: UNTESTED

OK in the message_user_info template:
Find

Code:

<div class="avatarHolder">

Add underneath:

Code:

<div class="avatarOutline {xen:if '{xen:helper ismemberof, $user, 3}', 'avatarOutline_admin'} {xen:if '{xen:helper ismemberof, $user, 5}', 'avatarOutline_officer'} {xen:if '{xen:helper ismemberof, $user, 11}', 'avatarOutline_specialtyadmin'}">

Find

Code:

<!-- slot: message_user_info_avatar -->

Add underneath:

Code:

</div>

(yes there's already a div there, you want another div).
--------------------------------------------------------------------
Open EXTRA.css and add:

Code:

.messageUserBlock div.avatarOutline
{
/* CSS STYLING FOR MEMBER GROUP */
}

.messageUserBlock div.avatarOutline_admin
{
/* CSS STYLING FOR ADMIN GROUP */
}

.messageUserBlock div.avatarOutline_officer
{
/* CSS STYLING FOR OFFICER GROUP */
}

.messageUserBlock div.avatarOutline_specialtyadmin
{
/* CSS STYLING FOR SPECIALTY ADMIN GROUP */
}

Done. Just add your background-image: url('link/to/images.xyz') to each one and you should be ready to go.

Be aware though that if a user is a member of more than one of the groups, the CSS styling that's lower down (i.e. appears latest) will apply.

the code in the messageuserblock place where the URLs go seems off.

.messageUserBlock div.avatarOutline_officer
.messageUserBlock div.avatarOutline.specialtyadmin

one has a period the other has an underscore.

So if the group has 2 words "General officer" it would be .messageUserBlock div.avatarOutline_general_officer?

Silly me, it should be _specialtyadmin not .specialtyadmin

It doesn't matter what you name them, it's the conditional that counts. Look at the first one for example:
{xen:if '{xen:helper ismemberof, $user, 3}', 'avatarOutline_admin'}

Let me break it down:
{xen:if '{xen:helper ismemberof, $user, 3} - if the user is a member of user group ID 3
'avatarOutline_admin'} - apply class avatarOutline_admin

In EXTRA.css, the div.avatarOutline_admin translates into "div with a class of avatarOutline_admin".

I hope that makes sense.

oh i see at the top. so to add more groups, i just addon to the end of that and just make sure the names match up in the css?

to add more groups just add more {xen:if '{xen:helper ismemberof, $user, X}', 'avatarOutline_whatever'} and make sure that EXTRA.css has ".messageUserBlock div.avatarOutline_whatever"
X = user group ID
_whatever = whatever, just make sure it matches.

makes lots of sense thankyou. yeah i can read php well enough, but i just dont always know how it does some thigns.

But i have a question. they have this above the class' with the URLs.

Code:

.messageUserBlock div.avatarOutline
        {
            width: 140px;
                        height: 142px;
                        background: url('styles/firefall/avatar_bg.png') no-repeat;
                        position: absolute;
                        top: -13px;
                        left: -11px;
                        padding-left:21px;
                        padding-top:23px;
        }

is that for the basic members? im assuming since the image it links to is the blue border one for members, but why do they have the extra stuff like height and padding and such? do i need that too?

they define a width and height so they can use position: absolute and change it to their own. Your width and height should correspond to the width and height of the graphic then your top, left and padding is used to position it to wherever.

ok so i want to include that bit of code into the css too then right?

If you're using their images, just c+p his code (assuming you're allowed to use them). If not, you'll have to get sticky with CSS to achieve what you want.

ive got a degree in digital art, im gonna make my own, but ill make them to the same resolution they are useing that way i can try it, see if it works, then adjust suizes as i see fit.

but i appreciate all your help. im gonna whip up a boarder and try out the code now, ill get back to you if it works or epicly fails haha.

hey james, i finished thigns and i used the code, but it doesnt display the username anymore, or the user groups or extra info or online status.

what would i do to resolve this?