[Twine2/Sugarcube2.1] Help with custom stylesheet idea.

Question

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!

 

Answer 1

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.