Announcement

Collapse
No announcement yet.

Increase Avatar Field Size

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

  • 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.


  • #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.

    GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

    Comment


    • #3
      Bummer. Ok, thanks.

      Comment


      • #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;
        }
        media 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.

      • #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.

        GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and 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.

      • #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


        • #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


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

            Comment


            • #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 31st Aug '15, 4:50pm.

              Comment


              • #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.

              • #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


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

                  Code:
                  .b-userinfo__details {
                  margin-left:0!important;
                  }


                  Comment


                  • #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.

                  • #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


                    • #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...
                    X