Larger Avatars In Postbit?

[jkotlowski]

Hi, I've been trying (unsuccessfully) to increase the size of avatars as shown in a topic. I'm running vB Cloud, so I don't have access to most of the CSS, unfortunately. I just have a small "CSS Editor" in the styles section. Right now I'm using this code;

.thread-view .b-avatar--m {
    height: 130px;
    width: 130px;
}
.thread-view .b-avatar--m > img {
    max-height: 130px;
    max-width: 130px !important;
}

And it's working, but I can't make the images any larger than 130 pixels or else it becomes uncentered in the postbit, and if I make it too much larger it actually runs into the post area and gets cut off. I guess I'm looking for a way to widen the postbit some so that images can be larger. My members want avatars with a max width of 200 and a height of 250 or 300.

Is there any way to do this with CSS edits? Or am I SoL?

Thanks in advance. And I hope I put this in the right area... ^_^;

[Replicant]

Making the avatars any larger than 100 - 130px really screws up the responsive design. It can be done with CSS, but the system is really stubborn to let go of the default values since they are already using !important on some of them. The background of the postbit is pretty tricky too. It would be a lot easier to do with template edits but since you are on cloud, that's not an option. All I have to offer is good luck, I gave up on it.

[jkotlowski]

Thank you for the help, regardless. I'll keep tinkering, maybe I can figure something out.

[jkotlowski]

I've upgraded to a full version of vBulletin 5 now, running 5.1.7, if anyone has a method to increase the sizes.

[jkotlowski]

I've tried a handful of codes that I've found across the forums but none of them expand the postbit's size, so avatars larger than 130 pixels in width always seem to but cut off. Pretty annoying, not entirely sure why vBulletin would take out such an important feature as custom avatar sizes. Seems counter-productive... (though a lot of things in VB5 seem this way...)

[Cichlidgeek]

As a sidenote, how do you like not being on the Cloud?
I'm still on it, but some things are really making me want to upgrade.

[Aros12]

Not sure this applies but I am on vB5.2 and with Replicant's help I got my avatars to increase while maintaining responsive integrity.

This is in the additional.css...

/* start custom avatar size */

.l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
margin-left: 240px!important;
}
.b-userinfo__details {
width: 240px;
margin-left: -20px;
}
.l-desktop .b-userinfo {
width: 210px;
}
.b-avatar--m {
height: 125px!important;
width: 125px!important;
}

.b-avatar--m > img {
max-height: 125px!important;
max-width: 125px !important;
height: 125px!important;
width: 125px!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;
}}

I also increased the width of the postbit itself to accommodate the larger avatar size and user info...(Change colors, etc to taste)

/* widen postbit to 200px*/
col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
    margin-left: 200px;
}
.l-col__fixed-3, .l-row__fixed--left > .l-col__fixed-3 {
    width: 200px;
 
}

/*make width mod responsive*/
@media screen and (max-width: 784px){
 col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
    margin-left: 0px;
    }

}

.sb-dialog.ui-dialog-content.ui-widget-content a, {
   font-size: 12px;
    color: #000;
    text-decoration: underline;
}
  
.sb-dialog.ui-dialog-content.ui-widget-content a:active, {
   font-size: 12px;
    color: #4871c3;
    text-decoration: underline;
}
  
.sb-dialog.ui-dialog-content.ui-widget-content a:visited {
   font-size: 12px;
    color: #4871c3;
}

.conversation-list.stream-view.stream-view-full-width .list-item {padding: 10px 10px 10px 10px; }

.view-mode .widget-no-border .widget-header {margin-top:15px;}

.b-photo-count .b-photo-count__count {
    font-size: 12px;
    color: #000;
}
.b-userinfo__details .author a {color: #FFFFFF !important;}

.b-userinfo__details .author a:hover {color: #FF9600 !important;}

.b-userinfo__details {
    font-size: 12px;
    color: #90b9fd;
}
.b-userinfo__details a {
    font-size: 14px;
}
.b-post {
    background: #28428c;
}
.b-icon__status--green:after {
    content: '';
    border: 10px solid #6e9d00; /* green, change as needed */
    background: transparent;
    border-radius: 40px;
    height: 40px;
    width: 40px;    
    position: absolute;
    top: -24px; /* you may have to tweak this if you move it from the default position */
    left: -22px; /* you may have to tweak this if you move it from the default position */
    z-index: 1;
    opacity: 0;
    -webkit-animation: glow 3s ease-out infinite;
    animation: glow 3s ease-out infinite;
}

@-webkit-keyframes glow {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }

    25% {
        -webkit-transform: scale(0);
        opacity: 0.1;
    }

    50% {
        -webkit-transform: scale(0.1);
        opacity: 0.3;
    }

    75% {
        -webkit-transform: scale(0.5);
        opacity: 0.5;
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 0.0;
    }
}

@keyframes glow {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }

    25% {
        transform: scale(0);
        opacity: 0.1;
    }

    50% {
        transform: scale(0.1);
        opacity: 0.3
    }

    75% {
        transform: scale(0.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 0.0;
    }
  .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
margin-left: 240px!important;
}
.b-userinfo__details {
width: 240px;
margin-left: -20px;
}
.l-desktop .b-userinfo {
width: 210px;
}
.b-avatar--m {
height: 125px!important;
width: 125px!important;
}

.b-avatar--m > img {
max-height: 125px!important;
max-width: 125px !important;
height: 125px!important;
width: 125px!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;
}}

[slowstreamer]

I was giving the above css code a go, but when I save the code to increase postbit width, I get a Template compile error.

Anyone else experience any problems ?

p.s. I'm running vB 5.4.5