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

    #16
    No. This forum channel is for vB5 only. HTML and CSS for vB5 are totally different than vB3 and 4.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #17
      I do mostly mods for vB5. Few for vB4 and none so far for vB3. But some BB Codes in the Custom BB Code forum might work in vB3 and 4.
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #18
        ok man thnx

        Comment


          #19
          How do you make the avatars pop out like they do when you mouse over them? They do it in the "recent visitors" section as well.

          Comment


          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            Using CSS3 animation coolness

          #20
          The round avatars look great when creating and replying to topics. One problem I have is when members post a comment, the round avatars become distorted with a border. The problem resolves itself after refreshing the page however. What could possibly cause this?

          Click image for larger version

Name:	before.JPG
Views:	221
Size:	15.3 KB
ID:	5459Click image for larger version

Name:	after.JPG
Views:	236
Size:	16.8 KB
ID:	5460

          Comment


          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            Does it also happen here?

          • rnedelkow
            rnedelkow commented
            Editing a comment
            It works fine here, Glenn.

          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            I need to see the issue on your site in order for me to help. And what's your vB version?

          #21
          PM sent and I'm on 5.2.5. Thanks Glenn.

          Comment


            #22
            Ok rnedelkow

            Replace this CSS code in css_additional template in AdminCP or Style > CSS Editor in Sitebuilder:
            Code:
            .avatar,
            .b-avatar,
            .b-avatar--thread {
                border: 0;
            }
            with:
            Code:
            .avatar,
            .b-avatar,
            .b-userinfo .b-avatar--thread {
                border: 0;
            }
            And this:
            Code:
            .b-avatar--m > img {
                max-height: 115px !important;
                max-width: 115px !important;
                height: 115px !important;
                width: 115px !important;
            }
            with:
            Code:
            .b-avatar--m > img,
            .b-userinfo .b-avatar--m > img {
                max-height: 115px !important;
                max-width: 115px !important;
                height: 115px !important;
                width: 115px !important;
            }
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #23
              Like a charm, Glenn. Thank you for looking into this for me.

              Comment


              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                Glad to help. 😉

              #24
              Glenn, I just wanted to say how much I appreciate YOU. You are always there to help when you can. Thank you.
              Dotti

              Comment


              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                You're welcome. Thanks for the appreciation
                😊

              #25
              The changes worked on desktop but it also moved the profile fields in the postbit when viewed on mobile. Profile fields shifted onto the avatar like this:

              Click image for larger version  Name:	Screenshot_2017-08-08-10-00-05.png Views:	1 Size:	465.3 KB ID:	5781

              Comment


              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                I need access to your site to take a look at the issue.

              • rnedelkow
                rnedelkow commented
                Editing a comment
                I think I got it Glenn. This did the trick:

                .b-avatar--m > img, /* mobile avatar size =60 */
                .b-userinfo .b-avatar--m > img {
                max-height: 60px !important;
                max-width: 60px !important;
                height: 60px !important;
                width: 60px !important;
                }
                .b-userinfo__details { /* mobile user details to right of avatar */
                margin-left:0px;
                display:none;
                }

              #26
              Thank you. Looks so nice

              Comment


                #27
                Did not work for me. I even tried a different theme.

                Comment


                  #28
                  Did you try in the default style? I can't check your site right now as I'm not on a desktop and guest access is restricted on your site.
                  Helpful? Donate. Thanks!
                  Buy me a coffeePayPal QR Code
                  Fast VPS Host for vBulletin:
                  A2 Hosting & IONOS

                  Comment


                    #29
                    Originally posted by glennrocksvb View Post
                    Did you try in the default style? I can't check your site right now as I'm not on a desktop and guest access is restricted on your site.
                    Just tried it in default. No good. Site is open now. Thanks.

                    Comment


                      #30
                      Originally posted by montana rover View Post

                      Just tried it in default. No good. Site is open now. Thanks.
                      I checked your site and I noticed that your custom css has this text "Note:This code is based off the vB5 Default Style. If you have a highly customized" which breaks the round avatar CSS. I think you got it from another mod which is the Horizontal Postbit Layout. That text is not part of the CSS and should not be included in the CSS. If a CSS code has some text description, it should be enclosed in /* and */ tags so that CSS parser ignores it and treats it as a comment.


                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      Fast VPS Host for vBulletin:
                      A2 Hosting & IONOS

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