Bugs and Suggestions for Metabunk.org

A minor quibble, and it may just be me, but thinly stroked white Impact font over images is really hard to read. [Maybe it looks different for others but if you Google "Impact font" it will display all the browser window text in that font].
Screenshot 2025-07-15 at 21.57.42.png
 
@Mick West I don't know how much control you have over this, but one sort of modern way of doing this is to have a dark frosted background behind the text and get rid of the text-shadow. Like this:
Screenshot 2025-07-15 190655.png
Screenshot 2025-07-15 190614.png


These are the CSS changes I made to the <span> containing the text:
font-size: 20px;
font-weight: 600;
background: rgba(0,0,0,0.6);
text-shadow: none;
 
This is a full page view:

Screenshot 2025-07-15 192046.png


CSS:
font-size: 20px;
font-weight: 600;
background: rgba(0,0,0,0.6);
text-shadow: none;
padding-top: 8px;
padding-bottom: 8px;
 
I removed the white gradient over the image and added a blur to the black frosting:
Screenshot 2025-07-15 192046.png


CSS on <span>:
font-size: 20px;
font-weight: 600;
background: rgba(0,0,0,0.6);
text-shadow: none;
padding-top: 8px;
padding-bottom: 8px;
backdrop-filter: blur(6px);

also removed "background" styling from "porta-header-text" class.

Maybe this gives you some ideas.
 
If you don't want stark black, it could be more of a dark gray frosting. Easier on the eyes:

Screenshot 2025-07-15 192046.png


CSS on <span>:
font-size: 20px;
font-weight: 600;
background: rgba(50,50,50,0.6);
text-shadow: none;
padding-top: 8px;
padding-bottom: 8px;
backdrop-filter: blur(6px);

also removed "background" styling from "porta-header-text" class.

I need to stop, I'll end up playing with this for hours.
 
fizzBuzz said:
CSS on <span>:
font-size: 20px;
font-weight: 600;
background: rgba(0,0,0,0.6);
text-shadow: none;
padding-top: 8px;
padding-bottom: 8px;
backdrop-filter: blur(6px);

also removed "background" styling from "porta-header-text" class.

Maybe this gives you some ideas.
Click to expand...
thanks, I can add/override CSS to some extent just by editing an extra.less file
CSS: 
// Xenporta article headlines
.porta-header-text {
// was
//    font-family: Impact, Charcoal, sans-serif;
    font-family: Arial, sans-serif !important;
    font-size: 20px  !important;
// fizzBuzz suggestions
font-weight: 600  !important;
background: rgba(0,0,0,0.6)  !important;
text-shadow: none  !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
backdrop-filter: blur(6px) !important ;
}

Implemented!
 
@Mick West I think you need to change that to this:

CSS: 
// Xenporta article headlines
.porta-header-text {
// was
//    font-family: Impact, Charcoal, sans-serif;
    font-family: Arial, sans-serif !important;
    font-size: 20px  !important;
// background: linear-gradient(rgba(0,0,0,0), #fff);   <--- if this exists
    background: none !important;   <--- if linear-gradient does not exist
// fizzBuzz suggestions
}

.porta-header-text > span {
    font-weight: 600  !important;
    background: rgba(0,0,0,0.6)  !important;
    text-shadow: none  !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    backdrop-filter: blur(6px) !important ;
}

I would be sure to remove/comment out "background: linear-gradient(rgba(0,0,0,0), #fff);" from the "porta-header-text" class. The way you had it before, that gradient was being overwritten by the background I suggested, but since you're moving that to the "span", you'll need to comment out the linear-gradient line.

If the linear-gradient is not part of your override, then you can just add "background: none;" to the "porta-header-text" class.
 
Last edited:
fizzBuzz said:
I would be sure to remove/comment out "background: linear-gradient(rgba(0,0,0,0), #fff);" from the "porta-header-text" class. The way you had it before, that gradient was being overwritten by the background I suggested, but since you're moving that to the "span", you'll need to comment out the linear-gradient line.

If the linear-gradient is not part of your override, then you can just add "background: none;" to the "porta-header-text" class.
Click to expand...
I'm not really sure what you mean by "part of your override". My override was as I posted above.

The two versions are:

2025-07-15_19-50-45.jpg


2025-07-15_19-43-50.jpg


I think I prefer the second
 
Mick West said:
I'm not really sure what you mean by "part of your override". My override was as I posted above.

The two versions are:

View attachment 82507

View attachment 82508

I think I prefer the second
Click to expand...
I wasn't sure if the linear gradient in the "porta-header-text" class was part of your override file (extras.less) or part of the standard system styling. But it looks like you added "background: none;" to your override, which is correct.

So yeah, the second one looks right.
 
Just a suggestion - this slight change could be a bit better on people's eyes. Input from others would be useful:

-------------------------------Current--------------------------------------------------------------New-----------------------------------
mb-card-1.png
mb-card-2.png


In "porta-header-text > span":
Change background: rgba(0, 0, 0, 0.6) !important; to background: rgba(40, 40, 40, 0.6) !important;

add color: #f0f0f0;
 
