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

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.
 
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 :D
 
It's on my "to do" list to do a styling FAQ.

I really must get started on that soon :whistle:

I'll be updating the Conditionals section of the main FAQ first and then I'll do that.
 
Give me the group IDs you wish to use and I'll create the conditionals for you.

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
 
It's on my "to do" list to do a styling FAQ.

I really must get started on that soon :whistle:

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.
 
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.
 
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?
 
They're just CSS class names, you can name them however you want.

It's the user group ID which is being used to apply the CSS class.

Just make sure the class names match in both templates.
 
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.
 
They're just CSS class names, you can name them however you want.

It's the user group ID which is being used to apply the CSS class.

Just make sure the class names match in both templates.

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

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.
 
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.
 
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.
 
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.

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?
 
Top Bottom