iMessage Chat Thing

by Six One Eight Eight (Writer6188)

Summary:

Testing an iMessage-style group chat thing by Azdaema Codes

Notes:

• Inspired by iMessage Skin by Azdaema Codes (Azdaema)
• Inspired by 𝗖𝗼𝗱𝗶𝗻𝗴 𝗘𝗻𝗰𝘆𝗰𝗹𝗼𝗽𝗲𝗱𝗶𝗮 by Anonymous

Chapter 1: Initial Testing

Notes:

The CSS for this has gone in largely unedited. I'm going to try to combine bits from the one-on-one segment and the group chat segment, which are both found one after the other here. For reference, this is based on a work by Azdaema Codes which can be found here.

Group Chat

Today, 1:08 am

Name1

This is for chats of more than one person. You can have messages be blue, just delete "sms".

Read 1:43 am

Name1

except for when it doesn't work

Name2

lol

Name3

That's annoying

🙄

Today, 2:39 am

Name3

And why is the header bar broken

It didn't bloody change did it

Fucking he'll

HELL

WHEN HAVE I EVER SAID FUCKING HE WILL

Name1

Bro calm down

SMS doesn't have read receipts

Name3

That's not even what I'm angry about

Name4

I don't know

Random images from the coding encyclopaedia

Feddy Fartbaz

Edward Nashton

Name1

I'm losing signal..

Name1

📶📶📶

This should be blue with sanserif test

Name1

This is an imessage for iPhone made by Azdaema Codes (Azdaema) that GumbaBunny tweaked slightly.

You can add images, gifs, etc. I will never not find a reason to use my Yippee.gif

Read 3:25 am

Today, 3:27 am

Real Person

we are so bad at sleeping lmao

OK it turns out that sometimes div tags can get a bit messed up

And it messes with things

I was gonna say, what the hell happened there

Initially this was just copied and pasted this from Coding Encyclopædia with some slightly different messages. All the features seem to be here, but some are slightly broken for whatever reason.

Notes:

I am testing this on my regular skin, because I might end up incorporating text messages into multiple works in the future.

Notes to Self on How This Works

The class of the <dl> tag the entire thing is contained in can have multiple classes combined between the speech marks.

• "imessage" is what makes it work
• "border" renders the border
• "sms" turns all outgoing texts green regardless of whether the "sms" class is on them
• "grouptext" displays all the usernames on incoming texts when work skin is switched on. Omitting this hides them, but they still remain there and are visible when work skin is switched off.

Texts will be grouped together within each <div> tag. To add a space between them, create another div with another set of <dt> and <dd> tags in it. When adding "read 0:00 am/pm" timestamps, ensure it is between the last message and the </div>

SMS doesn't have read receipts or emoji. It might explain why putting an emoji class <dd> into an out sms class <div> gave it a green background.

Leaving the typebar empty will make it show a light grey string of text saying "iMessage". If the <dl> class contains "sms", this will be replaced by "Text Message • SMS"

I've changed the way you make the header. Now it is a div with a class of "contact". Within that is the image (class="headerimg"), then a line break tag like in the original, then a normal <h2> tag. Its attributes are modified by a section I added to the CSS to set the <h2> font to "Helvetica", "Helvetica Neue", system-ui; within anything with the class of "imessage".

Divider

Tag weirdness

• There used to be a text class in this skin called "sms" that was intended to just make everything monospace, as seen here. It is no longer applied to things with the "sms" class.
• Ensure all divs are opened and closed properly or you'll get weird visual errors.