Changing the font of the colour in a button

Question

I'm probably being stupid but would be grateful for any help, as this is the first game I've made. I've got simple buttons in my game, and I'm trying to work out how to make the text white in them.

The rest of the text in the game is grey, outside the buttons, so at the moment the text inside the buttons is grey too -- which on a blue background doesn't look too good. I'm using Sugarcube 2.18.0.

The code I have at the moment is:

<div class="wrapper">
<span class="fixed-buttons">\
<<button "[[Button text is here]]">>...<</button>>
</span>
</div>

And in CSS:

body {
    background-color: white;
      color: #666666;
      font-family: Times, Arial, Helvetica, sans-serif;
      font-size: 125%;

  }

.fixed-buttons button {
    width: 30em;
}

.wrapper {
  text-align: center;
}

 

Many thanks for your help!

Answer 1

Hey there! When you post code, make sure you use the first icon in the toolbar to mark it as code.

Here is a very similar thread on formatting buttons. See TheMadExile's answer in particular for which button class to use. I would suggest probably the first one he lists. Then add your desired color to the class.

.macro-button {
color: black /*or whatever other color you want here*/;
}

 

Comments

Hey, thanks I will indent from now on when I post code! I used that button class that TheMadExile suggested and got rid of the span I was using. It seems to have fixed the font colour issue, so thanks!

Now I'm having another problem, though, that when I click "test" I can still see the button code around the button, in black and grey. I'm not sure why. Any idea what I've done?

<div class="wrapper">
<<button [["If you owned land in Dublin, what would you do?"]]>>...<</button>>
</div>

.macro-button {
	color: white;
	width: 30em;
    font-size: 24px;
}

.wrapper {
  text-align: center;
}

 

---

Actually, it seems to work okay when I press "play", just not when I press "test"...

---

What you're seeing is the debug view provided by the "test" option. As you've discovered already, using the play option prevents the debug view from being shown. It won't be shown in the compiled file (what you'll eventually publish) either.

Answer 2

You should just need to add the color property to your current fixed button targeting style.

For example, the following should work:

.fixed-buttons button {
	color: #fff;
	width: 30em;
}