Last edited:
Slightly prefer the original with less transparency and more contrast.

Also, (unrelated) isn't "UAP" already plural so "UAPs" is a redundant double plural?
 
I still think the original separate headline not overlaid on the images is better (like below). Obscuring the images with a text overlay feels crowded.
[Edit: poor Andrew is up to his neck in Starlink]
Screenshot 2025-07-16 at 14.45.14.png
 
Last edited:
The problem with allowing the title to wrap is that it changes the height of the card - this is definitely not ideal. And based on the way the current CSS code works, this would require a lot of styling changes to make it work properly.

Screenshot 2025-07-16 092919.png
 
Giddierone said:
But, if the title goes below the image, like this random website I found, ;) then that's not a problem all the cards stay aligned to the top.
View attachment 82520
Click to expand...
It still depends on the styling. Those cards you found accommodates a growing title field, whereas, the cards on Metabunk's homepage do not. Metabunks card layout uses a somewhat antiquated (but still used) "block" style layout. A more modern way to do this is with a "flexbox" or "grid" layout, which gives you more flexibility and less limitations. It's a lot more dev-friendly. This can still be achieved with a "block" layout, it's just a bit finicky.
 
In many ways the text over image is providing a solution to a problem that doesn't exist. Having the thread title below the image solves that (if it's workable given XenForo's CSS clunkyness).

At the moment the landing page has no consistency of styles and some pictures are almost comically obscured. E.g.
Screenshot 2025-07-16 at 23.18.39.png


Unless that text is going to disappear on mouseover, why have it over the image? or why have an image at all?

Yes, these are minor quibbles, but the internet's "front page of rationality" needs to look like it. My conspiracy adjacent nan might just land here to get her correction about chemtrails and give up not knowing how to navigate the site.

Agree with @deirdre, old school, no frills is always better, (but disagree about the "stagger" — because that's an affront to all that is Holy and good in this world).
 
Giddierone said:
because that's an affront to all that is Holy and good in this world).
Click to expand...
the selection on the Home page is an affront to all that is Holy and good ;) UFOs and left wing politics. and 90% boring-as-hell UFOs and Left wing politics. These are the best threads Metabunk has had since Jan 6th? Two posts,, including the January 6th one, are just advertisements for Reddit.
 
I'm not spent much time on the front page as I anticipate it changing with the next version of Xenforo. I'm durrently using a years-old addon called XenPorta, which hasn't really changed much. I'm hopeful the new system will be a step up.
 
Mick West said:
I'm not spent much time on the front page as I anticipate it changing with the next version of Xenforo. I'm durrently using a years-old addon called XenPorta, which hasn't really changed much. I'm hopeful the new system will be a step up.
Click to expand...
When you say "next version", do you mean next major version? And do they have screenshot examples of styling you can share with us? That'd be fun.
 
Giddierone said:
In many ways the text over image is providing a solution to a problem that doesn't exist. Having the thread title below the image solves that (if it's workable given XenForo's CSS clunkyness).

At the moment the landing page has no consistency of styles and some pictures are almost comically obscured. E.g.View attachment 82532

Unless that text is going to disappear on mouseover, why have it over the image? or why have an image at all?

Yes, these are minor quibbles, but the internet's "front page of rationality" needs to look like it. My conspiracy adjacent nan might just land here to get her correction about chemtrails and give up not knowing how to navigate the site.

Agree with @deirdre, old school, no frills is always better, (but disagree about the "stagger" — because that's an affront to all that is Holy and good in this world).
Click to expand...
I think the thumbnails are useful. They get stored in your memory bank (brain) and you don't have to read titles if you know what thread you're trying to go to. It's an ease-of-use thing. It also gives the front page some "life", instead of just a wall of text. But I do agree, having the titles below the image could also be good. There's a lot of good ways to display cards like this.
 
fizzBuzz said:
When you say "next version", do you mean next major version? And do they have screenshot examples of styling you can share with us? That'd be fun.
Click to expand...
XF 2.4 is supposed to have "Featured Content" improvements. I'm not sure what the status is

I prefer a more visual approach, but it may be that requires a bunch more work to get it to look nice, per thread.
 
I believe XenForo is closed source, but is the code for the frontend of metabunk open source? Like the css and all that. Just curious because if it is, users with HTML/CSS/JavaScript experience might be able to more easily help out with testing some of these suggestions. I have no experience with XenForo and not a whole bunch with website frontends in general, so I'm open to the possibility my question is silly right off the bat :p
 
yoshy said:
I believe XenForo is closed source, but is the code for the frontend of metabunk open source?
Click to expand...
Xenforo is licensed source, no exactly secret, but not exactly open to downloading. The front end is largely unobfuscated or minimized, so you can see it in the Dev Tools, in the sources tab, and experiment with temporary changes. Example:

Source: https://www.youtube.com/watch?v=mOk2nzUNe7s
 
I think I've only loaded the front page a few times, and all of those times were accidents. Is that really how people get into the site? You might be optimising the unimportant.
 
You must log in or register to reply here.

Latest posts

Trending content

Back
Top