Help me create this mockup? (Harlowe) *updated*

Comments

• greyelf

  April 2015

  The following is a very quick mockup, it uses some javascript to add an element to display your permanent Title, uses a HTML <p> tag to indicate which paragraphs you want the first line indented, wraps your links area with a HTML div so that they can be centered.
  
  I used the following passage contents, which is based on your example image:

  
This is a passage. It's a pretty solid passage, I guess, with a bunch of words that say a thing.
Just try'na fill some space here; don't mind me. Woop de diddly doo.

<p>Aaand here's an indent, just because. I doubt there's a way to make indents happen automatically, so I'm not even gonna ask. Doesn't matter, really. I can always tab manually. (Twine DOES take tabs, right?)</p>

<div class="links">
[[This, my buddy is a link.->Passage 2]]
[[This is a clicked link.->Passage 3]]
</div>


  1. Add the following to your Story Javascript, it creates the element which will display your story Title, you need to replace the REPLACE THIS text with your actual story title.

  
$("body").append('<div class="title">REPLACE THIS</div>');


  2. The following CSS positions the Title, changes the outer edge background colour, indents paragraphs marked with the HTML <p> tag, centers the links within your link area, and assignes colours to the Title, links (normal and visited), and hides the side-bar:

  
body {
background-color: tan;
}

tw-story {
margin-top: 0px;
background-color: white;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px;
}

tw-sidebar {
display: none;
}

/* CSS for the page title */
body .title {
display: flex;
flex-direction: column;
width: 60%;
font-size: 2em;
line-height: 1.5em;
margin: 5% auto 0px;
/* The title look */
color: lightblue;
background-color: white;
padding: 30px;
}

/* Indent the first line of a paragraph */
tw-passage p {
margin: 0;
text-indent: 30px;
}

tw-passage .links {
text-align: center;
}

/* The CSS selector for a normal link */
tw-passage tw-link {
color: lightblue;
}
/* The CSS selector for a clicked link */
tw-passage tw-link.visited {
color: grey;
}


  I hope it gives you some help
• avery

  April 2015

  Thanks a bunch, man! This totally helps. I appreciate your thoroughness. You saved me a lot of trouble, I'm glad I asked around.