Customizing the UI Bar

I’m fiddling with the appearance. I have a nice beige background for both the main text display area and the sidebar (with a 3-pixel border between them). My own text for the title, author, and caption is in my preferred color. However, the Saves and Restart buttons and the Minimize arrow are blank unless I hover the mouse over them.

I would like them to have a different background color so they’ll be visible at all times. But I have no idea what element those items are, so I don’t know how to CSS them. No luck finding this info anywhere, nor am I able to spot it by opening the Developer Tools in Firefox.

Sorry to be so fussy. I’m sure this is easy…

Here’s another issue I just discovered. I narrowed the sidebar (to 22%). It looks nice, but now when I close it I can’t open it again, because the opener arrow is now off the edge of the display area. I’m sure there’s some other way to adjust the normal width without adjusting the minimized width. Can anyone suggest where this parameter is located?

The save and restart button backgrounds can be edited at #menu ul{background: xx;}.

The arrow in the UI bar can be edited at #ui-bar-toggle{background: xx;}

To adjust the width of the UI bar when it’s stowed, you’ll have to adjust #ui-bar.stowed{left: xx;}.

When you’re using the Developer Tools, there should be a button in the top left corner of an arrow on top of a box like this:

You can use that to select any specific element visible on the page and the console will highlight it in the toolbox for you.

Thanks. I managed to figure most of that out just a few minutes ago … but your suggestion for the Save and Restart button backgrounds doesn’t seem to work. I tried it several different ways – using background-color instead of just background, and putting it in #menu li instead of #menu ul. Nothing worked. I’ve got the text for those items visible now, but the background is still transparent.

Really? That is weird. #menu li{background: xx;} works for me. When you look at it in Dev Tools, does it show anything overriding it?

Alternatively, adding !important like: #menu li{background: red !important;} should force it to work, but doesn’t address the problem.

I don’t know enough about Dev Tools in Firefox to be able to answer that question. Adding !important does indeed force it to work – thanks for suggesting that!. I think this may be just one of those things that happens when you have a whole bunch of style sheets (13 of them, in this case) cascading over one another.

If you want to do any styling in your game, I’d highly recommend learning to use it.

Just open your game in the browser, hit F12, CTRL+SHIFT+i, or right-click an element and hit “Inspect Element”, and now you’ll be able to see the current HTML on the left and on the right you’ll see the CSS affecting the selected element.

With that, you can play around with the CSS to make things look the way you want there. Now all you need to do is just copy whatever changes you made to your game’s Stylesheet section and you’re all set.

The CSS editor also gives suggestions, which makes it easier to learn CSS styling.

Have fun! :grinning:

By default, the Saves and Restart buttons—actually styled links—do not have an assigned base background color, instead defaulting to that of their ancestor #ui-bar element.

They do have a base foreground color and a :hover pseudo-class background, and border, color. The relevant default styles:

#menu li a {
	color: #eee;
}
#menu li a:hover {
    background-color: #444;
    border-color: #eee;
}

Downloading the Bleached stylesheet from SugarCube’s website may give you styling ideas. There’s also the CSS > Built-in Stylesheets section of the official docs.