Howdy, Stranger!

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

Link Colors in 1.4

Greetings!

I am a complete newbie when it comes to both Twine and CSS. So, the answer to this question is no doubt a simple one.

My link colors are lime in 1.3.X, but in 1.4, they are the standard blue color. This is to be expected as L explained:

L wrote:

The CSS rule for styling links in all story formats was changed from "a.internalLink,a.externalLink" to ".passage a". This was done for one major reason: a vast number of people were using HTML links "<a href="http://www.example.org">"; instead of proper external links "[[link text|http://www.example.org]]"; and the former links were appearing as unstyled dark-blue-on-black links in Sugarcane. To mitigate this problem, I changed the rule to guarantee that even people unaware of the external link syntax would receive properly styled links. (It also has the intended side-effect of making other links created by macros (such as <<choice>> or <<return>>) not require the author to supply extra rules to re-style them.)

But, ".passage a" should have identical specificity to both "a.internalLink" and your own "a:link", so if you're having a problem with that, hmm, that might indeed indicate a problem of some sort.


Unfortunately, that's Greek to me.

What do I need to type to make all my links lime green?

Here's what I have:
.passage { font: normal 14pt Lucida Console, monospace; width: 600px; color:#00FF00; !important }

a:link {color:#00FF00 !important; text-decoration:underline;}
a:visited {color:#00FF00 !important;}
a:hover {color:#008000 !important;}
a:active {color:#008000 !important;}
Never mind the visited code.

I tried a number of things in the .passage but failed to make the links green. XD

Thanks a lot!

Comments

  • OH! I just figured out why "a:link" no longer works as a CSS selector. OK, hmm.

    Anyway, the makeshift solution is to just put ".passage " in front of each "a"... for instance, change "a:link" to ".passage a:link" and so forth.
  • Uh-oh. What is my dumb newbie brain doing wrong now?
    .passage a:link {color:#00FF00 !important; text-decoration:underline;}
    .passage a:link {color:#00FF00 !important;}
    .passage a:link {color:#008000 !important;}
    .passage a:link {color:#008000 !important;}
    The links are still blue.

    There are other tiny issues I've noticed with links using other people's style sheets. Should I give you information on that or do you think you have the answer to those as well?
  • Wait, no, I mistyped that post, sorry. You have to change "a:link" to ".passage a" and delete the ":link" portion. There.
  • Thanks! That did it! :D
  • Im a newbie to twine also. I have been browsing through the wiki and the forum.

    I want to be able change text colour for paragraphs or links.  I tried copying some of the code provided above in this thread but cannot get that working, could an example be provided? All i want to do is change colour only and not anything else.

    Why cannot i use <font color="red">Text paragraph</font> this would seem much more simple.

    **Update**

    This was what I was looking for- I have copy/pasted it from the Syntax page on the Twine wiki in here other newbies like me. There is a little bit more info on that page if using something like that a lot.

    Inline styling

    Inline styling is a shorthand way to apply one-off CSS styles to a span of text. Where normally you would have to write:

    <span style=color:magenta;letter-spacing:3px;font-size:1.5em;>Some text</span>

    You can instead write:

    @color:magenta;letter-spacing:3px;font-size:1.5em;Some text@@
  • Dazakiwi38 wrote:

    Why cannot i use <font color="red">Text paragraph</font> this would seem much more simple.
    Uhhh..... you can??

    I don't really recommend copy-pasting that tag into every passage, though.
  • Dazakiwi38 wrote:
    I tried copying some of the code provided above in this thread but cannot get that working, could an example be provided?


    You just want to change the color of all your links? That's what the code provided above does.

    You can right click anywhere in your story and click "New Stylesheet Here" and a template will be created. Just learned that a couple days ago. ;D

    Attached is a story file with a stylesheet where all the links are red and all text is blue. :)

    Hope that helps!
  • Sharpe wrote:

    Dazakiwi38 wrote:
    I tried copying some of the code provided above in this thread but cannot get that working, could an example be provided?


    You just want to change the color of all your links? That's what the code provided above does.

    You can right click anywhere in your story and click "New Stylesheet Here" and a template will be created. Just learned that a couple days ago. ;D

    Attached is a story file with a stylesheet where all the links are red and all text is blue. :)

    Hope that helps!


    Hey thanks for that. Sometimes seeing an actual demo of something is easier.

    Ok, so its right clicking anywhere in the background window/wall where the passage panels go (I was at first clicking inside the passage panels).
    That's a neat feature.

    Thanks.

  • No problem. :)

    You can also make any passage a stylesheet just by adding the tag, "stylesheet" without the quotation marks. :)
Sign In or Register to comment.