Announcement

Collapse
No announcement yet.

White Boxes Around Avatars

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • White Boxes Around Avatars

    So I usually have a keen eye for things, but I'm not sure if this is new or has always existed. I'm noticing white boxes around user avatars, not just on my site, but here as well:

    Click image for larger version

Name:	123.PNG
Views:	153
Size:	43.6 KB
ID:	4428097

    Is it just me, or are these new?

  • #2
    They have always been there. There is an avatar border stylevar that can be changed to hide the white line. I forget what the exact stylevar name is

    Comment


    • #3
      The style variable should be activity_stream_avatar_border.
      Translations provided by Google.

      Wayne Luke
      The Rabid Badger - a vBulletin Cloud demonstration site.
      vBulletin 5 API

      Comment


      • #4
        Wayne is there a style variable for the avatar borders that are showing in the "whats going on, users online"?

        Comment


        • #5
          Try thread_view_avatar_border and side_nav_avatar_border.

          Not really sure why we are using three different classes for Avatar styling.
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud demonstration site.
          vBulletin 5 API

          Comment


          • #6
            side_nav_avatar_border works for the avatar when viewing a users profile

            Thread_view_avatar_border works for threads

            Neither works for the who's online avatars. Any other ones to try?

            Comment


            • #7
              I've removed the borders using only the custom css box.

              Code:
              .b-avatar--thread,.avatar {
              border: none;
              }
              I then added this to put a border around the avatar image (as opposed to the avatar container)

              Code:
              .b-avatar--m > img, .b-avatar > img {
              border: 1px #fff solid;
              }

              Comment


              • Carrfixr
                Carrfixr commented
                Editing a comment
                Thanks
                That worked out nice and covers all the areas

            • #8
              AS stated, using CSS can override the style variables. The system was designed this way on purpose.
              Translations provided by Google.

              Wayne Luke
              The Rabid Badger - a vBulletin Cloud demonstration site.
              vBulletin 5 API

              Comment


              • #9
                Originally posted by Echidna View Post
                I've removed the borders using only the custom css box.

                Code:
                .b-avatar--thread,.avatar {
                border: none;
                }
                I then added this to put a border around the avatar image (as opposed to the avatar container)

                Code:
                .b-avatar--m > img, .b-avatar > img {
                border: 1px #fff solid;
                }
                Thank you very much, this worked perfectly!!

                Comment


                • #10
                  Where in the CSS edit is this located. I looked through the CSS menu in the Admin panel and could not locate it.

                  Comment


                  • #11
                    No need to go into AdminCP. Select the STYLES button (next to the admincp) and then select the css editor.
                    Place the code in the css editor box.

                    Comment


                    • #12
                      Many thanks to all and for the code snippet, it works - no border at all.

                      Comment


                      • #13
                        Looking at the CSS for the posts, I am not seeing anything about avatars.

                        Comment


                        • #14
                          thol4m, why don't you follow Echidna's instruction? It helps and you need not to view all other code which is not necessary.
                          Originally posted by Echidna View Post
                          No need to go into AdminCP. Select the STYLES button (next to the admincp) and then select the css editor.
                          Place the code in the css editor box.

                          Comment


                          • #15
                            It worked pasting it in the CSS box. It looks a lot tidier.

                            Is there a CSS I can use to hide the unattractive avatar place holders when a member does not upload a custom avatar? It looks very untidy.

                            Another option would be to replace it with the forum logo.

                            Comment

                            Related Topics

                            Collapse

                            Working...
                            X