Howdy, Stranger!

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

Changing Color of StoryMenu Links In SugarCube


I am using Twine 1.4 and SugarCube 2.x and I've just learned how to style links thanks to @TheMadExile (his reply to this thread, to be exact). Thanks a lot! :)

However, when I try to apply this knowledge to links in the StoryMenu passage, basically with the goal of coloring the appearance/examine-me/check-yourself link to reflect the main character's state, SugarCube seems to ignore my coding and nothing happens (the link remains a dull grey). Is it possible to override SugarCube's styling of the link with my own? It would be nice if I could not only color it, but also un-force the uppercase on it.



  • edited December 2016
    As far as my knowledge allows (these go in Edit Story Stylesheet)

    Link color:
    #story-menu {
    color: #ff000b;

    Force lowercase:
    #story-menu {
    text-transform: lowercase;

    Warning: This could all be nonsense. Someone may be along soon to confirm (that it is indeed nonsense)
  • @Jud_Casper There is no such ID—you're thinking of #menu-story—and that would style the unordered list which contains the links, not the StoryMenu links themselves.

    @WolfRawrrr You may want to check SugarCube v2's HTML documentation which shows the basic UI markup, and thus the selectors you'll need.

    You may need multiple selectors, depending on what exactly about the base styling you wish to change, however, the basic selector you want for the links themselves is #menu-story li a. There are other selectors which would also work, though—if memory serves—that is the shortest.

    For example, to change the text color of the links:
    #menu-story li a {
    	color: hotpink;
  • edited December 2016
    Ah well. I was on the right tracks... sort of.

    Just to correct another thing in my last post, you ask how to unforce uppercase and I showed how to force lowercase, which isn't what you asked.

    For the record:
    text-transform: uppercase;
    Forces all uppercase.
    text-transform: lowerercase;
    Forces all lowercase.
    text-transform: capitalize;
    Forces first letter of each word to be a capital.
    text-transform: none;
    Allows links to be shown as written.
  • edited December 2016
    I didn't know if it was possible to choose multiple best answers (as I didn't actually know of any site that allows that), but I really wanted to give praise to both of you, so I tried - and was happy to see that it's possible :)

    Thank you both!
  • edited December 2016
    You came back to acknowledge the answer(s), and that's more than most do on help forums :smile:

    That's help forums in general, by the way. The Twine community seem to be very good on that front.
Sign In or Register to comment.