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

    Originally posted by Mark.B View Post

    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 */
    Old post but this code works well on 5.5.5 even now.

    Comment


      Hello,

      I used this code to make round avatars, I also forced avatars to be square 128x128 and biger.
      Everything is working fine on my 5.6.0 vBulletin forum, except little avatars (used as topic icons) that are not all circle but some are ovals.
      In postbit all avatars are circles.

      the additional CSS
      Code:
      /* Start Avatars without Borders */
      .avatar,
      .b-avatar,
      .b-avatar--thread {
          border: 0;
      }
      /* End Avatars without Borders */
      /* Big Avatars START */
      .b-userinfo .b-avatar, .b-userinfo .b-avatar img {
            max-height: 128px;
          max-width: 128px !important;
          width: 128px;
          height: 128px;
      }
      /* Big Avatars END*/
      /* Round Avatars START*/
      .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;
      }
      .b-avatar--thread img {
          border: 1px solid #fff;
      }
      /* Round Avatars END*/


      Comment


        Originally posted by tenis View Post
        Hello,

        I used this code to make round avatars, I also forced avatars to be square 128x128 and biger.
        Everything is working fine on my 5.6.0 vBulletin forum, except little avatars (used as topic icons) that are not all circle but some are ovals.
        In postbit all avatars are circles.

        the additional CSS
        Code:
        /* Start Avatars without Borders */
        .avatar,
        .b-avatar,
        .b-avatar--thread {
        border: 0;
        }
        /* End Avatars without Borders */
        /* Big Avatars START */
        .b-userinfo .b-avatar, .b-userinfo .b-avatar img {
        max-height: 128px;
        max-width: 128px !important;
        width: 128px;
        height: 128px;
        }
        /* Big Avatars END*/
        /* Round Avatars START*/
        .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;
        }
        .b-avatar--thread img {
        border: 1px solid #fff;
        }
        /* Round Avatars END*/

        Maybe I can help you . Pm

        Comment


          I like it thanks )

          Comment


            Originally posted by tenis View Post
            Hello,

            I used this code to make round avatars, I also forced avatars to be square 128x128 and biger.
            Everything is working fine on my 5.6.0 vBulletin forum, except little avatars (used as topic icons) that are not all circle but some are ovals.
            In postbit all avatars are circles.

            the additional CSS
            Code:
            /* Start Avatars without Borders */
            .avatar,
            .b-avatar,
            .b-avatar--thread {
            border: 0;
            }
            /* End Avatars without Borders */
            /* Big Avatars START */
            .b-userinfo .b-avatar, .b-userinfo .b-avatar img {
            max-height: 128px;
            max-width: 128px !important;
            width: 128px;
            height: 128px;
            }
            /* Big Avatars END*/
            /* Round Avatars START*/
            .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;
            }
            .b-avatar--thread img {
            border: 1px solid #fff;
            }
            /* Round Avatars END*/

            Send me a link to your forum and I will write you a fix here.

            EDIT: Thanks for the link. After checking your forum I have realized that everything is fine with the above code.

            You need to tell your users to upload bigger avatars at least (100px x 100px), and the problem is solved.

            Comment


              Thank you for your help.
              Any fix for the non square avatars?
              I mean little avatars (used as topic icons) that are not all round but some are ovals. Also the avatar icons for Last Post (see above attached printscreen)

              In postbit all avatars are round not oval.

              Any way to increase the size "Las post" avatar in the view threads? Like in this forum. See attached.

              Comment


                Like I've said, you need to tell your users to upload bigger avatars, at least (100px x 100px).

                Comment


                  Originally posted by zoran_dj View Post
                  Like I've said, you need to tell your users to upload bigger avatars, at least (100px x 100px).

                  its not about the size, he did something wrong with his css code .

                  Comment


                    On this forum I had more help then the entire vb org and com team (where I also asked for help after they updated my forum from vb4).
                    Thank you again.

                    Comment


                      Originally posted by tenis View Post
                      On this forum I had more help then the entire vb org and com team (where I also asked for help after they updated my forum from vb4).
                      Thank you again.

                      This forum is dead too. Pretty much, I haven’t seen glen for a while. So idk to be honest.

                      Comment


                        Originally posted by faustvasea View Post


                        its not about the size, he did something wrong with his css code .
                        And why does this happen with the users who have uploaded the small avatars only and not with the others?

                        The code is just fine, I have checked it multiple times.

                        Comment


                          Originally posted by zoran_dj View Post

                          And why does this happen with the users who have uploaded the small avatars only and not with the others?

                          The code is just fine, I have checked it multiple times.
                          It could be probably because of browser cache. I had same code too, and was alright

                          Comment


                            Excellent. Thank you.
                            I ended up changing it to just border-radius 8% because it cuts off the url in the bottom of my avatar. I'll probably just make a different avatar later and go round.
                            Just having the border removed makes this mod great, too.
                            Works in vB 5.6.0.

                            Comment


                              Hi, I've got the following code in css_additional.css for the "Gradient" that came with VB5.

                              Code:
                              body {
                              background-attachment: fixed;
                              }
                              /* Start avatar edit */
                              /* Start avatar round */
                              .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3
                              {
                              margin-left: 240px!important;
                              }
                              .b-userinfo__details
                              {
                              width: 240px; margin-left: -20px;
                              }
                              .b-avatar--m
                              {
                              height: 200px!important;
                              width: 200px!important;
                              }
                              .b-avatar--m > img,
                              .b-userinfo .b-avatar--m > img {
                              max-height: 200px !important;
                              max-width: 200px !important;
                              height: 200px !important;
                              width: 200px !important;
                              }
                              
                              
                              
                              
                              .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;
                              }
                              Looks like it's working as intended, except all avatars are pixelated inside of threads. Looks fine on the profile page.
                              Click image for larger version

Name:	Screenshot 2020-06-04 13.29.38.png
Views:	233
Size:	57.3 KB
ID:	21938
                              Click image for larger version

Name:	Screenshot 2020-06-04 13.30.59.png
Views:	162
Size:	216.2 KB
ID:	21939

                              url is ilechoo.com

                              The round thing is cool, but all I really wanted to do was use larger avatars.

                              I would appreciate and am grateful for any help with this. Thank you

                              Comment


                                working great in 5.6.3
                                thank you

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