Sharpe's Stylesheets

Comments

• loopernow

  December 2013

  Pretty cool. Looks nice.
• Sharpe

  December 2013

  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!
• Porpentine

  January 2014

  oh wow! that looks super cool! i was thinking the other day about multiple windows within twine.
• Sharpe

  January 2014

  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.
• wrongtarget

  January 2014

  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?
  
  Thanks!
• Sharpe

  January 2014

  "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.
• wrongtarget

  January 2014

  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.
• Sharpe

  January 2014

  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.
• wrongtarget

  January 2014

  Got it!
  Thanks Sharpe. I'm using it as character portraits for dialogue. 
• Sharpe

  January 2014

  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.
• Sharpe

  January 2014

  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:
  
  https://dl.dropboxusercontent.com/u/34725588/Bloody%20Parchment.rar
  
  
  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.
• bawpie

  January 2014

  I can't see the previews of the earlier examples, but the Bloody Parchment stylesheet is fantastic!
• Neyowolf

  February 2014

  Thank you Sharpe. You're very helpful to the community.
• Neyowolf

  February 2014

  How would you make this work in just one passage only? Or a couple.
• Antholex

  May 2014

  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: http://www.corelangs.com/css/box/center-div.html
  
  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 <<script>> 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") {
wrap.appendChild(divs[i]);
}
if ( divs[i].getAttribute("id") == "passages") {
wrap.appendChild(divs[i]);
}
}

body.appendChild(wrap);

  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("id"), 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.
• Sharpe

  May 2014

  Wow! That's awesome. Can't wait to see where this goes.
• youcancallmedavid

  June 2014

  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%;
  max-width:640px;
  Does anyone else have tips on making it work well on little screens?
• greyelf

  June 2014

  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.
• wunderwaff

  May 2017

  Excuse me, but I can't find the link to the Dumb Terminal Stylesheet.
  Was it taken down?