ChoiceScript Wiki
Register
Advertisement

      The style.css file is the file you can use to customize your game fonts, your stat bars (i.e. the colors of them) and some other aesthetic things, like the color of the "Next" button.

This file uses CSS, a styling script that determines how elements are displayed on the screen. This articles covers the basics, but the customization has no limits. If you want to learn more about CSS, W3schools has excellent tutorials.

Firstly of all, open the style.css file in your game files (..\web\style.css) preferably with a program like Notepad++ (that has syntax highlighting), and follow the instructions below to change various aspects of your game's display.

Font and font size

Changing your game's font is done easily. In the first block of code named "body", look for this line of code:

font-family: Georgia,"Times New Roman",serif;

Georgia is the font the game uses by default. This is what you want to change. You could rename it to "Helvetica", "Garamond", "Arial"... just write the font's name with the first letter capitalized.

Note that the font you choose should be a common one, found on most computers, otherwise, it will default to the second font in the list, "Times New Roman". This is why you should leave ""Times New Roman", serif" alone and only change "Georgia", just in case.

To change the size of the text in your game, find the line:

font-size:100%;

You can increase the font size by changing it to "150%" for example, or decrease it by changing it to "80%".

Background color

To change the background color of your game, look for this line in the first "body" block:

background-color: #F7F4F1;

There, you can see the "F7F4F1" color code. That color code is composed of 3 pairs of 2 characters, with the first pair representing red, the second green, and the third blue. The pair "FF" is the strongest (255) while the pair "00" is the weakest (0). So white would be "#FFFFFF" and black is "#000000". For more info on color codes, and finding the perfect color, go to W3schools color picker.

Tweaking the stat bars

Stats can be displayed in bar form, and that bar can be customized to your satisfaction. Here's how. (See the Stat Screen article for more information on stats and their display.)

We will be using the following example to illustrate the color changes:

StatDisplay1

As stated above, colors are coded with HTML color codes like "#F7F4F1". For more info on color codes, and finding the perfect color, go to W3schools color picker.

Stat bar background color

By default, the background color of the stat bar is gray when there is no opposing pair to a displayed stat. To change this, find the line:

.statBar {

  background-color: #949291;

  [...]
}

If we change #949291 to #00b359, which is a green color, this is how the bar will look:

StatDisplay2

Stat background color

To change the default red color of a stat, find the following line:

.statValue {

  background-color: #ff5955;
 
 [...]
}

Changing the red #ff5955 to the green #00b359 as before shows:

StatDisplay3

Notice that this affects all the stat bars, no matter if they are displayed as percentage or opposed_pair

Opposed stat background color

To change the default blue background color of the opposed stat in a pair, find the following line:

.opposed {

  background-color: #6D6DFC;

}

Again, changing the blue #6D6DFC to the green #00b359 will show:

StatDisplay4

Stat bar text color

In order to change the color of the text displayed on the stat bar, find the following line:

.statBar {

  color: #f7f4f1;

  [...]
}

Changing color to #000000 (black) will show:

StatDisplay5

Bar width

Additionally, you can adjust the width of the stat bars by changing this line:

.statBar {

  width: 300px;

  [...]
}

It isn't recommended to lower this value, since the stat text adjusts depending on the width. Setting the width to 150px, for example, has quite a comical effect:

StatDisplay6

But if you set the width to:

width:100%;

The bars will span the width of the game itself:

StatDisplay7

Changing the display of choices

Choice options border

The lines around the options can be modified by changing these lines: .choice label {

   border-color:#a9acaf;

   border-style:solid;

   [...]

} For example, if you change the border-color to green and the border-style to dashed like this: .choice label{

   border-color:#00b359;

   border-style:dashed;

   [...]

} Options in a choice will display like this:

OptionDisplay1

Greyed-out options' color

You can change the display of options that are disabled and greyed out through the use of the *selectable_if or *disable_reuse commands. Look for these lines:

