How do I customize the stat screen color scheme like that of Fallen Hero: Rebirth

Game Development ChoiceScript Help
,
1

Generally, the stat bars are red and blue colored but the one from Fallen Hero: Rebirth is cyan and orange. How can I make similar changes?

IMG_20200614_211628
IMG_20200614_211628720Ă—1063 94.5 KB

2

You have to edit the style.css file where your game is located (so generally \dfabulich-choicescript-4600ebf\web). You can edit it with a simple text editor, same as the rest of ChoiceScript, so no worries about that. This page on the ChoiceScript wiki has a list of what you can change and where to find it in your style.css file.

9 Likes
3

More in-depth CSS tutorial
https://www.w3schools.com/css/default.asp

3 Likes
4

I checked my pc but couldn’t find the folder

5

Ohh I didn’t know we were allowed to play with the style file for games going to HG. I’d like some pretty stats bars for some of my projects :dizzy: :boom:

What aspects are we allowed to mess with? Is it just the stats bars and maybe the button colours? I’m guessing not page and general text colours etc?

@rinzygreye

image

4 Likes
6

I’m not sure we’re allowed to but if we are I’d like to play around with my stats menu :grin:

7

Where’d you find it?

8

You have to download all choicescript files. If you’re using CSIDE, the project folder will have only the scene text files.

The style.css file should be inside the ./web/ folder.

1 Like
9

If we are using CSIDE how would we go about this sort of customisation?

10

Well, generally, you don’t. That’s the tradeoff. CSIDE uses the same stylesheet across projects. If you want a custom stylesheet, I suggest editing the css and then compiling outside of CSIDE. You can still use CSIDE to do the actual writing of the gamebook.

But… If you really must, then:

(Disclaimer: Do this at your own risk.)

  1. Go to the folder where CSIDE is installed
    • For example: C:\Users\user\AppData\Local\ChoiceScript IDE
  2. Open the file package.nw with a file archiver like WinRAR or 7-Zip
  3. Edit the file compile_head.txt in Notepad++ for example:
    • The stylesheet is embedded here
    • The style section begins at line 10687
    • The stats style, more precisely, is between lines 10776 and 10813
  4. Save and repack.
    • I highly recommend making a backup of the original package.nw file
  5. Repeat the same process for prev-package.nw

Keep in mind that this would change the stylesheet for all your projects. It is also possible that your changes might get overwritten by future CSIDE updates.

2 Likes
11

Sorry for another question, I dont feel very smart here: I have only ever used CSIDE - if I wanted to edit the stylesheet after doing my wrting in CSIDE I would dowload choicescript from github then export my scenes from CSIDE and compile with the downloaded choicescript copy? Then I could edit the stylesheet?

1 Like
12

Write your game using CSIDE like you normally would. However, when you’re ready to compile it, do not use CSIDE’s compiler. Download choicescript from github, edit the stylesheet, and then use choicescript compile.html.

  1. Download ChoiceScript from github.
    2
    2966Ă—435 46.7 KB
  2. Export or copy the scene files.
    :warning: Do not compile from CSIDE.
    • Save or copy the files to ./web/mygame/scenes of ChoiceScript
    • Delete any files already there first.
      1
  3. Edit style.css file in the ./web folder.
    3
    3920Ă—705 53 KB
  4. Use ChoiceScript shipped compile.html to compile your game.
    The file is found in the root folder.
    This will open a new browser tab where you can upload the game’s files.
    Select the complete ./web folder and “upload” it.
    Save and rename the compiled game.
4 Likes
13

That makes perfect sense and is very easy to follow, thank you loads :smiling_face_with_three_hearts:

2 Likes
14

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.