Announcement

Collapse
No announcement yet.

I enlarged in-thread avatars, but they don't fit in the left column. Can I enlarge that?

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    I enlarged in-thread avatars, but they don't fit in the left column. Can I enlarge that?

    Hey
    Forgive me if this is a newbie question - I just installed Vbulletin today!

    I found a code to enlarge in-thread avatars, but I can't figure out how to enlarge the column around it.

    There's just one post in my forum so far, which I put up for the purpose of testing the looks.

    The avatar is 100x100 now, but it doesn't fit in its column on the left. Is there a way to widen that column?

    #2
    Yes there is. On this site Glenn has posted it.

    If you increased the thread font size to something bigger (e.g. this forum uses 16px as default) or you increased the avatar size (like this forum does), then

    Comment


      #3
      Thank you so much! That worked, but now my avatar moved and it still isn't centered in the column. Is there some way to fix that too?

      Comment


        #4
        It might be your social button widths affecting it. Try this code to your additional_css that Glenn has shared;

        Code:
        /*social button width start*/
        .b-button {
            border-radius: 10px;
        }
        .b-sharing-menu {
            margin-left: 30px;
            margin-right: 30px;
        }
        /*social button width stop*/

        Comment


          #5
          I really appreciate the response - unfortunately it still looks the same.

          I'll show you everything I've written in my Additional CSS. The first code was to enlarge the avatar - I got it from vbulletin forum - and the second was to enlarge the surrounding column, the code you shared. The third is this one above.

          ____

          .b-avatar--m > img {
          max-height: 100px;
          max-width: 100px !important;
          zoom: 1.75;
          position: relative;
          right: 10px;
          bottom: 5px;
          }
          media (max-width: 768px) {
          .b-avatar--m > img {
          max-height: 100px;
          max-width: 100px !important;
          zoom:1.25;
          padding-left:4px;
          }}

          .l-desktop .conversation-list.thread-view .l-col__flex-3,
          .l-desktop .conversation-list.thread-view .l-row__fixed--left > .l-col__flex-3 {
          margin-left: 205px;
          }
          .l-desktop .conversation-list.thread-view .l-col__fixed-3,
          .l-desktop .conversation-list.thread-view .l-row__fixed--left > .l-col__fixed-3 {
          width: 205px;
          padding-right: 0;
          }

          /*social button width start*/
          .b-button {
          border-radius: 10px;
          }
          .b-sharing-menu {
          margin-left: 10px;
          margin-right: 10px;
          }
          /*social button width stop*/

          Comment


            #6
            Try adding this below in place of the avatar and postbit you have above


            Code:
            /* Start over-ride postbit avatar size */
             .b-avatar--m > img {    
            max-height: 175px;    
            max-width: 175px !important; }
            
            .b-avatar--m {    
            height: 100%;    
            width: 100%; }
            /* End over-ride postbit avatar size */
            
            /* Wider Postbit */
            .l-desktop .conversation-list.thread-view .l-col__flex-3,
            .l-desktop .conversation-list.thread-view .l-row__fixed--left > .l-col__flex-3 {
                margin-left: 224px;
            }
            .l-desktop .conversation-list.thread-view .l-col__fixed-3,
            .l-desktop .conversation-list.thread-view .l-row__fixed--left > .l-col__fixed-3 {
                width: 224px;
                padding-right: 0;
            }
            .conversation-list.thread-view .l-small .b-post__arrow {
              left: 52px;
            }
            .l-small .b-userinfo .b-avatar, .l-small .b-userinfo__details, .l-small .b-userinfo__additional-info {
              width: auto;
            }
            /* End Wider Postbit */
            Code:
             
            /*Thread View Avatar Size Start*/
            .b-avatar--m {
                height: auto;
                width: 150px;
            }
            .b-avatar--m > img {
                max-height: 150px;
                max-width: 150px !important;
            }
            /*Thread View Avatar Size End*/


            Comment


              #7
              Thank you so much! Unfortunately I tried to enter it and my avatar got tiny. I was just on a few other threads though, and I'll share the codes I'm using which worked. It is a combination of codes from this forum posted on this thread above and this one (by Glenn on page 1 and Mark B on page 4) which enlarge the avatar, enlarge the column, and make the avatar round.

              /* Start over-ride postbit avatar size */
              .b-avatar--m > img {
              max-height: 200px;
              max-width: 200px !important;
              }
              .b-avatar--m {
              height: 100%;
              width: 100%;
              }
              /* End over-ride postbit avatar size */

              .l-desktop .conversation-list.thread-view .l-col__flex-3,
              .l-desktop .conversation-list.thread-view .l-row__fixed--left > .l-col__flex-3 {
              margin-left: 250px;
              }
              .l-desktop .conversation-list.thread-view .l-col__fixed-3,
              .l-desktop .conversation-list.thread-view .l-row__fixed--left > .l-col__fixed-3 {
              width: 250px;
              padding-right: 0;
              }

              /*social button width start*/
              .b-button {
              border-radius: 10px;
              }
              .b-sharing-menu {
              margin-left: 10px;
              margin-right: 10px;
              }
              /*social button width stop*/

              .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;
              }
              You can see the avatar on my forum here.

              Comment


                #8
                Sorry, I am still not sure which button you guys are using to post the code correctly? If anyone wants me to repost it I'm happy to, but I'm not sure how to do it in that small neat box the way you guys do :O

                Comment


                  #9
                  Open the enhanced editor
                  Click the # symbol
                  put the code in between the ] [

                  Comment


                    #10
                    glennrocksvb will be by to fix your problem. Hang in there

                    Comment


                      #11
                      Oh it's ok, I think I fixed it! I got the avatar to be round and large - and I got the margin to spread out the way I need. There's only one post on my forum, it's a test post - but it's here. . I just posted my code above in case anyone wanted to use it. (Most of it came from this forum.)

                      Thank you so much!!

                      Now I need to figure out how to edit the colors and font size on my chosen style.

                      Comment


                      • glennrocksvb
                        glennrocksvb commented
                        Editing a comment
                        Glad you figured it out!

                      #12
                      Now my avatar is huge on every post (exactly the way I want it), but the other posters have smaller avatars. My code is copied here exactly.

                      What might have gone wrong?

                      Also, I'll mention that the user whose avatar is large is me - but it's not the same account I use as an admin. The admin's account does not have the large avatar. Only the other account, which is the first one that I used to write a test post.

                      glennrocksvb any ideas?

                      Comment


                        #13
                        When you uploaded the avatar on the user with smaller avatar, you uploaded a 100x100 image. While on the bigger one, you uploaded 200x200. Re-upload the avatar for the smaller one and use a bigger image.
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        Comment


                          #14
                          The images are small for all of the users except one - and yet their pictures look big (200 x 200 specifically) on their profiles. They just show up small in postbit.

                          Also, I have 2 profiles and my husband has one. The other people posting here are my friends. All of their images are large images, but they got resized to tiny ones in postbit (not in profiles). The only one that isn't tiny is that one user, which is me - the first one that ever posted.

                          Comment


                            #15
                            Ok I think I fixed it - I needed to rebuild avatar thumbnails.

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