0 votes
by (750 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:



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





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 {


Also want the area to scroll to wordwrap

If you can help, I will highly appreciate it!


1 Answer

+2 votes
by (159k 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.
[[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.