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

XF 1.2 Hide Avatars in responsive mode

Discussion in 'Styling and Customization Questions' started by RoyalRumble, Feb 16, 2014.

  1. RoyalRumble

    RoyalRumble Active Member

    Hi everyone,

    I don't suppose the entitled is possible? And if so, could someone kindly place some code to stick in extra.css that achieves this?

    Preferably, if less than X width, avatars removed.

    Thanks
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    You can achieve that in several ways.

    You could edit the templates and add the hiddenResponsiveNarrow class to the relevant elements.

    Or you could use media queries in EXTRA.css to hide the elements, e.g.
    Code:
    <xen:if is="@enableResponsive">
        @media (max-width:@maxResponsiveNarrowWidth) {
            .class {
            display: none;
            }
        }
    </xen:if>
    http://xenforo.com/community/resources/responsive-design.2193/
     
    Skylined and RoyalRumble like this.
  3. RoyalRumble

    RoyalRumble Active Member

    Thanks again Brogan - super speedy helpful support as ever.

    So this is the code in EXTRA.css

    Screen Shot 2014-02-16 at 13.26.50.png

    But avatars to the left of threads in mobile remain.

    IMG_2927.PNG

    Are you able to advise what I'm doing wrong?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    That was an example.

    You will need to replace "class" with the actual class names you want to hide.
     
  5. Sheldon

    Sheldon Well-Known Member

    .class is the CLASS for the avatar. You have to find which class is for the avatar and replace (.class)

    *As the robot above said.
     
  6. xf_phantom

    xf_phantom Well-Known Member

    try
    Code:
    xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth) {
    .avatar {
    display: none;
    }
    }
    </xen:if>
     
  7. RoyalRumble

    RoyalRumble Active Member

    Ah thanks guys - I tried avatar as @xf_phantom suggested but no joy. Any ideas how I find the class for avatars?
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    Right click and open the browser inspection tool.

    upload_2014-2-16_14-10-31.png

    Try using .avatarHolder.

    Actually though, I would probably use: .Responsive .messageUserBlock div.avatarHolder.

    When you do that though, you will also need to remove the left margin from this: .Responsive .messageUserBlock h3.userText.
     
  9. RoyalRumble

    RoyalRumble Active Member

    Thanks again Brogan.

    Sorry to keep asking, could you kindly have a glance over the below an confirm if I'm doing this right? (I tried both, both never had an impact)

    Code:
    <xen:if is="@enableResponsive">
        @media (max-width:mad:maxResponsiveNarrowWidth) {
            .Responsive .messageUserBlock div.avatarHolder {
            display: none;
            }
        }
    </xen:if>
    And

    Code:
    <xen:if is="@enableResponsive">
        @media (max-width:mad:maxResponsiveNarrowWidth) {
            .avatarHolder{
            display: none;
            }
        }
    </xen:if>
     
    Last edited: Feb 16, 2014
  10. arms

    arms Active Member

    I used this:

    Code:
    @media (max-width: 600px) {
      .discussionList .listBlock.posterAvatar
                    {
                         display: none
                    }
     
    RoyalRumble likes this.
  11. RoyalRumble

    RoyalRumble Active Member

    Awesome, thanks a lot
     
  12. arms

    arms Active Member

    Np, nice forum. Wish RAWK would move to Xenforo.
     
    RoyalRumble likes this.
  13. RoyalRumble

    RoyalRumble Active Member

    Cheers @arms ,

    On this, I've noticed a bit of an odd issue. It prevents Node Icons being displayed on any width over 600.

    So 600 width and below, node icons show;



    Screen Shot 2014-02-17 at 17.21.34.png

    But 600 plus, they disappear.

    Screen Shot 2014-02-17 at 17.21.43.png

    Definitely isolated to this code. Does this happen to you?

    [EDIT]

    A tweak to this seems to have resolved;

    Code:
    @media (max-width:@maxResponsiveWideWidth)
    {
        .discussionList .listBlock.posterAvatar {display:none;}
    }
     
    arms likes this.
  14. LurkerLou

    LurkerLou Active Member

    Brogan, I've been able to remove the avatars on responsive but I can't seem to remove the reserved avatar space on responsive. This is the code I used but it's obviously incorrect.

    Code:
    <xen:if is="@enableResponsive">
        @media (max-width:@maxResponsiveWideWidth)
    {
        .Responsive .messageUserBlock h3.userText {display:none;}
    }
    </xen:if>
    That just removes everything.
     
  15. Brogan

    Brogan XenForo Moderator Staff Member

    You will also need to add CSS for the other template classes as required.

    As I stated above: When you do that though, you will also need to remove the left margin from this: .Responsive .messageUserBlock h3.userText.

    Further changes may be required.
     
  16. LurkerLou

    LurkerLou Active Member

    From the discussion list and thread list is all I really want to hide. That makes it a very sleek mobile edit. The issue I'm having is I don't know where to remove the left margin. I put it in extra.css with the above code but that didn't work.
     
  17. Brogan

    Brogan XenForo Moderator Staff Member

    The above code only removes the H3 user text.

    Use a browser inspection tool to see what other classes need modifying.
     
  18. LurkerLou

    LurkerLou Active Member

    The class is .messageUserBlock h3.userText on a desktop. I can't inspect elements on a mobile device so I can't see what the padding is on mobile.

    The attached pic shows the part that I want to remove, the circle part. I tried the above code which removed the H3 text completely so I know I'm on the right track but I can't figure it out.

    [​IMG]
     
  19. Brogan

    Brogan XenForo Moderator Staff Member

    That's .message .messageInfo margin-left.
     
  20. LurkerLou

    LurkerLou Active Member

    Tried the below code in Extra.css to no avail.
    Code:
    <xen:if is="@enableResponsive">
        @property (max-width:@maxResponsiveWideWidth)
    {
        .message .messageInfo {margin-left: 10px;}
    }
    </xen:if>
     

Share This Page