A quick easy fix would be to set the category logo images to a 60% width:
.category-logo.aspect-image img {
width: 60%;
}
Note that no css changes have been made yet because the technical time has been invested in other fronts. @Firefishy might be able to comment on his though around css improvements to the forum, since he is the one maintaining the whole technical aspects of the site.
What about disabling the icons entirely? Take a look at this example: https://foodshift.se
I really like this design. A nice, short description at the top. Also the colors on the front page are much more balanced. The front page is not so busy as ours.
Especially the community part has to much color.
⊠Youah, much better than the oversized Icons here âŠ
Agreed, I even added a uBlock Origin filter rule now to disable them:
##.category-logo
Result:
Getting rid of suggested topics was next âŠ
##.suggested-topics
well done ⊠so I would just have to install uBlock Origin to make use of this ⊠
Why not create two themes?
One Theme with the icons (a little bit smaller please) and one without the icons. Every User could change it by him or herself.
That is of couse also fine if that is possible. I can imagine though that in terms of maintainability 1 theme is preferred.
We plan to discuss icons downsizing this week at the @forums-governance and Iâll come back with a decision.
Thanks everyone!
This css change has been applied to reduce the size category logos to 60%.
This doesnât fix the problem reported here. The site still looks rubbish compared to the nice clean layout of the old forum - there are massive pictures filling the screen that add no value, it looks like a four-year-old has gone mad with some crayons. Why canât we just get rid of those altogether?
I am afraid I have to agree to that. Looking at the relation between useless icon and valuable information here
one must admit that this is quite ridiculous indeed.
We only display 3 latest topics anyway, so thereâs a lot of white space due to the icon size. Compare these two below:
Ummmm, are you sure it has been applied? Or has it been reverted in the meantime? Because Iâm not seeing it.
This is what I see currently (even after numerous force-refreshes):
And this is what I think Iâm supposed to be seeing (if this CSS change was really implemented):
(Note that Iâm changing max-width in Developer Tools, as width seems to be auto-calculated to preserve aspect ratio - at current version of the community.osm.org website?)
The change was applied and reverted, because new in new discourse versions it was messing with some browsers.
If someone has the time to come up with a css that works in desktop and mobile, happy to apply.
Thanks for your explanation. It would have been great to get this information immediately after the revert so we could have used the time to come up with the necessary CSS ⊠
At the time no css seemed needed because mobile view was already re-sizing the icons, please see:
Iâm not sure how big it was originally on mobile, but both on desktop (see Hide or downsize icons - #18 by Matija_Nalis above) and on mobile (see below) it still looks excessively big to me eating into much of screen estate for no gain.
As noted in post above, it should be at most max-width: 60% (or even better max-width: 50%).
i.e. change that max-width: 100%; to max-width: 50%; in CSS:
.category-logo.aspect-image img {
width: calc(var(--max-height) * var(--aspect-ratio));
max-width: 50%;
height: inherit;
max-height: var(--max-height);
}
Since it should now correctly calculates aspect ratio (see width: .... in CSS above) which was problem in initial implementation. Could we have that?
Thanks for that, Iâve just applied the css.
Letâs see if people over different browsers are not seeing a weird aspect ratio, looks good on my Firefox.
Thanks @nukeador ! Reduced size seems to work great on desktop for my Firefox, surf and Chromium for me:
On the mobile, it didnât seem to have had an effect, which while good (it didnât break anything!) is also somewhat disappointing - as the problem with oversized icons continues there. I agree with previous comment that since screen estate is premium at mobile, perhaps category icons can be disabled there completely, e.g. via media query like:
@media only screen and (max-width: 767px) {
.category-logo.aspect-image img { display: none; }
}
vs. 
(Iâve also tried just reducing icon size more on mobile, but it just looks ugly and does not save much space, because it is displayed in new line with margins etc. anyway⊠It might be possible to reduce it to say 10% (about height of the letters) and modify layout so icon is inline with the category name, but that is likely more complex and possible problematic - and needs testing on multiple devices - for little gain. But if you wish, I can try to investigate that)
It seem reasonable, applied, thanks again!