Different colored links?

Morgan_R

Hi folks! I'm new to Twine and absolutely thrilled to have found such a great tool. It really seems ideal for the kind of games I want to make.

I recently played Castle, Forest, Island, Sea, and I liked the way they used different colors for different 'types' of links. I'm not planning to do the 'adding/changing text in place' trick (although I'd love to know how it's done), but I'd like players to be able to see which links provide more information, as opposed to the links which move you forward in the game.

My question is: How do I set things up so that I can flag links as being of a given type, and then color them accordingly?

Thanks in advance for any and all help!

CoraBlue

Great question. Most of the color and formatting 'tricks' in Twine are done with CSS (Cascading Style Sheets) which is an extremely simple language webpages reference for basic information like font size and color. The author of the story you linked is using CSS in combination with the custom script macro found here.

Links in Twine are colored via CSS. So if we have a tag with an class of green, like this:

<span class="green'>[[This link is green!]]</span>

We need a stylesheet line like this to make it so:

a.green { color:#31B404; }

What this all boils down to is that Twine, like a great strategy game, is easy to get into but has a very high skill ceiling. People here are more than happy to help you with this kind of stuff, but if you enjoy it I highly recommend learning some basic HTML and CSS!

L

CoraBlue wrote:

Links in Twine are colored via CSS. So if we have a tag with an class of green, like this:

<div class="green'>[[This link is green!]]</div>

Hold on - divs aren't a good fit here because they're block elements, which means they (usually) take up the full width of the page. Use spans instead. Also, use semantic/informational class names that say what the link actually means:

<span class="decision">[[Pick the left route]]</span>

Also in the interest of accuracy, CSS is not "extremely simple" - take a look at "margin: 0 auto", or "position:absolute" or "div:not([name*=red])".

CoraBlue

L wrote:

CoraBlue wrote:

Links in Twine are colored via CSS. So if we have a tag with an class of green, like this:

<div class="green'>[[This link is green!]]</div>

Hold on - divs aren't a good fit here because they're block elements, which means they (usually) take up the full width of the page. Use spans instead. Also, use semantic/informational class names that say what the link actually means:

<span class="decision">[[Pick the left route]]</span>

Also in the interest of accuracy, CSS is not "extremely simple" - take a look at "margin: 0 auto", or "position:absolute" or "div:not([name*=red])".

Well no language is going to be picked up in a few hours, but I learned it in a few weeks, and it'd be hard to think of any languages that are easier to learn. Javascript for example is certainly much harder. You're right about the div tag though. Changed it.

Morgan_R

Ah, CSS, my old nemesis, we meet again... XD

Heh. Thanks for the tip. I wouldn't claim to 'know' CSS, but I think I can manage this, at least.

Morgan_R

Just a quick note for anyone else looking into this:

I had to throw an !important in there to get it working:

.info a { color:#ffffff !important; }

Now it's doing exactly what I want, so thanks again! ^_^

L

Actually, I think that code is still incorrect.

If you're doing:


<span class="green">[[Link]]</span>


Then the correct selector would be:


.green a


I don't know how a.green would ever work...
Furthermore, if you used that selector, the !important keyword would not be required.

Morgan_R

Whoops, that's what I get for copy-pasting someone else's code instead of my own. Fixed.

I really did seem to need that !important, though... except I took it out to confirm, and it still works.  ???