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

ArnyVee

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

Brogan

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

UltimaOX

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

UltimaOX

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

UltimaOX

Active member
#27

James

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

UltimaOX

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

Brogan

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

James

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

UltimaOX

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

James

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

UltimaOX

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

James

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

UltimaOX

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

James

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

UltimaOX

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

UltimaOX

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