fizzBuzz
Senior Member
@Mick West everything seems to be working fine and fast again.
I don't find impact font that easy to read either, but since it's short titles, it doesn't really bother me.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]. View attachment 82498
I've changed it to Arial, feel free to suggest refinements.A minor quibble, and it may just be me, but thinly stroked white Impact font over images is really hard to read.
thanks, I can add/override CSS to some extent just by editing an extra.less fileCSS 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.
// 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 ;
}
// 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'm not really sure what you mean by "part of your override". My override was as I posted above.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.
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.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
Which original?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 should have said "current"Which original?
I don't mind the original look either, but if the text could wrap instead of overflow, that would be better.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.
View attachment 82518
But, if the title goes below the image, like this random website I found,The problem with allowing the title to wrap is that it changes the height of the card
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.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
it doesnt bother me. the stagger helps seperate them.this is definitely not ideal.
the selection on the Home page is an affront to all that is Holy and goodbecause that's an affront to all that is Holy and good in this world).
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.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.
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.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).
XF 2.4 is supposed to have "Featured Content" improvements. I'm not sure what the status isWhen 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.
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:I believe XenForo is closed source, but is the code for the frontend of metabunk open source?
Wouldn't a smaller font size eliminate that problem?Feb13 and earlier are other examples where there's no image, and the headline is cut off
Choosing a small font for headlines does not strike me as a winning move.Wouldn't a smaller font size eliminate that problem?