.choice .disabled {

  color: gray;

}

And change the word "gray" to the color of your choice. Again, for more info on color codes, and finding the perfect color, go to W3schools color picker.

Changing this to the green #00b359 value will show:

OptionDisplay2

You can, of course, add lines to this block to make the text italic, bold, underlined, and even change the background color of the option, such as:

.choice .disabled {

  color: white;

  background-color: gray;

  font-style:italic;

  text-decoration: underline;

}

Which will display: OptionDisplay3

Changing the display of the "Next" button

In this section we will be exploring how to change the appearance of the "Next" button. The changes made here apply to both the "Next" button created by a *page_break command and the "Next Chapter" button created by a *finish command. To learn how to change the wording of the button, please see the respective command pages.

Width of the "Next" button

By default, the "next" button is set to 100%, which makes it as wide as the game, as you will see highlighted in red in the following picture:

WidthNext

The following line controls the button width:

.next {

   width:100%;

   [...]
}

If we set the width to 50%, this is what the Next button will look like:

WidthNext2

Background color of the button

To change the color of the button itself, look for this line:

.next {

   background-color: #626160;

   [...]
}

We can change the color code #626160 (grey) to #00b359 (green). (For more info on color codes, and finding the perfect color, go to W3schools color picker). The button will then look like this:

NextColor1

Font color

When it comes to the color of the writing, there are two things you can change: the color of the words at rest, and the color when the button is hovered over with the mouse.

To change the color of the words "Next", find the following line:

.next {
   
   color: #f7f4f1; /* Match background color */ 
   
   [...]
}

This line shows the color of the "Next" word (NOT the button itself, but the word "Next" only!). If you do not match that with the background color, you will not encounter an error, but it's more appealing if you do so.

If we change this to the green #00b359 as before, the button will look like this:

NextColor2

Notice that after changing the color of the words as above, the color changes back to white when you hover over the button with your mouse. This is because another color line controls the color when the button is hovered over:

.next:hover {

  color: #E4DED8;

}

If you change this color code to green (#00b359) as above, the "Next" will turn green when you hover over the button, as such:

NextColor3 NextColor4

Font size and style

The following lines control the font size and style in the button:

.next {

    font-size:1.5em;

    font-weight:bolder;

    [...]
}

The first line (font-size;1.5em;) determines how large the font that says "Next" is. The unit "em" means the size is relative to the current font size of the element; 2em = twice the font size. This line accepts units such as pixels (px), point (pt) and percentages (%). So you can experiment by changing this to font-size:12px; or 14pt or 150% for example.

The second line (font-weight:bolder;) determines how thick the characters of the word are. This can be changed to the following values:

  • normal, which is the default normal character thickness
  • bold, which defines typically thick characters
  • bolder, which defines extra thick characters
  • lighter, which defines extra thin characters

You can add a few lines here to make the "Next" text always appear italic or underlined. Here's how.

To make the button text italic, you can add the following line to the .next block:

font-style:italic;

To make the "Next" text always underlined, you can add:

text-decoration: underline;

Text decoration also supports overline and line-through, which respectively create a line over the text and a line through the text. You can combine these by simply adding these to the text-decoration as such:

text-decoration: underline overline line-through;


So if you change the code the following way:

.next {

    font-size:1.5em;

    font-weight:lighter;

    font-style:italic;

    text-decoration: underline overline;

    [...]
}

The button will end up looking like this:

NextStyle

Additionally, if you add those lines to the .next:hover block instead like this:

.next:hover {

  color: #E4DED8;

  font-style: italic;

  text-decoration: overline underline;
}

The text decorations will only appear when the button is hovered over with the mouse, and the text will turn italic.

More changes

The other code lines in this file aren't making any major changes like the ones above, so they are not covered here; although, don't mess with them if you do not know how to use CSS (Cascading Style Sheets).

If you want to learn more about CSS, W3schools has excellent tutorials.

Related articles

Advertisement