UBB.threads PHP Forum Software Community Forums Resources and Customizing How Do I? Icon Images Look Blurry

When I resize these icon size images for the front category page they look very pixelated (especially on mobile) as the required size is a very low 48x 48. How can I add code to the source hrml or css to allow larger resolution files to be used but then resized to stay the same size on the page? I'm looking for the css sheet below but its not showing up in my hosting file manager. screens attached.

Hopefully this is something to be addressed in the next update.

.

this might also be easily fixed if the forum allowed svg vector images.

Although its recommended to maintain a standard width and height for each forum's image you use, its not required. The stock sample images are 48x48, but can actually be any dimension. Their container will adapt to the size of its image.

NOTE: when you create your 48x48 or 100x300 (or whatever you've chosen) image, save it without compression. The blur that you are seeing without zoom, is caused by your graphics program setting to compress the image upon saving it. Obviously, if you use your browser's zoom in/out on any page, you will be increasing the size of each pixel on that page, and they will become more apparent.


It is located within the /styles directory.

common.css helps browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. It is a common CSS normalize/reset for UBB.threads. Not something that you'd want to edit with anything specific, since its intended to hold common layout formatting, and attempt to render your forums the same across all web browsers.
further reading here
https://www.joshwcomeau.com/css/custom-css-reset/
and here
https://github.com/necolas/normalize.css/

maybe its the style sheet I have selected but its not holding a small size on the main cat page.

I need the container to keep it at the 48x48 icon size not spread out

48x48 is so tiny. you will never get that much definition from a 48x48 image. thats literally only 48 pixels wide and 48 pixels tall.

If you bump up the qty of pixels you are using to even just 100x100, your image will still be icon-sized and wont look like something from a mid-90s AOL newsletter.

48x48


vs 100x100


vs original

I understand the resolution completely

The issue is the larger pics are simply too big for the forum room containers

It appears to hold the right size on mobile but not on the desktop bowser

Mobile is down-sizing the image to fit in to a mobile container.

I see where your problem is happening; you're using wallpaper sized image for a category button. Resize your forum images so they will fit in to the expected space. These images will be displayed next to the forum name on the Main Index page. If you use a wallpaper-sized image here, you'll also be using a large file that needs to be downloaded by every visitor, every time, who doesnt already have it in their cache. that can get very pricey on bandwidth for both you and them. Your high-trafic images should be optimized.

Your forum images do not need to be squares, such as 100x100. On several sites that use forum images, I've seen sizes such as 120x80 that work out nicely.

Further advice that I see you're already following, but worth mentioning for others, is to select forum images with high contrast or images that do not require lots of detail to understand when their size is reduced to a thumbnail button.

I was just using wallpaper size to test to see if they would be resized. I know wallpaper is too high rez.