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

    Free Mod How to make round avatars in vB5

    Round or circular avatars seem to be a trend now. Prominent sites that use round avatars are Instagram, Pinterest, LinkedIn, Google (Gmail, Google Inbox, Google+, YouTube, etc), and many more.

    Some people either love them or hate them. I for one welcome them but have you ever wondered why some sites use them? Is it just personal preference or was there an underlying reason?
    Click image for larger version  Name:	square-to-round-avatars-min.png Views:	1 Size:	35.0 KB ID:	2872
    Here are some arguments that I found from my googling.

    Round avatars clearly distinguish at a glance people from content or other entities like apps, albums, photos, and so on. Curves and rounded shapes are perceived to be "softer" or "friendlier".
    After some research it turns out we’re pre-programmed to prefer rounded corners. As children we’re quickly taught that sharp corners are dangerous and hurt but rounded corners are safer and friendly.
    Another reason is that the flowing nature of a circle and rounded corners take less cognitive effort, or brain power, to visually process. The less brain power required the easier user interfaces are to use.
    Finally, the box appears to make you focus on the outline instead of the content inside. By using rounded corners the brain is less distracted and as such we process the important information.

    Whether you agree with those arguments or not, you may want to try making round avatars in your forum and see how your users react.

    Add the below CSS in css_additional.css template in AdminCP or in Sitebuilder > Style > CSS Editor.

    Code:
    .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-avatar--thread {
        border: 0;
    }

    Demo:
    Look around this site to see round avatars.

    How about you, do you prefer round or square avatars? Let me know in your comments and replies below.
    Last edited by glennrocksvb; 09-21-2017, 07:47 AM. Reason: Added fix for Who's Online guest avatars courtesy of Mark.B
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    Well, round looks neat but let's see what will be feedbacks from forumers.

    Thanks!

    Comment


      #3
      I like it. How can I make the avatar sizes big ? Like the below one ?
      Click image for larger version

Name:	Screen Shot 2017-03-18 at 20.55.34.png
Views:	1050
Size:	35.6 KB
ID:	3151

      Comment


        #4
        Thanks for that !

        Comment


          #5
          I'd like to know how to make them bigger too? The CSS worked great!
          Dotti

          Comment


            #6
            glennrocksvb, please help. Two queries.

            1. How to make the avatar size large
            2. How to increate the column width where Avatar and other details are placed.

            Comment


              #7
              If you increased the thread font size to something bigger (e.g. this forum uses 16px as default) or you increased the avatar size (like this forum does), then


              For the avatar size, there's a thread in vbulletin.com for that. I will post a link when I find it or look it up yourself.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


              • Dotti
                Dotti commented
                Editing a comment
                Thanks. I found out how to do it and it works fine on my board.

              • 420
                420 commented
                Editing a comment
                Can you post a link to the topic? or post the explanation about how to edit the avatar size?

              • NumNum
                NumNum commented
                Editing a comment
                editing

              #8
              Click image for larger version

Name:	Screen Shot 2017-03-20 at 22.44.46.png
Views:	485
Size:	28.6 KB
ID:	3245

              I have changed my Avatar Size to 150 x 150 but still it doesn't look large enough

              And why there is so much of space between my avatar and the username ? Can you please help glenn ?

              Comment


              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                You have to post a link to your site in order for us to look into the HTML and CSS and be able to suggest a solution.

              #9
              Add the below CSS in css_additional.css template in AdminCP or in Sitebuilder

              Code:

              .avatar img, .avatar:not(.medium) > img, .b-avatar:not(.b-avatar--m) > img, .b-avatar--thread > img, .b-comment .b-avatar img, .b-comp-menu-dropdown__trigger-avatar, .profile-sidebar-widget .profileContainer .profile-photo-wrapper .profile-photo { border-radius: 100%; } .avatar, .b-avatar, .b-avatar--thread { border: 0; }
              Click image for larger version

Name:	220304.png
Views:	487
Size:	43.0 KB
ID:	3589
              Dotti

              Comment


                #10
                Didn't work for me.

                Comment


                • Dotti
                  Dotti commented
                  Editing a comment
                  Let me make sure that's the right thing. I'm new at this.

                #11
                siaforum, what's not working? I checked your site and I can see round avatars.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #12
                  Originally posted by glennrocksvb View Post
                  siaforum, what's not working? I checked your site and I can see round avatars.
                  My bad. I was talking to Dotti above and thought she was referring to making avatars bigger due to her attachment. Apologies.

                  Comment


                    #13
                    Thank you again, this works well on my forum and I don't seem to need to the avatar size

                    Comment


                      #14
                      hello...ive been looking for a while, i cant seem to find the short answer for increasing avatar size..would anyone mind to help? seems it would be a simple thing.....

                      ive added this code for the round ones, and like that... they just arent big enough in postbit...ive tried the code felix2 suggested in addition but no change to size....

                      i havent expanded the postbit width yet, i was going to do avatars first is that possibly limiting them?

                      Comment


                        #15
                        work with vb 3,8,9 ?

                        Comment

                        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 "|||"