how to change the sugarcube menu buttons

Question

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?

Answer 1

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.