Howdy, Stranger!

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

Help! is not working... and other issues.

Hi
I am verrrry much a newb and I am trying to learn Twine, so please excuse my ignorance. I am trying to create a presentation about a poem for school, and I wanted to be able to display the poem, and then add "annotations" in Twine. I'm having some trouble though.

First of all, I wanted to be able to change the color of some words in the passage but not others. However, I could find no way to do this without making the words links. This seemed overly clutter-y, so I did some research, got Sugarcube, and tried using the click macro. However, the macro could not change the colors of the words. That at least was better then having links, but I wanted these words to be a different color than the other links in the presentation. I tried creating a new stylesheet, and tagging the passage with it, to make those links red, but it didn't work, and I'm not sure why. This the code I used:

.passage a {
/* This affects passage links */
color: red;

}

Then, leaving the color alone, I thought I could at least add letters to show the rhyme scheme on click, using click and print. I even created letters for the variables I wanted, but it still didn't work. This is what I did:

<<silently>>
<<set $A to " A">>
<<set $B to " B">>
<<set $C to " C">>
<</silently>>
As we lie down to sleep the world turns half <<click "away">><<print $A>><</click>>

<blockquote>through ninety dark <<click "degrees;">><<print $B>><</click>></blockquote>
<blockquote><blockquote>the bureau lies on the <<click "wall">><<print $C>><</click>></blockquote></blockquote>
and thoughts that were recumbent in the <<click "day">><<print $A>><</click>>

<blockquote><blockquote>rise as the others <<click "fall">><<print $C>><</click>></blockquote></blockquote>
<blockquote>stand up and make a forest of thickset <<click "trees.">><<print $B>><</click>></blockquote>

If possible, I would like all the letters to appear together, but I can't figure out how to do that. Also, I was using blockquote to copy the indent pattern of the poem, but it adds space between the lines, hence all the spaces. Is there anything else I can use to indent?

Thanks so much. These are probably simple things, but I can't figure out how to make them work, and the presentation is really soon. Also, I know Twine is a weird format for a presentation, but there is a creative part at the beginning that uses Twine, and part of the symbolism  is that the creative part transitions seamlessly into the non-creative part.

Thanks again!
Phoebe

Comments

  • There are two basic ways to style letters / words / paragraphs  that work in both the built in story formats as well as SugarCube.

    1. Using a CSS class and some CSS in your style sheet. (the better option)

    Place the following text in a passage:

    This is normal looking text but <span class="pretty">these words</span> will look pretty.
    This is normal looking text but @@.pretty;these words@@ will look pretty.
    Place the following CSS in your stylesheet passage:

    #passages .pretty {
    color:blue;
    background-color:gray
    }
    2. Using the inline styling markup: (Twine Wiki and SugarCube documentation)

    Place the following text in a passage:

    This is normal looking text but <span style="color:blue;background-color:gray">these words</span> will look pretty.

    This is normal looking text but @@color:blue;background-color:gray;these words@@ will look pretty.

    I don't 100% understand what visual effect your trying to achieve with your block-quoted text but is it something like the following two examples?
    Place the following text in a passage:

    <blockquote>
    As we lie down to sleep the world turns half @@.mark;away@@
    through ninety dark @@.mark;degrees@@
    the bureau lies on the @@.mark;wall@@
    and thoughts that were recumbent in the @@.mark;day@@
    rise as the others @@.mark;fall@@
    stand up and make a forest of thickset @@.mark;trees.@@
    </blockquote>

    <blockquote>
    As we lie down to sleep the world turns half @@.mark;away@@ \
    through ninety dark @@.mark;degrees@@ \
    the bureau lies on the @@.mark;wall@@ \
    and thoughts that were recumbent in the @@.mark;day@@ \
    rise as the others @@.mark;fall@@ \
    stand up and make a forest of thickset @@.mark;trees.@@
    </blockquote>
    Add the following CSS to your stylesheet passage:

    #passages .mark {
    color: red;
    font-weight: bold;
    font-style: italic;
    }
  • Thank you so much!!!! That is a huge help with the annotations.
    What I am trying to do with the blockquoting is have some lines double indented, some single indented, and some not indented at all without changing the vertical space between the lines. It's kind of weird, but that is how the poet wrote it, so oh well. It would look like this:

    As we lie down to sleep the world turns half away
          through ninety dark degrees;
                  the bureau lies on the wall
    and thoughts that were recumbent in the day
                  rise as the others fall
          stand up and make a forest of thickset trees.

    Thank you for your help!
  • Do you need to format text like that only a couple of times, or does it happen often in your story?

    a. If only a couple of times then you could do something hacky like the following:
    (note: you may  need to test this on different browsers.)

    As we lie down to sleep the world turns half away
    <span style="padding-left: 2em;">through ninety dark degrees;</span>
    <span style="padding-left: 4em;">the bureau lies on the wall</span>
    and thoughts that were recumbent in the day
    <span style="padding-left: 4em;">rise as the others fall</span>
    <span style="padding-left: 2em;">stand up and make a forest of thickset trees.</span>
    b. If it is going to happen often, then I would move the inline styles into your stylesheet passage and use classes. Something like the following should work:

    <div class="poem">
    <span class="one">As we lie down to sleep the world turns half away</span>
    <span class="two">through ninety dark degrees;</span>
    <span class="three">the bureau lies on the wall</span>
    <span class="one">and thoughts that were recumbent in the day</span>
    <span class="three">rise as the others fall</span>
    <span class="two">stand up and make a forest of thickset trees.</span>
    </div>
    Using this CSS:
    (note: you can also add style rules for the "poem" and "one" classes.)

    #passages .poem .two {padding-left: 2em;}
    #passages .poem .three {padding-left: 4em;}
  • It works! :)
    Thank you for all your help- you saved my presentation, and I've learned a lot I can use in later Twine projects!
    Phoebe
Sign In or Register to comment.