vBulletin Mods

The Official vBulletin Modifications Site
https://www.vbulletin.org/forum/showthread.php?t=327422

resizing Avatar in Postbit
by scottkoz20
31 Jul 2019 14:36

is there a clean/quick way to reduce the size of the user avatar in Postbit? I am testing with a responsive style and some of my users avatar images are just "large"

MarkFL 31 Jul 2019 15:56

I would add a class selector in the "additional.css" template for a quick/easy way to change their size.

scottkoz20 31 Jul 2019 16:26

Just adding the following did nothing for me


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Not sure I am calling the right item. Also, I would only want to do this in postbit not postbit legacy.

MarkFL 31 Jul 2019 16:58

Can you inspect the DOM using your browser's dev tools? As far as applying it to postbit, but not postbit legacy, you would have to check to see if different classes are used, and if not use a plugin instead to add the CSS, or modify the templates directly. I'd rather use a plugin than hack the templates.

scottkoz20 31 Jul 2019 17:41

Quote:

Originally Posted by MarkFL (Post 2600080)
Can you inspect the DOM using your browser's dev tools? As far as applying it to postbit, but not postbit legacy, you would have to check to see if different classes are used, and if not use a plugin instead to add the CSS, or modify the templates directly. I'd rather use a plugin than hack the templates.

i'll need to look at this further when I have a bit more time to understand this further.

MarkFL 31 Jul 2019 18:03

If you can post a link to your site, on a page with avatars you want resized, I can help you come up with something. :)

final kaoss 31 Jul 2019 22:57

Hey there, here's a link to one of his active threads, not many avatars though.
https://www.sportscardforum.com/show...e66?styleid=23

MarkFL 01 Aug 2019 02:48

Right-click is disabled for guests, and I'm not going to go through the effort of circumventing that. :)

final kaoss 01 Aug 2019 03:49

Quote:

Originally Posted by MarkFL (Post 2600086)
Right-click is disabled for guests, and I'm not going to go through the effort of circumventing that. :)

If you use firefox, it will ask you if you want to prevent this page from creating additional dialogs. All you have to do is right click twice and bam it will ask you and then, you get the regular right click menus.

In Omnibus 01 Aug 2019 05:49

Quote:

Originally Posted by final kaoss (Post 2600085)
Hey there, here's a link to one of his active threads, not many avatars though.
https://www.sportscardforum.com/show...e66?styleid=23

That URL has a user rank, not an avatar. Inspecting it did no good since it gives the classes for postbit userranks instead of postbit avatars. Without the ability to see the existing CSS there is no way to know what changes need to be made. The logical solution would be to use media queries on a "responsive" theme but that requires knowing the existing breakpoints of the theme. It does us no good to guess since we could end up doing more harm than good.

If it had been as simple as inspecting the existing CSS I would have posted a solution hours ago.

z3r0 01 Aug 2019 06:50

Quote:

Originally Posted by In Omnibus (Post 2600088)
That URL has a user rank, not an avatar. Inspecting it did no good since it gives the classes for postbit userranks instead of postbit avatars. Without the ability to see the existing CSS there is no way to know what changes need to be made. The logical solution would be to use media queries on a "responsive" theme but that requires knowing the existing breakpoints of the theme. It does us no good to guess since we could end up doing more harm than good.

If it had been as simple as inspecting the existing CSS I would have posted a solution hours ago.

You are looking at the wrong thing (I did the same at first), the rank image is deceptively huge and looks like an avatar, if you go further down the page post 665 has a real one.

scottkoz20 01 Aug 2019 12:22

Quote:

Originally Posted by MarkFL (Post 2600086)
Right-click is disabled for guests, and I'm not going to go through the effort of circumventing that. :)

i pulled the code out for that - that was added in to prevent scammers - sports cards is rife with people with that

The more I look at this however, it appears to be something that is a mobile device issue that I am going to reach out to the style author about as when I look at this on a PC, this appears OK

--------------- Added 01 Aug 2019 at 12:23 ---------------

Quote:

Originally Posted by In Omnibus (Post 2600088)
That URL has a user rank, not an avatar. Inspecting it did no good since it gives the classes for postbit userranks instead of postbit avatars. Without the ability to see the existing CSS there is no way to know what changes need to be made. The logical solution would be to use media queries on a "responsive" theme but that requires knowing the existing breakpoints of the theme. It does us no good to guess since we could end up doing more harm than good.

If it had been as simple as inspecting the existing CSS I would have posted a solution hours ago.


color me confused - what is a media query?

--------------- Added 01 Aug 2019 at 12:24 ---------------

Quote:

Originally Posted by final kaoss (Post 2600087)
If you use firefox, it will ask you if you want to prevent this page from creating additional dialogs. All you have to do is right click twice and bam it will ask you and then, you get the regular right click menus.

wonderful :rolleyes:

final kaoss 01 Aug 2019 16:21

Quote:

Originally Posted by In Omnibus (Post 2600088)
That URL has a user rank, not an avatar. Inspecting it did no good since it gives the classes for postbit userranks instead of postbit avatars. Without the ability to see the existing CSS there is no way to know what changes need to be made. The logical solution would be to use media queries on a "responsive" theme but that requires knowing the existing breakpoints of the theme. It does us no good to guess since we could end up doing more harm than good.

If it had been as simple as inspecting the existing CSS I would have posted a solution hours ago.

There are indeed avatars there, skott has one, key2win has one and so does pwskelly.

In Omnibus 01 Aug 2019 16:25

You could use something like the following in your css_additonal.css template:

@media only screen and (max-width: 1080px)

.postbitlegacy .userinfo .postuseravatar img, .eventbit .userinfo .eventuseravatar img {
max-width: 75%;

@media only screen and (max-width: 768px)

.postbitlegacy .userinfo .postuseravatar img, .eventbit .userinfo .eventuseravatar img {
max-width: 50%;

@media only screen and (max-width: 480px)

.postbitlegacy .userinfo .postuseravatar img, .eventbit .userinfo .eventuseravatar img {
max-width: 25%;

You will need to adjust the percentages based upon what you want to see at each screen size.

scottkoz20 01 Aug 2019 16:56

I'll have to look at this more once I'm back in my office tomorrow - I have the idea of what needs to be done. In the additional.css file there are breakouts for the various size screens so I will need to look at this further.

would I need to do something like
.postbitlegacy .userinfo .postuseravatar img, .postbit .userinfo .postuseravatar img, .eventbit .userinfo .eventuseravatar img {
max-width: 25%;

for capturing both the PB and PB legacy?

Thank you all for the assistance - much appreciated.


All times are GMT. The time now is 10:12.

Powered by vBulletin® Version 3.8.12
Copyright © 2019, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Copyright ©2001 - , vbulletin.org. All rights reserved.