The answer here is lots of CSS and clever use of display/include- and replace-style macros. There's no out-of-the-box solution to help with this that I'm aware of; you'll likely have to code it up yourself.
My suggestion would be to start with the CSS and get things looking how you want.
I would probably use SugarCube personally, if only for it's easier in-passage jQuery manipulation and widget system. After getting the CSS working right, I'd try to make a couple of widgets using <<include>>, <<replace>>, and <<append>> that automate as much of the 'chat' process as possible.
After you've laid the groundwork, you should be able to simply write your story the same way you would any Twine story.
Note that Harlowe could work, but would probably be a bit harder in this case.
In addition to the advice mentioned, @21rv3 you might also want to have a look around sites like codepen where people post web development & design snippets. For example: here is a recreation of ios7 messages in CSS. The main styling comes from the message & to/from classes in the CSS. (The :before and :after pseudo-elements are just used to create the little curve in the corner of the message.)
Do you want that header to appear at the top of every passages in your story or only selected passages.
A. All passages:
1. Create a PassageHeaderspecial passage, give it a nobr passage tag, and then place the content you want displayed in the message header into it.
It could look something like the following which displays the current value of the $messageTitle and $messageSubtitle variables.
The solution to this is version similar to A except the content in the PassageHeader needs to be gated somehow. I suggest assigning a known passage tag to all the passages you want the message header to appear on, you can name that tag whatever you like but this example will use message.
The following uses the tags() function to access the list of passage tags for the current passage being shown, and is based on the examples shown in its documentation.
I created an example showing you how to do a (conditional) header containing multiple components, including ones that auto-refreshed during passage traversal. I wrongly thought you would be able to layout out whatever components you wanted in that header.
The following should be done using HTML div elements combined with CSS to lay them out as needed, so that the layout can be designed to automatically change depending on the horizontal dimension of the player's viewport. But due to time constraints I will be using a table element instead.
Replace the PassageHeader content with something like the following:
Comments
My suggestion would be to start with the CSS and get things looking how you want.
I would probably use SugarCube personally, if only for it's easier in-passage jQuery manipulation and widget system. After getting the CSS working right, I'd try to make a couple of widgets using <<include>>, <<replace>>, and <<append>> that automate as much of the 'chat' process as possible.
After you've laid the groundwork, you should be able to simply write your story the same way you would any Twine story.
Note that Harlowe could work, but would probably be a bit harder in this case.
As @Chapel stated it is definitely possible, and there are at least two existing threads on this forum showing possible techniques for doing it.
a. Conversations like in a chat(sugarcube 2)
b. Chat like Conversations for Harlowe
Or change it? i tried a few methods but it doesn't worked, still the same.
For example: (goes in Story JavaScript)
i'm thinking about this: http://imgur.com/a/ShIX2
how do i make a template like this? without functions? @TheMadExile
A. All passages:
1. Create a PassageHeader special passage, give it a nobr passage tag, and then place the content you want displayed in the message header into it.
It could look something like the following which displays the current value of the $messageTitle and $messageSubtitle variables.
2. Use CSS in the Story Stylesheet area to style the message header. The following assumes a HTML structure like the one from the above point 1.
B. Only in selected passages.
The solution to this is version similar to A except the content in the PassageHeader needs to be gated somehow. I suggest assigning a known passage tag to all the passages you want the message header to appear on, you can name that tag whatever you like but this example will use message.
The following uses the tags() function to access the list of passage tags for the current passage being shown, and is based on the examples shown in its documentation.
The following should be done using HTML div elements combined with CSS to lay them out as needed, so that the layout can be designed to automatically change depending on the horizontal dimension of the player's viewport. But due to time constraints I will be using a table element instead.
Replace the PassageHeader content with something like the following: ... and replace the CSS in the Story Stylesheet area with something like the following: