Sidebar Question - sugarcane

cryptides

Hiya,

I've been trying to move the sidebar and/or text box location so that the large image box doesn't cover the text, as it does currently. I need a large image box for the game, and I'd love any help on what part of the code I need to change or add to be able to change where the main text box is myself!

I've attached a pic of where I'm at right now, hopefully that helps, and here's what I'm working with:

/* Reposition Side-bar across top of page. */
body {
margin: 10em 0 10em 0;
height: 100%;
font-family: Geneva, "Helvetica Neue", Helvetica, sans-serif;
/*
color: black;
background-color: white;
*/
text-align: left;

}
#sidebar {
position: absolute;
top: 0px;
left: 0px;
width: 98.2%;
overflow-x: hidden;
/* border-bottom: solid black 1px; */
border-bottom: solid white 1px;
}
#sidebar * {
/* color: black !important; */
background-color: clear !important;
display: inline !important;
width: 30%;
font-size: 1.5rem;
position: right;
}
#sidebar a:hover, #sidebar #snapback:hover, #sidebar #restart:hover {
text-decoration: underline !important;
}
#sidebar a:active, #sidebar #snapback:active, #sidebar #restart:active {
/*
color: white !important;
background-color: black !important;
*/
font-size: 1.5rem;
display: inline !important;
}
#sidebar li, #sidebar li > span {
margin-left: 1rem;
margin-right: 1rem;
}
#sidebar a, #sidebar a:hover {
border: 0 !important;
box-shadow: none;
}
.menu {
/*
color: black;
background-color: white;
*/
opacity: 1;
font-size: 1.5rem;
/* border: solid black 1px;
box-shadow: black 0.1em 0.1em 0; */
border: solid white 1px;
box-shadow: white 0.1em 0.1em 0;
}
.menu div:hover {
/*
background-color: black;
color: white;
*/
}
#credits, #share, #titleSeparator, #sidebar li br {
display: none !important;
}



/* Reposition Passage Header to left side of page. */
.passage .header {
position: absolute;
top: 0;
left: -14em;
width: 38em;
height: 34em;
overflow-x: hidden;
border: solid white 1px;
border-radius: 1em;
background: centre;
}

Thank you so much for any help! I'm new to twine and trying to learn more!!
(I'm using Twine 1.4.2 with sugarcane)

greyelf

The #passages div element's margin-left property creates the blank area on the left side where the #sidebar used to be, you need to increase the default value of that margin-left property so that the blank area is large enough to contain the contents of the .passage .header class's div element.

The following CSS selector is the one you need to use, obviously you will need to determine the correct value for the margin-left property.

#passages {
	margin-left: 18.2em;
}

cryptides

Thank you, this worked great!! and thanks for explaining it as well!