question about multi colored text in the same passage!

raffa

hi everyone! sorry if this is already answered somewhere, but i can't seem to find the solution to this. i wanna display, in the same passage, text with different colors. i know how to use CSS to change the colors of the whole passage, but not invidividual sentences. it seems so simple, but i have no idea how to do it! can anyone help me? 

mostly useless

Hi there!

You probably want to use span classes. Take a look at this thread:

http://twinery.org/forum/index.php/topic,1055.msg1727.html#msg1727

EDIT: Or you can be lazy and use HTML:

<font color = "green">some green text</font> <font color = "red">some red text</font>

Good luck!

raffa

oh, i saw that! but it didn't work, and i assumed it was because the text i was trying to change wasn't a link...

mostly useless

Someone else may have better advice, I'm very new to CSS. I generally use the lazy HTML method as above.

raffa

the lazy HTML method totally worked! thanks so much! i knew it was a simple solution...

mostly useless

No worries! I'm not at my Twinestation right now, but this might work for a CSS solution:

<span style="color:red">red text</span>

Got it from here:

http://stackoverflow.com/questions/4182554/html-css-font-color-vs-span-style

raffa

thanks, but html is fine! i didn't even realize i could do simple html stuff like that to change font sizes, use italics, bold, etc.

mth

If the colors have meaning, it might be better to use CSS like this:


(in the stylesheet)
span.sad {
color: blue;
}

(in the passage)
You see <span class="sad">one depressed android</span>.


This allows you to change the appearance of spans in a single place, if you later decide you want a different shade of blue, for example.

Dazakiwi38

mth wrote:

If the colors have meaning, it might be better to use CSS like this:


(in the stylesheet)
span.sad {
color: blue;
}

(in the passage)
You see <span class="sad">one depressed android</span>.


This allows you to change the appearance of spans in a single place, if you later decide you want a different shade of blue, for example.

That's really handy. But how do you use it when you are using a custom defined stylesheet? I am using L's Muet stylesheet and I tried using the same method as you described above but the colours are not changing in the block of text.  The Twine wiki example for this includes altering the letter spacing and font size which that part did work but just no colour change.  I presume the colour change is being overriden by the main Muet stylesheet? The syntax is correct because I did a test with a blank twine game with no custom stylesheet. 

mth

I'm not familiar with the Muet stylesheet, but in general the more specific CSS definitions will override the more generic ones and it is unlikely any stylesheet would contain something more specific than "span.sad". The only thing I can think of is that the stylesheet uses "!important", which is a rather blunt instrument that should be used as little as possible.

If you have a web browser with debugging capabilities (such as the right-click ; Inspect Element option in Firefox) you can check which CSS styles are active on each element of your story's HTML. That is usually much quicker than trying to fix things by trial and error.

dacharya64

I'm using the Squillions stylesheet and trying to make various links change their "hover" color. The CSS already has an !important in there for the default color, but I want to make three different hover colors for three different links in the same passage.

I've tried:

a.link {
.passage a:hover
  color:#ff00ff !important;
  text-decoration: none;
}
but <span> doesn't seem to change the color. When I get rid of the !important built into the stylesheet, no hover colors appear at all.

I really know nothing about CSS, so I've been trying to hash together some piecemeal solutions, to no avail...

mth

dacharya64 wrote:

I've tried:

a.link {
.passage a:hover
  color:#ff00ff !important;
  text-decoration: none;
}
but <span> doesn't seem to change the color. When I get rid of the !important built into the stylesheet, no hover colors appear at all.

This is not valid CSS syntax. If you want to apply the same block to multiple selectors, it should look like this:


a.link, .passage a:hover {
color:#ff00ff !important;
text-decoration: none;
}