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:	1
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.
                Working...
                X