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

    #91
    You have this CSS code in css_additional that overrides the border-radius.

    Code:
    * {
        border-radius: 0 !important;
    }
    That code means don't make the border of ALL tags round.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #92
      glennrocksvb
      ​​​​​​​this code
      Code:
      {
          border-radius: 100%;
      }
      I changed it with the code you wrote, problem not solved.

      Comment


        #93
        No, I wasn't saying to use the code I posted in post #91. I was saying to remove it as it is the code that's causing the avatars not to be rounded.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #94
          Originally posted by glennrocksvb View Post
          No, I wasn't saying to use the code I posted in post #91. I was saying to remove it as it is the code that's causing the avatars not to be rounded.
          Thanks for your support. I did rounded avatars but some avatars are more rounded(oval) . I read topic but i couldn't. Can you please help ?

          Comment


            #95
            If an avatar is not a square, then it will become oval. You don't want to force it to be square as the image will be stretched.
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #96
              Click image for larger version

Name:	image.png
Views:	530
Size:	15.4 KB
ID:	14731

              Had a member join today and his/her avatar came out like this. Is this a product of the avatar being too small? I'm sure force stretching the avi isn't ideal, but is it doable in times like these?

              Comment


                #97
                Where does the thin white border you have around these round avatars derive from?
                I've achieved round avatars, and I've made them larger, but I can't seem to give them a border.
                If I alter ...
                Code:
                .b-avatar--thread {
                    border: 0;
                }
                … to ...
                Code:
                .b-avatar--thread {
                    border: 1;
                }
                … I get a 1px square border around my round avatar.

                Comment


                • glennrocksvb
                  glennrocksvb commented
                  Editing a comment
                  Put the border in the image itself not in its container.

                  Code:
                  .b-avatar--thread img {
                      border: 1px solid #fff;
                  }

                • DXW
                  DXW commented
                  Editing a comment
                  Ahhhh thanks. That might fix some of the shadowing oddities I have been getting.

                • DXW
                  DXW commented
                  Editing a comment
                  Nope. That give me square borders again.

                • glennrocksvb
                  glennrocksvb commented
                  Editing a comment
                  Need to see the site in order to see what's happening.

                • DXW
                  DXW commented
                  Editing a comment
                  PM incoming

                #98
                PM incoming.

                Comment


                  #99
                  The square border is by default coming from the avatar anchor link which has b-avatar--thread CSS class. If you want to get rid of it, then override it with this code.

                  Code:
                  .b-avatar--thread {
                      border: 0;
                  }
                  If you want to put border around the avatar img, then add:

                  Code:
                  .b-avatar--thread img {
                      border: 1px solid #fff;
                  }
                  As per your question about css_additional.css, it is a template and by default, templates are stored in the database. So you will not see it in the file system. But you could also switch the templates to store from database into file system. But even then, you should not edit it directly as it will get re-generated every time you update the template in AdminCP.
                  Helpful? Donate. Thanks!
                  Buy me a coffeePayPal QR Code
                  Fast VPS Host for vBulletin:
                  A2 Hosting & IONOS

                  Comment


                  • DXW
                    DXW commented
                    Editing a comment
                    Done, thanks. Now the larger, postbit, avatars look good with a border and drop-shadow,while the small ones elsewhere are clean an unencumbered.

                  I got a bug on some avatars.

                  I'm pretty sure that is from image size.

                  Is there possible to fix this bug?
                  Click image for larger version

Name:	Untitled-1.jpg
Views:	163
Size:	28.5 KB
ID:	15518

                  Comment


                    That's not a bug. That happens when an avatar is not square. If you force it to be square using CSS, the avatar will be skewed or stretched and may not look good.
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                      Is that possible to fix this out?

                      Comment


                      • glennrocksvb
                        glennrocksvb commented
                        Editing a comment
                        Yes by forcing the avatar to be square using CSS. But it may not look good as I mentioned in my previous post.

                      Sad... Thanks for quick reply.

                      Comment


                        Thank you! It is working on my website in the default style. However, it is not working on a customized style (Metro). Do you think it is an error or bug in the customised style?
                        www.interpretersweb.com/forums

                        Comment


                          I went for a blended code to give larger, rounded avatars that will show as circles or (vertical or horizontal) ovals.

                          Thank you to the original posters.

                          Code:
                          /* Start avatar edit */
                          /* Start avatar round */
                          .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;
                          }
                          /* End avatar round */
                          
                          /* Start over-ride postbit avatar size */
                          .b-userinfo .b-avatar, .b-userinfo .b-avatar img {
                              max-height: 128px;
                              max-width: 128px !important;
                              width: 100px;
                           /* height: 100px; */
                          }
                          /* End over-ride postbit avatar size */
                          
                          /* Start avatar border */
                          .b-avatar--thread img {
                              border: 2px solid #fff;
                          }
                          /* End avatar border */
                          /* End avatar edit */

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