Hide textbox during tagged passage

Question

Heyo, i'm new on Twine development.

I start to create a visual novel with CSS language, for training.

I have a menu passage, next an introduction passage (With black background and white text, no textbox). And after the game start. But I can't get the textbox to hide only during the menu and introduction passages. Either the textbox is hidden or it is visible on all passages. I guess it's because of the #passage, so it's complicated.

You can test the game with this link if you don't understand, my english is a little bad.

My Stylesheet is based on the default model, i don't use another sheet.

Here's my code.

/* FONT */

@import url(https://fonts.googleapis.com/css?family=VT323);

/* STYLESHEET */

body {
	background-color: black;
}

body.menu .passage {
  	margin: 30% 0 0 0;
  	text-align: center;
  	font-size: 35px
}

body.cutscene .passage {
  text-align: center;
  font-size: 20px;
}

body.chapter1 {
  	background-image: url('image/background.png');
 	background-color: black;
    background-attachment: fixed;
    background-repeat: no-repeat;
	background-position: center;
    background-size: 90%;
}

/* PASSAGE */

#passages {
	width: 800px;
}

.passage {
	color: black;
	font: 16px/1.5 "VT323", serif;
	text-align: justify;
}

a.link-internal {
	color: #fb9551;
	font-weight: 300%;
}

a.link-internal:hover {
	color: white;
  	text-decoration: none;
}

/* LOADING */

#init-screen {
	top: 100px;
	left: 0px;
	background-color: black;
}

html[data-init="loading"] #init-loading {
	display: block;
	border: 10px solid transparent;
	border-radius: 50%;
	border-top-color: #fb9551;
	border-bottom-color: #fb9551;
	width: 50px;
	height: 50px;
	animation: init-loading-spin 2s linear infinite;
}

Maybe it's simple. I tried to add another tag like "body.chapter1 .text {}", but i doesn't work.

Thanks for the answer, i'm a real newbie.

 

 

Answer 1

But I can't get the textbox to hide only during the menu and introduction passages.

I took a look at your code and I don't see a textbox anywhere in it.

Just to be clear, a "textbox" is a box where a user can type text.  Normally this is done using the "<textarea>" HTML element.

I'm not clear what you're trying to hide/make visible here.  What is the name of the element you're trying to change here?

 

Comments

Sorry, I misspoke. Basically, I created a text box to contain the game dialogs, but I can't apply it to a particular tag. If I activate this text box, it is visible on all the passages.

Here's some screenshots.

Box activate in code

Box not activate

The problem is, i can't activate the box for one tag, it just doesn't work. I don't know how to do this.

 

---

You didn't include the CSS for how you wanted the text displayed in the chapter section, so you'll have to modify this:

body {
	background-color: black;
}

.passage {
	background-color: white;
	opacity: 0.5;
	border-radius: 15px;
	padding: 10px;
}

body.menu .passage {
  	margin: 30% 0 0 0;
  	text-align: center;
  	font-size: 35px;
	background-color: black;
	opacity: 1;
}

body.cutscene .passage {
	text-align: center;
	font-size: 20px;
	background-color: black;
	opacity: 1;
}

body.chapter1 {
	background-image: url('image/background.png');
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 90%;
}

That should get you close to what you want, you'll need to fix the position of the text window.

---

Awesome ! It works !

I just add margin:10% 10% 10% 10%; on the chapter css passage and it works perfectly.

I have not thought at all about reducing opacity to zero. It makes sense when you think about it.

Thank you so much!