HTML [Twine/CSS] Customization issues

Souvenirs

Newbie
Game Developer
May 23, 2023
19
83
Hey,

I'm writing a small game on twine chapbook and I want to do a few things but I don't have much knowledge in coding...

Here's my issues :
Chapbook by default have padding in the whole page but I want a header with an image that fills all the header (so without padding). I managed to delete padding but then the text needs padding. Is there a way to either delete padding only for header or add padding for text in main page only ?

Last one I can think of is text alignment. I need at some point to simulate a phone conversation, I can align text to the right but it's not like I want. I want the text to be left aligned but shifted to the middle of the page. I could do lot of tabs but is there a way to make it easier than spamming tab lot of times everytime ?
 

osanaiko

Engaged Member
Modder
Jul 4, 2017
2,092
3,337
It's all CSS design that you are talking about.

Anything that is out there for learning materials about CSS for webpages applies to Twine games.

I don't know anything about chapbook specifically. But if you can post some minimal file examples (not your whole game, just the minimum code to reproduce your problem) maybe some people can help in this forum. Perhaps start a new project and reproduce your problem, then provide

1. screenshot of your banner and text alignment problem in the browser
2. html file
3. css file

EDIT:
Okay I can't leave these things alone, so I read the doco for chapbook.
Looks like they have a couple of different systems:
1. you can mess with their "config" settings for styling some aspects.
2. you can inject specific inline CSS into passages
3. you can edit the global twine CSS stylesheet

EDIT 2:
I see in another thread that Alcahest suggests you switch to Sugarcube instead. Listen to him, he is wise and has made two very good HTML games. You will still need to learn how to do the custom styling that you want, but at least there are more devs who can help you.
 
Last edited:
  • Like
Reactions: Alcahest