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%;
}