CSS Help Needed

nate

Using CSS I can't work out how to -
* Increase the size of the story passage (tw-passage) - to be closer to the top / bottom / sides
* Put a custom column to the right of the story passage (or even in the sidebar).

Nothing I try seems to work. However, I can change the colors & font's of the page, sidebar, and passages & of headers, footers, and some internal divs.



Story Stylesheet -

body { background-color: red; width: 100%; }
tw-story { background-color: yellow; }
tw-sidebar { background-color: green; }
tw-passage { background-color: grey; }
#stats { background-color: orange; float: right; }
#header { background-color: white; }
#footer { background-color: black; color: white; }

I've tried changing width and margins. I'd prefer a fluid layout, but will settle for a fixed one if I have to. Any help would be appreciated.

nate

Playing around a little helped to figure out an (imperfect) way to get a right hand column that can hold statistics:

#stats { right: 1em; width: 8em; position: fixed; }

This still isn't dynamically relative to the main passage though.

I can force the width of the main passage using

width: 75% !important;

which is a sort of improvement.

However, I'm wondering if it's just easier to get rid of the original CSS and start over:

tw-story { display: initial !important; }
tw-passage { display: initial !important; width:65%;float:right;position:relative; }
tw-sidebar { display: initial !important; width:15%;float:left;position:relative; }
#stats { width:20%;float:right;position:relative; }

greyelf

Oh what fun we are going to have Alice as we go down the rabbit hole!

notes:
i. A more experienced CSS coder may spot mistakes in my examples, if so please fix them!

ii. Harlowe's generated HTML content is not contained within the body element like a standard HTML document's is, it inserts a tw-story element into the html element instead. This is why your width: 100% on body was not working, you need to place that (and any other attributes like over-all margins) on the tw-story element instead.

iii. The following assumes your story contains at least the following four passages (Start, Header, Footer, and Stats)
1. Start: set as your story's start point.
Note that the displaying of the Stats is the first thing that is done, that the whole contents of the passage are within a div element, and that there is no line-break between the Stats and the div. These are all important and required for the later CSS to work corrrectly.

(display: "Stats")<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

2. Header: a passages tagged as header

This is the Header.

3. Footer: a passages tagged as footer

This is the Footer.

4. Stats:
Note that the id of the div element is not needed for the CSS to work, it is there so you can reference it is you need to.

<div id="stats">These are the stats</div>

Ok, now for the the fun part. The following CSS should format the page as you have asked, I will break it down later on:

body {
	background-color: red;
}
tw-story {
	background-color: yellow;
	width: 100%;
	margin-top: auto;
	margin-left: 3em;
}
tw-passage {
	background-color: grey;
}
tw-passage tw-sidebar {
	left: -3em;
	background-color: green;
}
tw-passage tw-include {
	display: block;
}
tw-passage tw-include[type="header"] {
	background-color: white;
}
tw-passage tw-include[type="footer"] {
	background-color: black;
	color: white;
}
tw-passage tw-include[type="header"] + tw-expression[type="macro"] {
	display: block;
	float: right;
	background-color: orange;
	width: 20%;
}
tw-passage > div {
	clear: left;
	width: 80%;
}

a. tw-story {}
Note I moved the width: 100% here, the margin-top removes the gap at the top and the margin-left creates a space for the side-bar to appear in.

b. tw-passage tw-sidebar {}
This moves the side-bar, which is actually part of the generated tw-passage, over so it appears in the space created for it by point a.

c. tw-passage tw-include {}
Make the header and footer appear as a block the covers the width of the passage + stats.

d. tw-passage tw-include[type="header"] {} and tw-passage tw-include[type="footer"] {}
The way to reference the header and footer without the need to assign both of them their on id attributes.

e. tw-passage tw-include[type="header"] + tw-expression[type="macro"] {}
When you display one passage within another (like Stats is) the contents of the inner passage is wrapped by a tw-expression element, and this can effect any CSS you assign to that inner passage.
This is what was interfering with your #stats based CSS like the float, to fix this you need to assign that CSS to the tw-expression element instead but the problem is how to reference that particular tw-expression element from all the other possible tw-expression elements that are likely to appear within your story.
The above CSS selector relies on the fact that the first thing to appear after the header section is going to be the HTML generated by the (display: "Stats").

f. tw-passage > div {}
This selector is used to apply CSS on the whole contents of your passage (besides the Stats area), it effects any div element that is a direct child of the tw-passage element which means it will not effect the div element within the Stats passage.
Because Harlowe does not supply a way to reference the contents of a passage separately from the side-bar I had to wrap that contents in a HTML element so I could use a clear and a width to position your Stats cleanly to the right.

nate

GreyElf,

Your CSS is much better than my attempts, and your explanations helped me to understand better how Twine formats it's contents.

However, I'm still a little unclear on implementing the "stats" sidebar. It doesn't seem to show up if I set it in (eg. <div id="stats">) or as the contents of a "stats" passage which I display (eg. display: "Stats").

Thanks.

greyelf

In my example you need to add (display: "Stats") to the start of any/all passages you want the contents of the "Stats" passage to appear in.

I have attached an Archive of a story containing the four passages. Use Twine 2's Import from File option to import the example and have a look at it, both the code and output using Debug/Play

nate

Thanks so much! It all makes sense now.