0 votes
asked ago by (260 points)
edited ago by
I'm currently using sugar cube. When it comes to CSS i don't know what i'm doing. I'm kinda self teaching myself as I go along. What I'm curently trying to do is make it so that when a character speaks, the words they speak will be wraped in a box with a background. I got it working to thsi point. What I'm stuck on is making it so there will be  a little picture in the top left of the box with thier name right beside it.

So  far for dialog between people I have this in CSS

div.message {
  color: white;
  background-color: darkred;
  border: 2px solid white;
  border-radius: 5px;
  padding: 8px 8px 8px 8px;
  box-shadow: 5px 5px 3px Black;
}

and this in the passage

<div class="message"> Insert text here </div>

1 Answer

+2 votes
answered ago by (109k points)
selected ago by
 
Best answer

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>>

 

commented ago by (260 points)
This is really helpfull and super awesome. Thanks. If it wouldn't be to much of a bother, I relaized that I asked for the picture on the right side but actually ment left. Is there a way for me to change the image posistion. Besides that what I got is perfect.
commented ago by (109k points)
I placed the answer to your "move image to the left" question in your other Question.
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...