Style sheet formatting in Twine 2

Quaay

Hello everyone,

I am having some problems formatting my story the way I want it in Twine 2 (using Sugarcube). I know some of the things I want are possible, but I'm not sure about others.

Ideally I would like the text to be justified and centred with much smaller margins than is standard. I would like the text to take up maybe a third of the screen, not the entire screen.

Also I would really love to have indentation on new paragraphs and things like dialogue as you would see in any print novel or as you can do in MS Word or the like. I'm not sure if this is possible, but I would love to format it that way if I can.

Here is my stylesheet code (this is just standard, this is not me playing around with anything):

#storeArea {
  display:block;
  position:fixed;
  background-color: lightblue;
  background-image: -webkit-radial-gradient(center, ellipse cover, #c1e3ff 0%,#329fff 99%);
  background-image: radial-gradient(ellipse at center, #c1e3ff 0%,#329fff 99%);
  border-radius:35rem; border-radius:35vw;
  box-shadow: 0 0 3rem 0.5rem #329fff;
  width: 35rem; width: 35vw;
  height: 35rem; height: 35vw;
  top: 70%; top: 70vh;
  left: 70%; left: 70vw;
  z-index: -8;
}
#sidebar {
  font-family: inherit;
  font-size: 0.9rem;
  width: 100%;
  padding: 2em;
  top: 0;
  left: 0;
  background-color: rgba(22,22,44,0.9);
}
#sidebar #titleSeparator, #sidebar #share {
 display:none;
}
#sidebar li {
  color: inherit;
  text-align:inherit;
  display:inline;
  font-weight:normal;
}
#sidebar #storyTitle {
  position:relative;
  top:-0.1em;
}
#sidebar #snapback, #sidebar #restart, #sidebar a.externalLink, .menu {
  border-radius:0.5em;
  border: solid 1px #333;
  padding: 0.2em 0.8em;
  color:#bbb;
}
#sidebar #snapback, #sidebar #restart {
  margin-left: 1.5em;
}
#sidebar #snapback:hover, #sidebar #restart:hover, .menu {
  border: solid 1px white;
}
.menu {
  padding: 0;
  background-color: rgba(22,22,44,0.9);
}
.menu div {
  padding: 0.2em 0.8em;
}
a.internalLink, a.externalLink {
  border-radius:0.5em;
  border: solid 1px #666;
  padding: 0.05em 0.3em;
  color: #fff;
  font-weight:normal;
  white-space:pre-line;
}
a.internalLink:hover, a.externalLink:hover {
  text-decoration:none;
  border-color:#fff;
  color: #fff;
}
#sidebar #credits {
  display:none;
}
#storeArea * {
  display:none;
}
#passages {
  z-index:-5;
  border-left: 0;
  margin: 16em 0 4em 0;
}
.passage {
  font-size: 1.4em;
}
body {
  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px;
}

Thanks for your time,
Ben

greyelf

The story formats don't generally supply a way to distinguish a paragraph so you will need to do that yourself, you can do this by wrapping them in a HTML p element like the following example. (which also uses backslashes to remove unwanted line-breaks)

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\
\
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\

The following CSS adds a 33% margin to the both sides of the passage area causing the passage text to be centred, it then justifies that passage text, and finally adds a indentation to the first line of the paragraphs.

#passages {
	margin: 0 33%;
}
.passage {
	text-align: justify;
}
.passage p {
	text-indent: 2em;
}

TheMadExile

Some points about your CSS.

1. Those are not styles for SugarCube (either major version). They're for Sugarcane (or one of the other Twine 1 vanilla story formats). That would probably be the main reason why many (most?) of your styles aren't working.
2. You try to make the passage store visible, which you really should not be doing in the first place, then you hide its contents. I don't even know what to say about that.

Quaay

Thanks a bunch GreyElf, that really helped a lot.