Increase Avatar Field Size

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Flash04jv
    Senior Member
    • Aug 2015
    • 474
    • 5.1.x

    Increase Avatar Field Size

    How do I increase the size of the box the avatars are in? Not talking about the allowable upload size in usergroups, the actual amount of space the photo takes up.

    Here is a photo of what I am talking about. I want that avatar to be as large, roughly, as the white box. Right now there is a tiny avatar and a ton of blank space around it I'd like to fill in some.

  • glennrocksvb
    Former vBulletin Developer
    • Mar 2011
    • 4011
    • 5.7.X

    #2
    At the moment, the only way to enlarge the avatar size is to modify some php file where the avatar size is hardcoded. There is a tutorial here on how to do this. But unfortunately, editing files is not allowed in vBCloud.

    Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

    Comment

    • Flash04jv
      Senior Member
      • Aug 2015
      • 474
      • 5.1.x

      #3
      Bummer. Ok, thanks.

      Comment

      • Replicant
        Senior Member
        • Sep 2014
        • 527

        #4
        Try adding this to your css_additional.css template. Adjust sizes to taste.

        Code:
        .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
          margin-left: 240px!important;
        }
            .b-userinfo__details {
          width: 240px;
          margin-left: -20px;
         
        }
        .b-avatar--m {
          height: 200px!important;
          width: 200px!important;
        }
          
        .b-avatar--m > img {
          max-height: 200px!important;
          max-width: 200px !important;
          height: 200px!important;
          width: 200px!important;
        }
        [USER="3396"]media[/USER] only screen and (max-width: 783px) {
           .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
                margin-left:0px!important;
                float:none!important;
            }
        .b-userinfo__details {
          margin-left: 0; 
            display:none;
        } 
        
            .b-avatar--m {
          height: 60px!important;
          width: 60px!important;
        }
          
        .b-avatar--m > img {
          max-height: 60px!important;
          max-width: 60px !important;
          height: 60px!important;
          width: 60px!important;
        }}


        Comment


        • Flash04jv
          Flash04jv commented
          Editing a comment
          I tried, edited some to large numbers so I would see change, but nothing happens for me?

        • Replicant
          Replicant commented
          Editing a comment
          It's not working because you're missing the closing brace on the last media query in your css_additional.css. Add that brace after your last entry and then paste the code. Your b-avatar entry is also wrong. display:none not display-none.

        • Flash04jv
          Flash04jv commented
          Editing a comment
          Booom!!! You da man! Worked for my reputation bars as well. Thank you so much for you time!! Learning lots of good things on here.
      • glennrocksvb
        Former vBulletin Developer
        • Mar 2011
        • 4011
        • 5.7.X

        #5
        That works but that may stretch the images if the dimensions set in CSS are too large from the actual dimensions of the images.

        Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

        Comment


        • Replicant
          Replicant commented
          Editing a comment
          Yes it does. If people want bigger avatars, they'll need use square images for it to look correct. It also has other side effects that show up when using custom styles. This is just starter code. I'm sure by the time it's finished and debugged, it'll be a lot more lines of code.
      • Flash04jv
        Senior Member
        • Aug 2015
        • 474
        • 5.1.x

        #6
        I'm working on it now, at least I can get far enough to see how it will go since adding that end bracket.

        Comment

        • Replicant
          Senior Member
          • Sep 2014
          • 527

          #7
          If you're gonna do avatars smaller than 150px, lose these two lines.
          Code:
           
           .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {   margin-left: 240px!important; }     .b-userinfo__details {   width: 240px;   margin-left: -20px;   } .b-avatar--m {   height: 200px!important;   width: 200px!important; }


          Comment

          • Flash04jv
            Senior Member
            • Aug 2015
            • 474
            • 5.1.x

            #8
            Ok, I got the page looking sweet! But now my mobile looks all jacked up.

            Comment

            • Flash04jv
              Senior Member
              • Aug 2015
              • 474
              • 5.1.x

              #9
              Alright. I think I got it. Looks fantastic on PC and Mobile.

              I kept removing stuff until it looked right. Made the user fields nice and tight which I was trying so hard to remove all that padding the other night. Two things taken care of at once! Thanks so much for your guys help, much appreciated.

              Here is all I have in there right now:

              Code:
              .b-userinfo__details {
                width: 180px;
                margin-left: -25px;
               
              }
              
              .b-avatar--m {
                height: 115px!important;
                width: 115px!important;
              }
               
              .b-avatar--m > img {
                max-height: 115px!important;
                max-width: 115px !important;
                height: 115px!important;
                width: 115px!important;
              }
              Edit, added the userinfo line at the top. Join date wrapped funny without it. That code is working great for me.
              Last edited by Flash04jv; Mon 31 Aug '15, 4:50pm.

              Comment

              • Flash04jv
                Senior Member
                • Aug 2015
                • 474
                • 5.1.x

                #10
                What do the media lines of code do? I had that in another code too and not sure what it even does for me.

                Comment


                • Replicant
                  Replicant commented
                  Editing a comment
                  It adds that css within that query for the resolution width specified. It's for resizing and changing things up for smaller screens.
              • Flash04jv
                Senior Member
                • Aug 2015
                • 474
                • 5.1.x

                #11
                Update: I see the avatar is bit off center with just the code I posted. Needs some minor tweaking but it
                looks great.

                Comment

                • Replicant
                  Senior Member
                  • Sep 2014
                  • 527

                  #12
                  Userinfo is too far to the left. Try adding this inside the media query braces for 768 max width.

                  Code:
                  [COLOR=#888888][FONT=dejavu sans mono][SIZE=11px][COLOR=#222222].b-userinfo__details[/COLOR][/SIZE][/FONT][/COLOR][COLOR=#303942][FONT=dejavu sans mono][SIZE=11px] {
                  margin-left:0!important;
                  }[/SIZE][/FONT][/COLOR]


                  Comment

                  • Flash04jv
                    Senior Member
                    • Aug 2015
                    • 474
                    • 5.1.x

                    #13
                    I got it dialed in a bit better. Here is what it looks like and the code I have in CSS (ignore the broken links in the photo, that is another project we're working on):

                    Code:
                    .b-userinfo__details {
                      width: 170px;
                      margin-left: -25px;}
                    
                    .b-avatar--m {
                      height: 100px!important;
                      width: 100px!important;}
                     
                    .b-avatar--m > img {
                      max-height: 100px!important;
                      max-width: 100px !important;
                      height: 100px!important;
                      width: 100px!important;}

                    Comment


                    • Replicant
                      Replicant commented
                      Editing a comment
                      Your userinfo is overlapping the avatar in responsive mode. That's what the last code I posted is for. Narrow your browser window to see what I'm talking about.

                    • Flash04jv
                      Flash04jv commented
                      Editing a comment
                      Ohh, ok. When I narrow the browser the text goes over the avatar just like the mobile. Been wondering how that works. I have another responsive code for status icons I also need to adjust. I will get that put in after work and see what it does. Thanks again for all your help.
                  • Flash04jv
                    Senior Member
                    • Aug 2015
                    • 474
                    • 5.1.x

                    #14
                    Had an issue with the Media fields not doing anything when I changed them, found out I either deleted or did something wrong so the @ in front of Media was missing. Added it and everything went right to place. The full code Replicant shared above is all needed and everything I could ask for.

                    Comment

                    • Haiwan88
                      Senior Member
                      • Jul 2015
                      • 126
                      • 5.1.x

                      #15
                      i have this problem

                      i changed aditional CSS to .b-avatar--m > img {
                      max-height: 90px;
                      max-width: 90px !important;
                      }



                      but no work

                      this is css with firebug
                      .thread-view .b-avatar--m > img {
                      max-height: 90px;
                      max-width: 90px !important;


                      }





                      .b-avatar--m > img {
                      max-height: 90px;
                      max-width: 90px !important;


                      }

                      .b-avatar--m > img {
                      max-height: 64px;
                      max-width: 64px !important;



                      }

                      .b-avatar > img {
                      max-height: 32px;
                      max-width: 32px;


                      }

                      #sg_canvas fieldset, img {
                      border: 0 none;


                      }

                      img {
                      height: auto;
                      max-width: 100%;


                      }

                      Comment


                      • Flash04jv
                        Flash04jv commented
                        Editing a comment
                        May need to start a new thread to get the help you are after. I wish I could help you, I don't know enough to understand your issue though.

                    Related Topics

                    Collapse

                    Working...