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

    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*/

    Code:
    /* 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*/
    this code works for big avatars on postbit for vbulletin 5.6.4
    thank you very much for the code

    Comment


      Originally posted by danielmorashov View Post

      Code:
      /* 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*/
      this code works for big avatars on postbit for vbulletin 5.6.4
      thank you very much for the code
      Yes it blows them up, but they also become very grainy.

      Comment


        Originally posted by glennrocksvb View Post
        https://vbmods.rocks/forum/vbulletin...dth-of-postbit

        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.
        This is the code for controlling the size of avatars

        Code:
        .l-desktop .b-avatar--thread { height: 128px; width: 128px; border: 0; } .l-desktop .b-avatar--thread > img { max-height: 128px; max-width: 128px !important; width: 128px; height: 128px; }

        Comment


          wrong URL when clicking User in Viewtopic

          Hello, on my vbulletin 5.6.4.1 I have a strange link for user profile in viewtopic :

          Instead of :

          Code:
          https://www.tenisdemasa.ro/forum/member/7540-adn
          it is

          Code:
          https://www.tenisdemasa.ro/forum/https://www.tenisdemasa.ro/forum/member/7540-adn
          This is not happening for all user profiles, some are correct.
          For example, in the same topic, for the same user I have two different links for user profile, one incorrect.

          I see the main URL
          Code:
          https://www.tenisdemasa.ro/forum
          of the forum is added once again as a prefix for the real link

          Click image for larger version

Name:	user nok.jpg
Views:	78
Size:	48.6 KB
ID:	23058Click image for larger version

Name:	user ok.jpg
Views:	76
Size:	44.0 KB
ID:	23059
          Attached Files

          Comment


            When I add the code to the additional.css file, and does not change the avatar. Is this mod still working?

            Comment


              Could you please adjust this edit for vbulletin 3.8.x

              Thank You Bro

              Comment


                Originally posted by aSpeNDos View Post
                Could you please adjust this edit for vbulletin 3.8.x

                Thank You Bro
                Try adding this custom CSS. But avatars in vB3 may not be square so making them round may turn into oval (oblong).

                Code:
                a[href^="member.php?u="] img {
                    border-radius: 100%;
                }
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  I noticed on comments where a user is tagged the avatar is square, as seen here.

                  Comment


                    Originally posted by NumNum View Post
                    I noticed on comments where a user is tagged the avatar is square, as seen here.
                    Right. Unfortunately, the way the avatar is implemented in tags as a background image, it's impossible in CSS to make it rounded without also making the @ username text rounded.
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                      This is a great mod. It is working on default templates/styles but not on the customized style. What could be the problem with the customized style?
                      https://www.interpretersweb.com/forums

                      Comment


                        Amazon Cyber Monday Deals
                        There is a CSS code in css_additional of the custom theme that tells ALL elements (not just images) should have border-radius of zero which means not rounded.

                        Code:
                        * {
                            border-radius: 0 !important;
                        }
                        The !important in the code overrides other CSS code. To override this for avatars, then also add !important​ in the rounded avatar's code by changing this part:

                        Code:
                        border-radius: 100%;
                        to:

                        Code:
                        border-radius: 100% !important;
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        Comment


                        • mohammed
                          mohammed commented
                          Editing a comment
                          Thank you so much! It is working now with the new code.

                      Latest Topics

                      Collapse

                      Working...
                      X