I wrote my previous post a little quickly and made some errors. This time I'll give you a more in depth reply, with pictures.
For starters, when doing any CSS work in Monogatari, I highly recommend using the Inspector View in your browser. I'm using Firefox with Dark Mode settings, but this will also be possible in Chrome, or hopefully whatever you use.
I have a line in my script.js
"show character t happy at left2",
which makes my character show up here, like this.
I don't have any CSS Class in main.css yet, so she defaults to sitting in the center of the screen.
If we look at the Inspector View and find the image of the character, we'll see a bunch of CSS information.
Importantly, we'll see game-screen [data-sprite] and game-screen [data-character] which have the following by default:
game-screen [data-sprite] {
margin: 0 auto;
left: 0;
right: 0;
}
game-screen [data-character] {
bottom: 0;
position: absolute;
max-width: 100%;
max-height: 80vh;
}
This is the information we want to override.
margin:0 auto; will make it so that the margin (the space around the character) at the BOTTOM of the character is zero, but then all three other directions, left, right, top are set to "Auto" which in this case means "As much as possible". Additionally, left:0; and right:0; are there as well. If we want to make a CSS rule that changes the positioning of our character, we're going to have to override all three of these. This applies to all character sprites, as well as images.
Additionally, the max-height 80vh; will make it so that the tallest a character can be is 80% of the height of the screen. If you want your character to be any larger than that, we'll have to override that as well.
Suppose we want to make a character that is on the left, but not hugging the left wall. We can start, in the inspector view, by clicking "add new rule" which is a plus sign, usually in most browsers.
This will give us a rule like this:
The .animated class is applied to all characters if the user's Computer has "Prefers Reduced Motion" disabled. If they have it enabled, characters do not have the .animated class. So instead we're going to change that selector to
game-screen [data-sprite].left2 {
}
This will make a rule that applies to things inside of the game-screen element, which includes everything in our game, and also only applies to things that are query selected as [data-sprite] and with the css class .left2. All of this is important as sometimes if you just do .left2 some browsers will prioritize the specificity of game-screen [data-sprite] over things with the class .left2. It's best to be as specific as possible when making CSS to avoid headaches.
(I myself had issues when making these screenshots for you. You'll see .animated.left2 in my future screenshots but make sure when YOU do it, you do what I just wrote)
Next we'll add in rules for those things we need to override.
When you make a rule that overrides another rule, the rule that is overridden will be crossed out in the inspector view. In this case, the margin rule has been changed so that the BOTTOM is 0, the LEFT is 10% and the other two are set to Auto.
The result is that Tammy is on the left with a margin on the left that takes up 10% of the screen!
To finalize this, copy the rule you made and paste it into main.css somewhere. I usually put my new rules at the bottom but you can do it however you want.
Our final rule looks like this:
game-screen [data-sprite].left2 {
margin: 0 10% auto;
}
Copy paste it into main.css and then save, and reload your game to see it made permanent.
Now if we want Tammy here to get bigger, we can override the "max-height" that we mentioned earlier, either with a CSS class or for the entire game if you prefer. To do it for the class, just add it to the class rule like we just did. To do it for the entire game, create another game-screen [data-character] in your main.css and change it from 80vh to 100vh.
I hope that clears things up. CSS can be a little confusing, but if you use the inspector view you can watch things update in realtime and it's much easier.