0 votes
asked by (2k points)
I'm currently trying this method I found https://www.w3schools.com/css/css_boxmodel.asp But I get boxes everywhere. I'm inserting it like this in stylesheet:

div {
  background-color: lightgrey;
  width: 300px;
  border: 25px solid green;
  padding: 25px;
  margin: 25px;

2 Answers

+1 vote
answered by (22.3k points)
selected by
Best answer

To add a new sidebar or the like (something that can be seen in every passage) you have to add it via your javascript section. First make sure to specify where on tje screen you want your new div to appear by specifying the gap to the left/right/top/bottom. For example:

#dialogue-bar {
	position: fixed;
	z-index: 50;
  	background-color: rgba(0, 0, 0, 0.5);
	border: #fff double 0.4em;
	height: 10em;
	right: 0.25em;
	left: 18em;
  	bottom: 0.25em;
	padding: 1em;

Add it to JavaScript like this:

$('<div id="dialogue-bar"></div>').appendTo(document.body);

To add content to the new element you can use <<replace>>. If I have a passage called "Dialogue" for example, I can put the entire passage into the new box like this:

<<replace "#dialogue-bar">><<display "Dialogue">><</replace>>


If you just want your div to appear in certain passages/places or appear multiple times in the same passage, you can instead create a class. In you CSS stylesheet you'd say something like:

.mydiv {
  background-color: lightgrey;
  width: 300px;
  border: 25px solid green;
  padding: 25px;
  margin: 25px;

Then call it in your passage like this:

<div class="mydiv">This is the divs content</div>


commented by (131k points)


If you want the above new dialogue-bar area to be automatically updated each time the Reader transitions to a new passage then you can use the setPageElement() function combined with the :passagerender event to do this.

Add the following code to your project's Story Javascript area, ideally this code should be placed after the JavaScript supplied by @idling.

/* Automatically show the contents of the StoryTime passage in the time-ui-bar-body element. */
$(document).on(':passagerender', function (ev) {
	setPageElement('dialogue-bar', 'Dialogue');

Now you will only need to use @idling's <<replace>> macro example if you want to dynamically update the new dialogue-bar area from within the current passage.

eg. after the Reader selects a link that doesn't cause a Passage Transition but does change a value being shown in that area.

0 votes
answered by (2.1k points)
What's a Dungeon Crawler?
commented by (26.7k points)

Wikipedia: Dungeon Crawl

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.