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

XF 1.5 Account Dropdown Avatar Size ?

Discussion in 'Styling and Customization Questions' started by Cylent1, Feb 12, 2016.

  1. Cylent1

    Cylent1 Active Member

    Hello!
    I am trying to use big and tall avatar here: Capture5.PNG

    I have changed the "m" to "l" in "navigation_visitor_tab"
    And I have tried different variations of this code in extra.css with no luck.
    Code:
    #AccountMenu .menuHeader .avatar
    {width: 96px !important; height: auto !important;}
    Any help is much appreciated!
     
  2. Russ

    Russ Well-Known Member

    Check out:

    navigation_visitor_tab

    Code:
    <xen:avatar user="$visitor" size="m"
     
  3. Cylent1

    Cylent1 Active Member

    Yeah thats what I did! I realized i put the wrong template in my post. I did change that in navigation_visitor_tab.
    That doesn't work for me.
     
  4. Russ

    Russ Well-Known Member

    It should work:
    Screenshot_3.png

    Little CSS to help align and not float it

    Code:
    #AccountMenu.Menu .menuHeader .avatar{ float: none; }
    #AccountMenu.Menu .menuHeader .avatar span { margin: 0 auto; }
    
    Double check you're editing the correct style, if it's for Apex running on your site it should work as well.
     
  5. Cylent1

    Cylent1 Active Member

    I can get that, but I am trying for a tall avatar that is "width: 96px ; height: auto;"eg; 96x128. Or if the avatar is square it remains square. Basically I need to have the avatar keep it's aspect ratio and adapt.
     
  6. Cylent1

    Cylent1 Active Member

  7. Cylent1

    Cylent1 Active Member

    Ok, I was able to acheive this almost. The only issue now is the bottom margin is not decreasing when a square avatar is used.
    This is with tall avatar
    Capture2.PNG

    This is with square avatar. (THIS IS WHERE THE BOTTOM MARGIN IS NOT DECREASING)
    Capture5.PNG

    Of course I have changed the "m" to "l" in navigation_visitor_tab template.
    Here is my code thus far:
    Code:
    .avatar .img.l
    {width: 96px; height: 192px; background-size: 100% auto;}
    
    Using auto height will not work for some reason.
    What am I missing? I have been working on this for days and I am stumped. Any help is much Appreciated!
     
    Last edited: Feb 15, 2016

Share This Page