vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB5 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=264)
-   -   Larger Avatars In Postbit? (https://vborg.vbsupport.ru/showthread.php?t=318750)

jkotlowski 05-21-2015 05:11 PM
Larger Avatars In Postbit?
 
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;

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 05-21-2015 06:27 PM
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 05-21-2015 11:11 PM
Thank you for the help, regardless. I'll keep tinkering, maybe I can figure something out.

jkotlowski 06-27-2015 05:27 AM
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 06-29-2015 06:35 PM
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 08-05-2015 01:09 AM
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 02-12-2016 07:17 PM
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...

Code:
/* 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)

Code:
/* 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 03-25-2019 07:13 PM
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


All times are GMT. The time now is 02:23 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01521 seconds
  • Memory Usage 1,748KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (3)bbcode_code_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (8)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete