1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Adding Customer Border for a Rank

Discussion in 'Styling and Customization Questions' started by Daphonic, May 18, 2015.

  1. Daphonic

    Daphonic Active Member

    My end goal is this = http://imgur.com/PcybLjM The blueish border around Sarahmon's Avatar.

    I figured this is possible with the Below Code

    .message.staff .messageUserInfo .helper {
    display: block;
    position: absolute;
    top: -6px;
    left: -6px;
    content: "";
    background: url("@imagePath/xenforo/icons/staff-ribbon-posted.png") no-repeat transparent;
    height: 107px;
    width: 107px;

    }
    This code is used to put Staff banner on Peoples Avatar. What I'd like to try and do is Members who Obtain Patron Status (upgraded account/donations) will get a cool banner around their avatar to show they are helping keep the community going and funded.

    I'm slowly figuring out what I needed to do, but I'm not sure what I need to do to this code above. The Group that the member joins once they upgrade their account is "Patron Status" so that's the group id like the border to be linked to. Would anyone mind helping me out with this?
     
  2. DEZero

    DEZero Well-Known Member

  3. Daphonic

    Daphonic Active Member

    Thank you for looking, after reading most of those posts, looks like they are having errors. Also the amount of code they use is crazy.. I would think the above code work would. I'm just not sure what I put in the ".message.staff .messageUserInfo .helper {" for what i want to do, everything i try doesn't work.
     
  4. DEZero

    DEZero Well-Known Member

    I'll work on something tonight, if I get it down I'll post the code and results. Unless someone else figures it out before then.
     
  5. Daphonic

    Daphonic Active Member

    dude so many thank yous!
     
  6. batpool52!

    batpool52! Well-Known Member

    Under template
    Find:
    HTML:
    <li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">
    Replace with:
    HTML:
    <li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if $message.isIgnored, ignored} {xen:if {xen:helper ismemberof, $message, 69}, 'if_you_know_what_i_mean_hehe'}" data-author="{$message.username}">
    In Extra.CSS
    Code:
    .message.if_you_know_what_i_mean_hehe .messageUserInfo .helper
    {
        display:    block;
        position:   absolute;
        top:        -6px;
        left:       -6px;
        content:    "";
        background: url("@imagePath/xenforo/icons/staff-ribbon-posted.png") no-repeat transparent;
        height:     107px;
        width:      107px;
    }
    ======================
    Change:
    69
    In:
    Code:
    {xen:if {xen:helper ismemberof, $message, 69}
    With:
    The user group id to which users are promoted after purchasing the user upgrade.

    Change:
    Code:
    if_you_know_what_i_mean_hehe
    To the class name you prefer:
    Whatever you want :p
     
    DEZero likes this.
  7. Daphonic

    Daphonic Active Member

    I will test this out tomorrow. Thank you.
     
  8. Daphonic

    Daphonic Active Member

    @batpool52! sorry took me so long to get back to you, but What Template Am I looking under for
    <li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}"> ?
     
  9. batpool52!

    batpool52! Well-Known Member

    message
     
  10. Daphonic

    Daphonic Active Member

    @batpool52! thank you for insanely fast response, working on this now.
     
    batpool52! likes this.
  11. Daphonic

    Daphonic Active Member

  12. batpool52!

    batpool52! Well-Known Member

  13. Daphonic

    Daphonic Active Member

    batpool52! likes this.
  14. DEZero

    DEZero Well-Known Member

    nice, all you need now is the responsive part
     
  15. Daphonic

    Daphonic Active Member

    What do you mean Responsive part?
     
  16. Ernest L. Defoe

    Ernest L. Defoe Well-Known Member

    If you look at your site on a mobile device the border looks out of place. It doesn't scale to fit the avatar on smaller screens.
     
  17. Daphonic

    Daphonic Active Member

    Ahh, Understood. I still need to fix the Site on mobile all around :( Once I'm 100% finished with site on normal. I think ill work on the mobile, but thank you for the info sir.
     
  18. Michael Frame

    Michael Frame New Member

    Any luck on the responsive part?
     
  19. Daphonic

    Daphonic Active Member

    No I haven't fixed that issue yet. It's on the list of 30+ things I need to do :(
     
  20. Michael Frame

    Michael Frame New Member

    Darn, I want to add the same thing to my site. Its a great idea.
     

Share This Page