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?
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.
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.
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;
}