Increase Avatar Field Size

[Flash04jv]

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]

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.

[Flash04jv]

Bummer. Ok, thanks.

[Replicant]

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

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

[Flash04jv]

I tried, edited some to large numbers so I would see change, but nothing happens for me?

[Replicant]

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]

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]

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

[Replicant]

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]

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

[Replicant]

If you're gonna do avatars smaller than 150px, lose these two lines.

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

[Flash04jv]

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

[Flash04jv]

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:

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

[Flash04jv]

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

[Replicant]

It adds that css within that query for the resolution width specified. It's for resizing and changing things up for smaller screens.

[Flash04jv]

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

[Replicant]

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

[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]

[Flash04jv]

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):

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

[Replicant]

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]

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]

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.

[Haiwan88]

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%;


}

[Flash04jv]

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.