How to use W3.CSS in Twine Harlowe?

0 votes
asked Dec 6 by bennconn (240 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
answered Dec 6 by greyelf (43,790 points)
selected Dec 7 by bennconn
 
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>\
</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)

commented Dec 7 by bennconn (240 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!
commented Dec 7 by greyelf (43,790 points)
thank you for the kind words.
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...