How To Make A Margin

Deadshot

I am making a game with a background image. However, the image is to the left and sometimes the text goes over the image, making it look hard to read. Can I push the text to the right? I am using Harlowe. Here is a picture. You can see how it is hard to read.

https://twinery.org/forum/uploads/Uploader/7d/81fdc1ceb1e875c7d4ea11ff4cf592.png

greyelf

By default the CSS of the tw-story element of a Harlowe based story is setup to use 60% of the width of the web-browser's view-port, it also has automatically calculated left and right margins which results in its contents being centred horizontally within the view-port.

If you want to have a fixed width left margin so that your background image always appears in a blank area on the left side of the view-port then you are going to have to changed the tw-story element's default CSS values for the width property, the margin-left property, and the margin-right property.

Because I don't know the dimensions of your skull background image nor the distance from the left edge of the view-port to the right edge of the skull I will no be able to give you exact values in my example, this means that you will need to adjust (at least) the margin-left value yourself. Place the following CSS within your story's Story Stylesheet area:

tw-story {
	width: initial;
	margin-left: 10em;
	margin-right: 5em;
}

note: I did not test the above code.

Deadshot

This works just as I wanted. Thanks!

Deadshot

greyelf wrote: »

By default the CSS of the tw-story element of a Harlowe based story is setup to use 60% of the width of the web-browser's view-port, it also has automatically calculated left and right margins which results in its contents being centred horizontally within the view-port.

If you want to have a fixed width left margin so that your background image always appears in a blank area on the left side of the view-port then you are going to have to changed the tw-story element's default CSS values for the width property, the margin-left property, and the margin-right property.

Because I don't know the dimensions of your skull background image nor the distance from the left edge of the view-port to the right edge of the skull I will no be able to give you exact values in my example, this means that you will need to adjust (at least) the margin-left value yourself. Place the following CSS within your story's Story Stylesheet area:

tw-story {
	width: initial;
	margin-left: 10em;
	margin-right: 5em;
}

note: I did not test the above code.

Thank you. This works perfectly and I have finished and uploaded the game I was working on. But I am making a new one where for the title screen I need to alter the margin, but I don't want that the same for all the other passages - only the ones tagged title. I've tried this:

html.title {
width: initial;
margin-left: 13.5em;
margin-right: 5em;
}

But that REALLY don't work. Is there another way?

greyelf

Deadshot wrote: »

... the title screen I need to alter the margin, but I don't want that the same for all the other passages - only the ones tagged title. I've tried this:

html.title {
	width: initial;
	margin-left: 13.5em;
	margin-right: 5em;
}

But that REALLY don't work. Is there another way?

Please use the C button in the comment field's toolbar to mark your examples as code, it make them easier to find and read.

Your example is applying the CSS to the html element and it needs to be applied to the tw-story element, the html.title part goes before the tw-story part of the CSS selector. (read the element element rule)

Try the following:

html.title tw-story {
	width: initial;
	margin-left: 13.5em;
	margin-right: 5em;
}

Deadshot

But that REALLY don't work. Is there another way?
Please use the C button in the comment field's toolbar to mark your examples as code, it make them easier to find and read.

Soz, I thought I did.

Try the following:

html.title tw-story {
	width: initial;
	margin-left: 13.5em;
	margin-right: 5em;
}

Thank you! This works perfectly!