Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sharpe's Stylesheets

edited December 2013 in Workshop

In order to gain a better understanding of how to edit Twine's appearance and to better understand CSS, I decided to make a really stripped-down stylesheet.

This is my first real attempt to learn the basic fundamentals of CSS.

I tried to make the stylesheet just about as plain as possible. With the help of W3Schools and Glorious Trainwreck's FAQ and stylesheet pages, and of course the Twine Wiki's stylesheet page, I think I accomplished my goal.

Please let me know about errors or provide advice or suggestions on how to improve this stylesheet. Note, though, that I intentionally tried not to use shorthand (for example, with padding and fonts), for legibility. There is also some code setting properties to default values so that other learners can see where to make changes.

I tested this in Firefox version 26.0, Google Chrome version 31.0.1650.63 m, and Internet Explorer version 11.0.9600.16476. All three browsers are the most current official releases to date.

/* Your story will use the CSS in this passage to style the page.
Give this passage more tags, and it will only affect passages with those tags. */

/* Plain Sugarcane Stylesheet version 1.03 by Richard D. Sharpe, Dec. 30, 2013 */

body {
/* This affects the entire page. */

/* Remove default styles */
color: black;
background-color: transparent;
margin: 0;

#sidebar {
/* This affects the Sugarcane sidebar */

/* Removes the Sugarcane sidebar */
display: none;

#passages {
/* This is a container for all passages displayed on the page */

/* Removes the vertical line to the left of Sugarcane passages */
border: 0;

/* Removes the space left from removing the Sugarcane sidebar */
margin: 0;

/* Creates space between the passage and the top and bottom of the page */
padding-bottom: 5%;
padding-left: 0;
padding-right: 0;
padding-top: 5%;

.passage {
/* This only affects passages */

/* Passage width */
width: 640px;

/* Passage height */
height: auto;

/* Centers the passage horizontally */
margin-left: auto;
margin-right: auto;

/* Padding */

/* Text formatting */
font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
font-size: medium;
line-height: normal;
font-family: sans-serif;

/* Sets a border around the passage */
border-style: solid;
border-width: 1;

/* Sets the passage background color */
background: transparent;

.passage a {
/* This affects passage links */

color: #4169E1;

.passage a:hover {
/* This affects links while the cursor is over them */

color: #6495ED;

Below are links to the attached Twine story file and HTML file.

I hope someone finds this helpful. :)

Richard Sharpe


  • Pretty cool. Looks nice. :)
  • Dumb Terminal Stylesheet

    The Dumb Terminal Stylesheet for Sugarcange is more than just a stylesheet. It includes HarmlessTrouble's <<textinput>> macro and his code to display a new region outside the passage to show information such as text, pictures and variables to the player. It also includes a Code Page 437-style font.

    However, for this version, 1.0, I was unable to figure out how to properly center the two CSS elements, .passage and .storyRegion., which are both floated left. So, I set fixed widths. Someday, I'll figure it out and update this stylesheet. For now, it's good enough.

    Download the story file for all the stylesheet, scripts and passages required to make it work.


    Enjoy! :)
  • oh wow! that looks super cool! i was thinking the other day about multiple windows within twine.
  • All the credit goes to HarmlessTrouble for the multiple panes.

    If you figure out how to correctly center two elements that are floated left, let us all know. I just don't feel like spending more time on it right now.

    On my list of things to do: make another stylesheet that uses frames that will serve much the same purpose as multiple passages, but will be fully controlled by CSS and easily legible.
  • I'm looking at the StoryRegions Module script and can't figure out how to create a passage that display something else instead of what's displayed in "Box".
    is the only way to alter this by adding new IF statements in "Box"?
    I'm pretty sure there must be a special tag I should use.  I see Box has the "StoryRegion" tag but, how would it differentiate it from any other StoryRegion Passage?

  • "Box" is just the passage title I used. You can call your passage anything; it's the StoryRegions tag that matters. You can also use the <<display>> macro, I'm sure, like in any other passage.

    There is only one passage with the StoryRegions tag, and that's the passage that's displayed by the script module. I've never tried to tag more than one passage. Have no idea what that would do. Probably error.
  • So you would need an additional IF statements to change the contents of that passage then.

    Creating another passage with the StoryRegion tag creates another box besides the first box. So there are two boxes simultaneously displaying.
  • wrongtarget wrote:
    So you would need an additional IF statements to change the contents of that passage then.

    Also, the code in the Update Regions passage if you want the passage to immediately change.

    However, I believe there are macros out there that mess with tags. So, if you can change the tags of passages, you can change the display of what's in the StoryRegion that way as well.
  • Got it!
    Thanks Sharpe. I'm using it as character portraits for dialogue.  :)
  • Cool! :)

    However, I'd probably do that with frames. The CSS would be more complex, but the result would be more customizable and the appearance benefits might be worthwhile.

    I'm trying to find time to make a basic frames template. I have one started, but boy, is it ugly. I'll attach it so you can see what I mean, but note that it's far from finished and I still can't figure out how to center three elements floated left in Twine. The contrasting colors are in place to show what is what in Twine. With some imagination, one can see just how creatively frames can be used, especially for things like dialog boxes with portraits, maps for places, pictures of enemies or objects, etc.

    Again, the attached stylesheet is no where near finished.
  • Bloody Parchment


    Here's a stylesheet I worked on today in an attempt to understand the border-image CSS property. Long story short, I failed to wrap my brain around it before my attention span ran away. However, the results in Firefox and Chrome were acceptable, so I thought I would share.

    The parchment and border are seamless and scale with the browser window's size. That was the core functionality I sought when making this. Otherwise, I would have just used a background image and set fixed height and width! No matter how wide, thin, long or short, the passage is, the parchment and border scales with it. I did set a minimum width and height, but that can be removed if desired.

    Unfortunately, this stylesheet does not work in Internet Explorer at all, apparently, though the newest version (11) should recognize border-image. IE 10 and earlier versions do not. If anyone wants to inform me what I'm doing wrong and help me better understand image-border, I'd appreciate it. (EDIT: Actually, it's the font that's causing problems in IE only. Strange. I even ran it through a converter . . .)

    I hand drew the border image with a mouse in GIMP then added a filter or two, so it could use a lot of work to make it look more realistic. In fact, a lot could be done to make this look better. Someday, maybe I'll make a better-looking version.

    Until then, but especially until I get this working in IE, this is more of a proof of concept than a release. If anyone wants to help, by all means, let me know!

    The parchment background is 156KB and the border is 24KB. Therefore, I compressed the TWS and HTML files and added them to Dropbox:

    Bloody Parchment:
    Fixed Dimensions

    (Coming Soon)


    Now this is more like it! When I throw out the scalability, I can make the parchment look a lot better and also use a body background image rather than the black required in the regular version of this stylesheet. There's still a lot of work that can be done, though.

    I made the parchment from scratch in GIMP in about ten minutes. If I spent some time with some grunge brushes, I could really bring it out.

    Again, though, I found out the problem in IE was with the font. I copy and pasted each individual passage into a new TWS one by one until IE crashed. The only one that caused a problem was the imported font.

    When I select a new font and finish the parchment, I'll upload new versions of both stylesheets. Both work in the current versions of Firefox, Chrome, and IE, but the regular version will not work in IE 10 or lower. Notice I said IE 10, not IE 9 or IE 8, which is to be expected. It's disheartening that IE 10 doesn't support border-image. 

    In the future, I plan to add some stains and blood spatters in random locations on both versions. So, each time the page is turned, it will look different.
  • I can't see the previews of the earlier examples, but the Bloody Parchment stylesheet is fantastic!
  • Thank you Sharpe. You're very helpful to the community.
  • How would you make this work in just one passage only? Or a couple.
  • Hi Sharpe, I've been attempting to get a version of your Dumb Terminal stylesheet working in Sugarcube, and I think I figured out how to center two elements which have been floated left. Whilst I think my implementation will need to be adapted slightly to work with your stylesheet (I'm creating the second window in a different manner), I think the idea itself should work. The implementation itself is based the CSS found here:

    What I did was use JavaScript to create a new div which had the main passage window and the secondary display window as child elements. I placed this code as a &lt;&lt;script&gt;&gt; in the StoryInit passage, and I'm not sure if it will work in a normal script passage.
    var wrap = document.createElement("div");

    var divs = document.getElementsByTagName("div");

    var body = document.getElementsByTagName("body")[0];

    wrap.setAttribute("id", "container");

    for(var i = 0; i < divs.length; i++) {
    if ( divs[i].getAttribute("id") == "secondary-display") {
    if ( divs[i].getAttribute("id") == "passages") {

    Depending on how you have the second display window set up, you will need to change "secondary-display" in the first if statement to whatever id is associated with the window (if the window does not have an id, but rather just a class, I think you can change "id" to "class" in divs[ i ].getAttribute(&quot;id&quot;), which should work).

    Once the two windows are wrapped in the "container" div, use the following CSS.
    #container {
    width: [Insert % value here];
    margin: 0 auto;
    The width will depend on how you've set up the width of the whole page and other elements - you might need to play about with it to get the exact positioning.

    You will also need to set the width in #passages and whatever id is associated with the secondary display window. Again, you might need to play about with the values somewhat to get the exact positioning.

    I've attached the Twine file so you can see precisely what it is I'm doing - you'll need the Sugarcube header for it to work properly, but hopefully it'll provide some ideas as to how to center the elements in Sugarcane.
  • Wow! That's awesome. :) Can't wait to see where this goes. :)
  • Sharpe wrote:
    In order to gain a better understanding of how to edit Twine's appearance and to better understand CSS, I decided to make a really stripped-down stylesheet.

    I'm a bit the same- playing around, certainly no expert. I like the stripped down version because it plays well on a mobile phone. the one change I made was to make it so it wraps nicely on whatever device you use.
    Rather than having a fixed width of 640px, I wrote
    width: 85%;
    Does anyone else have tips on making it work well on little screens?
  • A common way to make HTML support different screen sizes using CSS is to use the @media selector to change which set of rules get applied based on the screen size. This technique is used by websites to support smartphones and tablets as well as desktops.

    A very basic example.

    /* Your general CSS goes here. */
    #passages {
    /* set some attributes */

    /* If the screen is only 640px wide. */
    @media screen and (max-width: 640px) {

    #passages {
    /* override some attributes from general section */

    /* If the screen is only 1024px wide. */
    @media screen and (max-width: 1024px) {

    #passages {
    /* override some attributes from general section */
    I suggest you search CSS @media in the search engine of your choice for more information.
  • Excuse me, but I can't find the link to the Dumb Terminal Stylesheet.
    Was it taken down?

Sign In or Register to comment.