Announcement

Collapse
No announcement yet.

How to make round avatars in vB5

Collapse
This is a sticky topic.
X
X
  • 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.

    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.

      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:	1
Size:	15.3 KB
ID:	5459Click image for larger version

Name:	after.JPG
Views:	1
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:
            You need to be logged in to view the code. Login or Register now!
            with:
            Code:
            You need to be logged in to view the code. Login or Register now!
            And this:
            Code:
            You need to be logged in to view the code. Login or Register now!
            with:
            Code:
            You need to be logged in to view the code. Login or Register now!

            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
              www.dwlz.com
              www.dwlz2.com/forum/

              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;
                }
            Working...
            X