0 votes
by (390 points)

Does anyone know how I can use W3.CSS code in my Twine Harlowe project? There are some interesting things that I would like to add (like progress bars) but I can't figure out how to be able to use it. Do I have to add something to the stylesheet somehow? Nothing I've been trying has worked. Thanks in advance!

(more information of what I want to use here: "https://www.w3schools.com/w3css/w3css_progressbar.asp"

1 Answer

0 votes
by (159k points)
selected by
Best answer

Do I have to add something to the stylesheet somehow?

W3 CSS consists of two parts:

1. The core CSS rules which you use to achieve the effects you want. 

A copy of this can be obtained from their Downloads page, simply click on the link of the version (3 or 4) you want to use and then cut-and-paste the contents of the page that appears in your web-browser into the Story Stylesheet area of your story.

WARNING: Without testing it is difficult to know if any of the W3 CSS rules will interfere with the default CSS rules built into Harlowe 2.

2. Using the W3 CSS examples in your story.

The only way to know which effects will work as is within Harlowe 2 and which ones won't is to try them and see. You mentioned the Basic Progress Bar in your question, so the following is an example of using that effect within a Passage.

<div class="w3-border">\
  <div class="w3-grey" style="height:24px;width:20%"></div>\

... you may notice that I used Escaped line break markup in the above example, this is to suppress unwanted br elements (line-breaks) being added to the generated HTML structure which can cause issues with some CSS.
(To demonstration one of the types of issues I mean simply remove the backslash characters from the above example then test/play the Passage again)

by (390 points)
This worked perfectly! Exactly what I needed! Thank you so much for your help; I can't tell you or thank you enough for all that I've learned from you from other forums and questions as well. Thanks for your selfless service and willingness to share what you know! You're the best!
by (159k points)
thank you for the kind words.
by (250 points)

I'm using Twine 2.2.1, Sugarcube 2.21.0

I am learning CSS while learning Twine.  I have been unable to get any w3.css classes to work in my story.  I have done the following:

Included this code in my stylesheet:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Then included this code in a passage:

<div class="w3-container w3-teal">
  <h1>Chapter #1</h1>

The words "Chapter #1" appear, but not within a teal container.

I am probably making a basic mistake...any help anyone can give would be much appreciated as there are many w3.css classes I would like to use in my Twine story.

Thank you!