0 votes
asked by (180 points)

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.

 

 

1 Answer

0 votes
answered by (26.7k points)

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?

 

commented by (180 points)

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.

 

commented by (26.7k points)

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.

commented by (180 points)
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!
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...