0 votes
by (120 points)
I can't for the life of me seem to change the ui bar links, I've tried #menu, #li, #ui-menu and every combination but nothing seems to change it, does anyone know the style formatting needed to change the text colour on the sugarcube menu bar?

1 Answer

0 votes
by (65.8k points)

If you're referring to the core or story menu buttons, then all you really needed to do was to check SugarCube's HTML docs (or use the inspector) to see that the relevant hierarchy is something like:

#menu
    ul#menu-story
        li a
    ul#menu-core
        li a

Then by checking CSS docs > Built-in Stylesheets you'll find a link to ui-bar.css, which has the base style rules you wish to override.

#menu li a {
	/* various style properties */
}
#menu li a:hover {
	/* various style properties */
}

Once you know that, overriding them is fairly simple.  For example:

/* To override the color property of both the core and story menus. */
#menu li a {
	color: pink;
}
#menu li a:hover {
	color: hotpink;
}

/* To override the color property of only the core menu. */
#menu-core li a {
	color: pink;
}
#menu-core li a:hover {
	color: hotpink;
}

/* To override the color property of only the story menu. */
#menu-story li a {
	color: pink;
}
#menu-story li a:hover {
	color: hotpink;
}

 

TIP: Some of your earlier attempts may have been tripped up by CSS specificity.  I'd suggest taking a look at the Specifics on CSS Specificity article at CSS-Tricks.com for more information.

Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...