Announcement

Collapse
No announcement yet.

How to make round avatars in vB5

Collapse
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.

    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.

        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.

            Comment


              #96
              Click image for larger version

Name:	image.png
Views:	12
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.

                  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:	4
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.

                    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

                      Working...
                      X