You will need to use a little more HTML to structure the different parts (over-all box, the actor's image, the actor's name, and the actor's text) that make up your message box, and a little more CSS to style it all. The required HTML would look something like the following...
<div class="message">
\<div>
\<span class="actor-name">Jane</span>
\<p class="actor-text">Hi, my name is Jane.</p>
\</div>
\<img class="actor-face" src="media/anna-face.png">
\</div>
... and the flex-box based CSS needed to style the above would look something like...
(placed in your Story Stylesheet area)
.message {
display: flex;
flex-direction: row;
/* Your styling for the main message box. */
color: white;
background-color: darkred;
border: 2px solid white;
border-radius: 5px;
padding: 8px 8px 8px 8px;
box-shadow: 5px 5px 3px Black;
}
.message .actor-face {
/* Common width & height of all the face images. */
width: 140px;
height: 140px;
/* Your styling for the face image area. */
margin-left: 1em;
}
.message .actor-name {
/* Your styling for the actor name area. */
color: orange;
}
.message .actor-text {
/* Your styling for the actor dialogue area. */
font-size: 75%;
}
note: the above CSS includes comments to help understand the different parts and sample styling (below the "Your styling..." comments) in the .actor-name and .actor-text related selectors, these comments can be safely remove and the sample styling can be safely replaced with your own.
However, having to create the above HTML structure each time you want to display a message would quickly become a chore so I have created a new custom <<message>> macro for you. You need to place the following code within your project's Story Javascript area, it creates the same HTML structure as above and also inserts the information you pass it into the relevant areas of that structure.
/*
<<message actorName actorFace>>actor text<</dialogue>>
Arguments:
actorName: The name of the actor who's talking. (eg. "Jane")
actorFace: The name of the image to display. (eg. "images/jane-face.jpg")
Example:
<<message "Jane" "images/jane-face.jpg">>Hi, my name is Jane.<</message>>
*/
Macro.add('message', {
skipArgs : false,
tags : null,
handler : function () {
if (this.args.length < 1) {
return this.error('no actor name argument.');
}
if (this.args.length < 2) {
return this.error('no actor face argument.');
}
// Ensure that the actor name argument is a string.
if (typeof this.args[0] !== 'string') {
return this.error('actor name argument is not a String');
}
// Ensure that the actor face argument is a string.
if (typeof this.args[1] !== 'string') {
return this.error('actor face argument is not a String');
}
const actorName = this.args[0].trim();
const imageName = this.args[1].trim();
const $message = jQuery(document.createElement('div'));
const $text = jQuery(document.createElement('div'));
jQuery(document.createElement('span'))
.addClass('actor-name')
.wiki(actorName)
.appendTo($text);
jQuery(document.createElement('p'))
.addClass('actor-text')
.wiki(this.payload[0].contents)
.appendTo($text);
$text
.appendTo($message);
jQuery(document.createElement('img'))
.addClass('actor-face')
.attr('src', imageName)
.appendTo($message);
$message
.addClass('macro-' + this.name)
.appendTo(this.output);
}
});
The CSS required by the above custom <<message>> macro is the same as that I previously showed you, execpt the .message class in each of the four CSS selectors needs to be replaced with .macro-message instead. eg. the new four CSS selectors will be...
.macro-message
.macro-message .actor-name
.macro-message .actor-text
.macro-message .actor-face
The following passage example shows how to use the new <<message>> macro to display the same output as my first HTML based example.
<<message "Jane" "media/anna-face.png">>Hi, my name is Jane.<</message>>