hey hypothetically unrelated to any post earlier today, any of ya'll know html / css and are willing to give me some advice / guidance on setting up a website with a very specific aesthetic
- He/him
Tabletop, video games, sports and maybe someday some other things if I get the ambition to learn.
You must log in to comment.
in reply to @soleilraine's post:
I've never done it professionally, but I've messed with html and css for years casually (before css crimes, I made some Roll20 character sheets) and could give advice
fuck yeah how would one make a thing that resembles a discord conversation with pfps and shit. preferably really quickly form fillable with character names and colors and shit
I'm away from my computer now so I could probably do some more research later tonight, but I think the way I'd do it is get either a Static Site Generator or a Templating Engine, you can basically set up a template for a chat message with the html and css that you want, then in the actual page you type something like,
{% message "Glorbo's Horny Mana Dimension", "glorbo_avatar.jpg",green %}
What the *fuck* are you talking about
{% endmessage %}
and it replaces the curly brace tags with actual HTML with those values plugged in.
Okay I said tonight but I was very exhausted when I got home from the arcade so I'll try to look more into it tomorrow, but from what I can tell one of the most popular/recommended static site generators is eleventy/11ty (that's where I cribbed that template example from). In addition to doing templates it can do stuff like generate pages of multiple posts automatically, an rss feed, etc
It also occurred to me that since it's an actual website and not cohost you don't have to give all the variables in the post like I suggested above, you can just have an html element with a class like "Elgrym" and then have the CSS define what the avatar image, name colour, font, etc for everything under the Elgrym class is.
nod nod okay okay I vaguely understand. I’m gonna level here CSS is the least intelligible language of all time to me and my first language was java so my bar is pretty high
okay ngl I got kind of nerdsniped here so, like, basically this is my proposal for handling the different characters with CSS (most of the CSS here I copied from the callowclan post, so basically from the output of cohoard, the big change is using variables for the avatar and name, then setting those variables based on the character name class).
The Static Site Generator part of it is where I got held up, 11ty may be more setup than you want to do, especially if you're not familiar with setting up node.js projects, but basically what it does is this transformation where I added a little javascript function to take the markdown with {% %} tags and replace those with all the <div>s with the right classnames. There's probably other ways to make the script-writing part of it simpler, too, if I looked into it.
I. see.
I don't know. What any of this means. Or understand any of this at all
I may. Need to call the idea of making a website forfeit for now
Ah, that's fair 😔 I also saw Publii is a much easier solution, you basically write a post in a WYSIWYG editor and it generates the web page for you, I don't think it's customizable enough to make it look exactly like a discord chat but you could still just write it in a script format.
remarkable that the internet is such an integral part of our lives and something as basic as "i want to import a ton of text and have it be formatted vaguely like a discord conversation" would legitamately be easier to do in Unreal Engine than it would be on a fucking website
Okay this has continued to be a bee in my bonnet so I wanted to see if I could make a plugin for Publii to do this without you having to touch any css or html at all, and the answer is yes, I can. Publii has a page for adding multiple blog authors, with their own avatars and "description" blurb (where you can add color or formatting), and I've got it so you can just add characters and authors and then write a post formatted like,
=== protag
Blah blah blah
=== elgrym
Blah blah blah
And it replaces the === lines with the avatar and blurb for the matching author. I still need to pretty it to but I should have a usable version in like, a couple days to a week.
Hey, FYI I've made a lot of progress on making a way to do this without having to touch CSS yourself: https://cohost.org/authorx/post/7808703-working-on-something
holy fucking shti this is exactly what i need are you a wizard or some sort of deity or perhaps some sort of wizard