0 votes
asked by (570 points)

I am making a (as of now)text based dating sim/visual novel and I'm trying to make it so the game looks like it was made in the early 90s.

 

This is what the style normally looks like:

https://image.ibb.co/hGgV6J/Capture.jpg

 

where the choices are and the border starts I want to make a colored block as a underlay/border.

 

example:

https://image.ibb.co/mFgK0d/Capture2.png

 

Here's a copy of my stylesheet:

 

@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");

html {
    font-family: "Press Start 2P","Helvetica","Arial",sans-serif;
    font-size: 20px;
}
body {
    color: #f2f3f4;
}
.passage {
    border: 6px groove #97dbc2;
    border-radius: 25px;
    background: #000000;
    padding: 25px;
}
.link-internal {
    color: #ff81c0;
    transition: color .2s ease-in-out;
}
.link-internal:hover {
    color: #ff3639;
}
.passage img {
    max-width: 100%;
}

.hidden {
    display: none;
}

style="text-decoration: none; "

.link-internal {
    padding: 15px;
    margin: -15px;
}

#menu-core {
  display:none;
}

 

Also want the area to scroll to wordwrap

If you can help, I will highly appreciate it!

 

1 Answer

+2 votes
answered by (120k points)

I am going to assume the Passage content of your example looks something like the following:

End of Text.

[[Choice 1|Next]]
[[Choice 2|Next]]

.. if so then I suggest you wrap the choice links in a div element that has an ID, the following example uses Custom Style based markup to do that and assigns the resulting div an ID of choices.

End of Text.
@@#choices;
[[Choice 1|Next]]
[[Choice 2|Next]]
@@

You can then use CSS like the following within your Story Stylesheet area to style the new choices div element like so:

#choices {
	border: 4px solid red;
	padding: 1em;
	background-color: teal;
}

note: you may need to play around with the above values to get the exact look you want but they should act as a starting point.

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.
...