resizing Avatar in Postbit

[scottkoz20]

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]

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

[scottkoz20]

Just adding the following did nothing for me


.avatar {
width: 10%;
height: auto;
}


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

[MarkFL]

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]

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]

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]

Hey there, here's a link to one of his active threads, not many avatars though.
https://www.sportscardforum.com/showthread.php/2475000-Guess-the-Serial-Number-for-extra-entries-into-the-Alonso-Auto-giveaway/page66?styleid=23

[MarkFL]

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

[final kaoss]

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]

Hey there, here's a link to one of his active threads, not many avatars though.
https://www.sportscardforum.com/showthread.php/2475000-Guess-the-Serial-Number-for-extra-entries-into-the-Alonso-Auto-giveaway/page66?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]

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]

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 1564662217 at 1564662217 ---------------

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 1564662265 at 1564662265 ---------------

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]

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]

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]

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.

[iA1]

If you want to apply it for postbit as well postbit legacy then you may use something like this:

.userinfo img {
max-width: 50% !important;
}

Instead of using percentages, I think it might be better to use fixed pixel values at different breakpoints.

[scottkoz20]

If you want to apply it for postbit as well postbit legacy then you may use something like this:

.userinfo img {
max-width: 50% !important;
}

Instead of using percentages, I think it might be better to use fixed pixel values at different breakpoints.

Just need it for the postbit, I am using your mod to auto force postbit on mobile screen :) and also MarkFL's mod to allow for users to select their postbit style in their options (currently). I may go back to postbit_legacy for desktop and postbit for mobile, but I need to decide on this.

The code here adding the .postbit does what I needed. I did reduce this to 30% at this point.

Everyone that helped, I thank you greatly for this.


Scott