Announcement

Collapse
No announcement yet.

How to make round avatars in vB5

Collapse
This is a sticky topic.
X
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #46

    Picture Uploading Permissions
    Can Upload Custom Avatars (yes)
    Yes No
    Can Upload Animated Avatar (yes)
    Yes No
    Custom Avatar Maximum Width (pixels)
    200
    Custom Avatar Maximum Height (pixels)
    200
    Custom Avatar Maximum File Size (bytes)1KB = 1024 bytes
    100000
    Can Upload Images for Signature (yes)
    Yes No
    Can Upload Animated GIF for Signature (yes)
    Yes No
    Signature Image Maximum Width (pixels)
    500
    Signature Image Maximum Height (pixels)
    100
    Signature Image Maximum File-size (bytes)
    10000
    YES on all acounts.
    Can't even find the place where you're allowed to upload an avatar when joining the forum

    Cheers!

    Comment


      #47
      Don't you see Edit Avatar button when you hover on your avatar in the Profile page?
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #48
        Yes, I do!
        And FINALLY I saw how to upload my avatar: Suddenly an "Edit avatar" emerged in that same (empty) position.

        Rounded avatars, here I come !!

        Thanks (again!)


        Cheers!

        Comment


          #49
          I've added the code provided, and now I've got rounded Avatars! Looks really great. Once again: TY very much!

          Cheers!!

          Comment


            #50
            Would someone be so kind to help me with this round avatar trick? I'd like to keep the default avatar size, so I added Glenn's css from his first post and it worked great but the avatars are not all the same circumference on desktop (see screenshots #1 - #3). The postbit avatars are different sizes along with Who's Online and Last Post. Any ideas how this can be fixed? Css is below as well.

            #1 (NoPantsChico has round avatar in Postbit)


            #2 (multiple images different sizes)


            #3 (Last Post avatar on Channel page)



            .avatar img,
            .avatar:not(.medium) > img,
            .b-avatar:not(.b-avatar--m) > img,
            .b-avatar--thread > img,
            .b-avatar--s > img,
            .b-comment .b-avatar img,
            .b-comp-menu-dropdown__trigger-avatar,
            .profile-sidebar-widget .profileContainer .profile-photo-wrapper .profile-photo,
            .b-avatar--pmchat,
            .b-pmchat__participants-avatar,
            img.avatar,
            img.b-avatar {
            border-radius: 100%;
            }

            .avatar,
            .b-avatar,
            .b-userinfo .b-avatar--thread {
            border: 0;
            }


            Thanks so much for your assistance.

            Comment


              #51
              Oval avatars will occur if the avatars are not square. Rectangular avatars will never be perfectly round unless you dynamically clip it but you don't want to do that and lose parts of the avatar just to make it square.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


                #52
                I'm pretty sure I got round the oval avatar thing by changing the max-width and max-height values in css to just width and height.

                Obviously you then stretching and skewing going on but I think it looks good with a uniform size despite that.

                Comment


                  #53
                  That's what I was trying to avoid to disproportionate the avatar size. But if that's fine with anyone, then forcing a fixed square size like Mark.B did should resolve the oval avatar issue.
                  Helpful? Donate. Thanks!
                  Buy me a coffeePayPal QR Code
                  Fast VPS Host for vBulletin:
                  A2 Hosting & IONOS

                  Comment


                    #54
                    Any clear instruction on making the postbit avatar bigger like you have on this site?

                    I thought I had it from the vB site, but founds various css code, config.php changes, but really just a debacle of ideas.

                    Comment


                      #55
                      Originally posted by NumNum View Post
                      Any clear instruction on making the postbit avatar bigger like you have on this site?

                      I thought I had it from the vB site, but founds various css code, config.php changes, but really just a debacle of ideas.
                      This is what I'm currently using. Not sure now where I got the code from, could even have been here!
                      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%;
                      }
                      /* End over-ride postbit avatar size */

                      Comment


                      • NumNum
                        NumNum commented
                        Editing a comment
                        Thank you, Mark.B

                      #56
                      Can anyone please help to make the avatar size bigger and also how to increase the column width.

                      Comment


                        #57
                        Round shape seems much better than square. Thank you!

                        Comment


                          #58
                          How can i make it round here

                          Code:
                          b-post-sm__avatar avatar h-left

                          like this..



                          Click image for larger version

Name:	Screen Shot 2018-03-17 at 11.17.38 PM.png
Views:	170
Size:	37.4 KB
ID:	9781

                          Comment


                          • glennrocksvb
                            glennrocksvb commented
                            Editing a comment
                            The CSS code in the first post should cover all the avatars in all the pages.

                          #59
                          Reinstalled it and works fine, looks like i missed some things..
                          thanks..

                          Comment


                            #60
                            i am loged in but its showing me to login or reg to see hiden code

                            Comment


                            • glennrocksvb
                              glennrocksvb commented
                              Editing a comment
                              The user promotion scheduled task may take a while to be executed. Do you still have the issue right now? You posted 3 hours ago, you should have been promoted at this time.

                            • chocodz
                              chocodz commented
                              Editing a comment
                              its done ty

                          Users Viewing This Page

                          Collapse

                          There is 1 user viewing this forum topic.

                          • Guest Guest

                          Latest Posts

                          Collapse

                          Working...
                          X
                          Searching...Please wait.
                          An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                          Please push the back button and reload the previous window.'
                          An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                          Please push the back button and reload the previous window.'
                          An internal error has occurred and the module cannot be displayed.
                          There are no results that meet this criteria.
                          Search Result for "|||"