New GUI Theme

I’m working on implementing a new GUI. It looks like this:

Those buttons are very simple as they just have a background colour and the jura font.
I actually quite like the style it’s like a modern flat look, which I think would make thrive look more modern (we had one guy complain that the old gui style looked outdated). And it will be easier than splitting out the images from the huge image to individual files (which seems to be needed as I didn’t get css spritesheet to work properly).

As the new GUI looks the same in chrome (and also in firefox if you slightly tweak local content loading settings):

It will be easier to edit it without even having Thrive installed.


I’ll still have a go at converting the existing GUI to HTML later today since with access to the original files it’s very easy for me to separate the imageset. How would I go about doing this? Specifically, the testing in Chrome and importing images parts.

The easiest approach depends on if you have ruby, git and svn installed. If you have you should be able to just checkout the fix_everything branch from github and run the setup with these options: ruby SetupThrive.rb --only-project which will then clone the assets and setup junctions on windows so that you should then be able to just open thrive/scripts/gui/thrive_gui.html in chrome. Then you can just edit that and the stylesheet in that folder. And place any images in the thrive/assets/textures/gui folder and reference them with relative path like the existing images in the thrive_style.css file.

edit: use the fix_everything branch for the latest changes.

I’ll see if I can either do that or find a simpler way to preview the HTML stuff. For the moment, I’ve exported the images individually. I’ve done it both with the original GUI and the flat GUI variation I posted in Slack a while back. Perhaps we can have an in-game setting to switch between them, as it would only involve changing the directory of the images used. I excluded certain items like bar fills which can be handled with block colours.

I opted not to go the full setup route as I felt that would take too long. Instead I’ve copied scripts and assets from the SVN.

The main menu wasn’t too difficult:

Adapting the combination relative and absolute positioning from CEGUI to CSS may prove to be a pain, but oh well.