avatars don't look good

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • hollyboy
    Senior Member
    • Mar 2004
    • 777

    avatars don't look good

    Hi,
    I have resized the avatars with this code found on this forum

    Unfortunately the avatars don't look with good quality
    Have a look and please help me to fix it



    Code:
    /* start custom avatar size */
    
    .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
    margin-left: 240px!important;
    }
    .b-userinfo__details {
    width: 240px;
    margin-left: -20px;
    }
    .l-desktop .b-userinfo {
    width: 210px;
    }
    .b-avatar--m {
    height: 125px!important;
    width: 125px!important;
    }
    
    .b-avatar--m > img {
    max-height: 125px!important;
    max-width: 125px !important;
    height: 125px!important;
    width: 125px!important;
    }
    [USER="3396"]media[/USER] only screen and (max-width: 783px) {
    .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
    margin-left:0px!important;
    float:none!important;
    }
    .b-userinfo__details {
    margin-left: 0;
    display:none;
    }
    
    .b-avatar--m {
    height: 60px!important;
    width: 60px!important;
    }
    
    .b-avatar--m > img {
    max-height: 60px!important;
    max-width: 60px !important;
    height: 60px!important;
    width: 60px!important;
    }}
    /* end custom avatar size */
  • Mark.B
    vBulletin Support
    • Feb 2004
    • 24286
    • 6.0.X

    #2
    If they were not that large in the first place, then they will stretch and skew to fit the larger size, and that's the effect you will see.
    The only way round this is to have the users upload a larger avatar to match the newer size.
    MARK.B
    vBulletin Support
    ------------
    My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
    My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

    Comment

    • hollyboy
      Senior Member
      • Mar 2004
      • 777

      #3
      That’s what I did with my avatar (Interfan) it is bigger but on postbit it is like is loses quality

      Comment

      • Wayne Luke
        vBulletin Technical Support Lead
        • Aug 2000
        • 73981

        #4
        Your best bet is to make sure your avatars are as close to the 200 X 200 maximum size as possible and then the browser won't have as much issue resizing them to the smaller size. However, browsers aren't graphic editors so resizing images will always affect quality.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API

        Comment

        • Mark.B
          vBulletin Support
          • Feb 2004
          • 24286
          • 6.0.X

          #5
          Looking it my demo sites (which have larger avatars and also rounded avatars), the code I have used just to make the avatars larger is simply this:

          Code:
          /* Start over-ride postbit avatar size */
          .b-avatar--m > img {
              max-height: 128px;
              max-width: 128px !important;
          }
          .b-avatar--m {
              height: 100%;
              width: 100%;
          }
          .b-avatar--m > img {
              height: 104px;
              width: 104px !important;
          }
          /* End over-ride postbit avatar size */
          MARK.B
          vBulletin Support
          ------------
          My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
          My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

          Comment

          • hollyboy
            Senior Member
            • Mar 2004
            • 777

            #6
            Mark.B thanks, hey how to hide that white border?

            Comment

            • glennrocksvb
              Former vBulletin Developer
              • Mar 2011
              • 4011
              • 5.7.X

              #7
              Code:
              .b-avatar--thread {
                  border: 0;
              }

              Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

              Comment

              • Stigur
                Member
                • May 2015
                • 41
                • 5.5.x

                #8
                Thanks to the post by Mark.B I finally got a code which work board wide. Have had troubles before with some additional CSS. I can read the code ok, but to much of a noob to write it myself. Is there a way to edit the code to differentiate between usergroups?
                FlameofUdûn.net

                Comment

                • Wayne Luke
                  vBulletin Technical Support Lead
                  • Aug 2000
                  • 73981

                  #9
                  Usergroup isn't exposed with Avatars. You would need a more indepth modification to make that information available in the template.
                  Translations provided by Google.

                  Wayne Luke
                  The Rabid Badger - a vBulletin Cloud demonstration site.
                  vBulletin 5 API

                  Comment

                  • delicjous
                    Senior Member
                    • Mar 2014
                    • 499
                    • 6.X

                    #10
                    Could be done (part of it/ in posts) with my suggestion at that issue: https://tracker.vbulletin.com/vbulle...sues/VBV-18307

                    You need the ability to select the users usergroups. Please vote for it!

                    Comment

                    • Carrfixr
                      Senior Member
                      • May 2017
                      • 1364
                      • 5.5.x

                      #11
                      Originally posted by delicjous
                      Could be done (part of it/ in posts) with my suggestion at that issue: https://tracker.vbulletin.com/vbulle...sues/VBV-18307

                      You need the ability to select the users usergroups. Please vote for it!
                      Voted, Please vote for my COMMENT issue below
                      Thanks

                      Comment

                      Related Topics

                      Collapse

                      Working...