El Porcharo
Well-known member
just found out that in default style gives the same problem.Hello,
This is almost exactly what I want but there is a little problem. Usernames are displayed inside the thumbnail.
so replace the previous code with the following to fix this issue:
CSS:
.structItem-cell.structItem-cell--icon
{
width:96px; // this will move the small user avatar on right-hand corner and the value is (thumbnail with + 16px)=96px in this case. Always add 16px to your thumbnail width.
}
.structItem-iconContainer, .threadThumbnailWrapper, .threadThumbnailWrapper div.avatar
{
width: 80px; // CHANGE this value for a different width (also change max-height below to the same value)
height: 60px; // CHANGE this value for a different height (also change max-height below to the same value)
border-radius: 5px!IMPORTANT; // this is making rounded thumbnail corners: INCREASE or REDUCE if you want them more round or less round, comment or delete if you want square corners
}
.threadThumbnailWrapper div.avatar img.alignThumbnail
{
object-fit: cover;
min-width: 100%; // this will scale width to full thumbnail witdth for centered cropping - DO NOT TOUCH
min-height: 100%; // this will scale width to full thumbnail height for centered cropping - DO NOT TOUCH
max-width: 80px; // CHANGE this value for a different width
max-height: 60px; // CHANGE this value for a different height
}
// the following CSS will scale and center crop the smaller thumbnails that are showing on widget in default avatar size
.threadThumbnailWrapper a.avatar img.alignThumbnail
{
object-fit: cover;
min-width: 100%;
min-height: 100%;
}