Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

Customizing game with CSS

A topic by tempoimmaterial created Aug 27, 2018 Views: 543 Replies: 5
Viewing posts 1 to 3

Alright--old writer, semi-new coder here. I have a mostly completed game that I've been working on the past few weeks, and I'd love to learn how to take the html file and customize the look of it. 

When I open the html file, the code is huge! I don't even know how to start figuring out which classes to select to change the look. I'd love to be able to change the font, background color, buttons, etc. Thanks in advance for any tips. I'm happy to search Google, too, but I thought this would be a good place to get the conversation started for others, too, and maybe talk about future ways Texture Writer could offer this customization in the tool itself. 

(+2)

Hi,

You're right that there's a lot of stuff in the HTML file, we're keeping everything there so that the games are easier to distribute by sharing just one file. The easiest way to find what CSS rules to change is to use the browser's developer tools to inspect the page elements. Here are instructions for Chrome, but it's almost the same with other browsers too:

  • Open any Texture story in the browser. Right-click on any element you want to style, and choose "Inspect element" from the context menu. As an example, let's try to change the background color of a draggable verb button, so let's right click and inspect one of the verb buttons.
  • The developer console should appear with the HTML for the verb highlighted. (You might need to choose some of the parent elements instead to get the correct element, but here it should pick the right one automatically.) 
  • On the right side you see the CSS rules that apply to this element. You can ignore the element.style rule (which is the styles applied directly to this specific element) but the next rule is for .verb which is what we want: that's the most specific CSS rule that applies to this element (and all similar elements.)
  • To change the background color, we'd write a rule like .verb { background-color: #ffcccc; } and add that to the end of the CSS rules in the HTML file.  You can also change the rules in the inspector and see live how they would change the layout.

That's the basic gist of it! Hopefully that'll get you started. Let me know if you need any further help!

This is great! That's exactly the kind of advice I needed to get up and running. I'm sure more questions will follow throughout the week. 

(And yes, I love that it is all one file!)

How would I go about changing the style of different pages in the story? Would I need to make each page its own div?

In my story, I have framed the narrative as taking a quiz, and each question on the quiz denotes a new section. It would be really nice to format each of these sections individually, according to their moods. Some sections are multi-page; others are single-page.

There is no way to style individual pages with CSS, I'm afraid. The pages are indistinguishable in the HTML and they're generated programmatically so there's nowhere to add your own HTML elements.

That's a bummer. But definitely good to brainstorm for future features!