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

    James Well-Known Member

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

    ArnyVee Well-Known Member

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

    Brogan XenForo Moderator Staff Member

    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.
    ArnyVee likes this.
  4. UltimaOX

    UltimaOX Active Member

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

    UltimaOX Active Member

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

    Brogan XenForo Moderator Staff Member

  7. UltimaOX

    UltimaOX Active Member

  8. UltimaOX

    UltimaOX Active Member

  9. James

    James Well-Known Member

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

    UltimaOX Active Member

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

    Brogan XenForo Moderator Staff Member

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

    James Well-Known Member

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

    UltimaOX Active Member

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

    James Well-Known Member

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

    UltimaOX Active Member

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

    James Well-Known Member

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

    UltimaOX Active Member

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

    James Well-Known Member

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

    UltimaOX Active Member

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

    UltimaOX Active Member

    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?

Share This Page