Using CSS buttons in Snowman, the first button link is always black with traditional link formatting.

0 votes
asked Dec 27, 2017 by cgos18 (120 points)

I am creating a click-through guide where each passage contains multiple CSS stylized button links to other passages. Each line in the code below is an individual button on the passage.

[[<p class="button">Primary</p>|Passage One]]
[[<p class="button">Secondary</p>|Passage Two]]
[[<p class="button">Alternative</p>|Passage Three]]
[[<p class="button">Other/p>|Passage Four]]

The Stylesheet is formatted like so to create blue buttons with a white hover effect:

body, tw-story
{
  font-family: 'Montserrat', sans-serif, Bold;
  font-size: 16;
  text-align: center;
  
}

tw-passage {
  text-align: center;
  
}

tw-link {
  color: #FFFFFF
}

.button {
    background-color: #4284f3;
    border: none;
    color: #FFFFFF;
    padding: 12px 24px;
    text-align: center;
    display: inline-block;
    font-size: 13px;
    border-radius: 8px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.3s;
}

.button:hover {
    background-color: #FFFFFF;
    color: #4284f3;
    border: 2px solid #4284f3;
}

a {
	border-bottom: 0;
}

I removed the "text-decoration: none;" line since I was told that does not work in Snowman, and replaced it with the "border-bottom: 0;" line - this removes the traditional formatting of the links (black text, yellow underlined hover) and replaces it with just the colors specified in the button and hover css.

However, it doesn't matter which passage or how I structure the buttons, the FIRST button only ALWAYS ends up with traditional link text format - black with yellow underlined on hover.

Image Link

Any ideas on how to fix just the first button from doing this? All other buttons work as intended.

2 Answers

0 votes
answered Dec 27, 2017 by greyelf (91,170 points)

NOTE: I will post a solution to your issue in another answer, please read at least the first part of this answer and do the action suggested.

You have found a bug in Snowman's Passage content parser, in relation to how it handles the wrapping of blocks of continuous content within a paragraph element. I strongly suggests you create a new issue on the Snowman project repository so its developer will know about this bug in the case that they don't read this particular question & answer.

Breakdown of Issue:

1. Automatic wrapping of blocks of continuous content within a paragraph element.

The following is a modified version of your example without your embedded paragraph elements and with two lines of text added at the start to demonstrate the automatic wrapping behaviour. 

Some text.

Some more text.
[[Primary|Passage One]]
[[Secondary|Passage Two]]
[[Alternative|Passage Three]]
[[Other|Passage Four]]

... and after Snowman's content parser (and the web-browser's render) is finished processing the Passage content it generates HTML elements like the following.

<div id="passage">
	<p>Some text.</p>
	<p>
		Some more text.
		<a href="javascript:void(0)" data-passage="Passage One">Primary</a>
		<a href="javascript:void(0)" data-passage="Passage Two">Secondary</a>
		<a href="javascript:void(0)" data-passage="Passage Three">Alternative</a>
		<a href="javascript:void(0)" data-passage="Passage Four">Other</a>
	</p>
</div>

You will note that the first line of text has been wrapped within a paragraph element, as has the second line of text and the four anchor elements (which represent the four markup based links). I believe it is this automatic behaviour that is causing your issue.

2. Things aren't always what they seem or what we expect. 

If we replace the above Passage content with your example (with the end paragraph tag of your forth link corrected) and excluding the two lines of text.

[[<p class="button">Primary</p>|Passage One]]
[[<p class="button">Secondary</p>|Passage Two]]
[[<p class="button">Alternative</p>|Passage Three]]
[[<p class="button">Other</p>|Passage Four]]

... with the above HTML as a guild and a little HTML knowledge we would (correctly) expect the Snowman content parser to generate HTML like the following.

<div id="passage">
	<p>
		<a href="javascript:void(0)" data-passage="Passage One">
			<p class="button">Primary</p>
		</a>
		<a href="javascript:void(0)" data-passage="Passage Two">
			<p class="button">Secondary</p>
		</a>
		<a href="javascript:void(0)" data-passage="Passage Three">
			<p class="button">Alternative</p>
		</a>
		<a href="javascript:void(0)" data-passage="Passage Four">
			<p class="button">Alternative</p>
		</a>
	</p>
</div>

...however, this is not the case. What actually gets produced is the following.

<div id="passage">
	<p>
		<a href="javascript:void(0)" data-passage="Passage One"></a>
	</p>
	<p class="button">
		<a href="javascript:void(0)" data-passage="Passage One">Primary</a>
	</p>
	<a href="javascript:void(0)" data-passage="Passage Two">
		<p class="button">Secondary</p>
	</a>
	<a href="javascript:void(0)" data-passage="Passage Three">
		<p class="button">Alternative</p>
	</a>
	<a href="javascript:void(0)" data-passage="Passage Four">
		<p class="button">Other</p>
	</a>
	<p></p>
</div>

As you can see the HTML representing link 2-4 is as we would (correctly) expect but the HTML representing link 1 (incorrectly) consists of two paragraph elements and two anchor elements, and it is this unexpected HTML structure that is causing your issue because your CSS is only styling one of the two anchor elements (incorrectly) representing link 1.

And changing the Passage content to use another block based element (like div) instead of the paragraph element strangely produces the same unexpected HTML structure.

[[<div class="button">Primary</div>|Passage One]]
[[<div class="button">Secondary</div>|Passage Two]]
[[<div class="button">Alternative</div>|Passage Three]]
[[<div class="button">Other</div>|Passage Four]]

... produces the following HTML.

<div id="passage">
	<p>
		<a href="javascript:void(0)" data-passage="Passage One"></a>
	</p>
	<div class="button">
		<a href="javascript:void(0)" data-passage="Passage One">Primary</a>
	</div>
	<a href="javascript:void(0)" data-passage="Passage Two">
		<div class="button">Secondary</div>
	</a>
	<a href="javascript:void(0)" data-passage="Passage Three">
		<div class="button">Alternative</div>
	</a>
	<a href="javascript:void(0)" data-passage="Passage Four">
		<div class="button">Other</div>
	</a>
	<p></p>
</div>

 

0 votes
answered Dec 27, 2017 by greyelf (91,170 points)

NOTE: Please read my other answer before this one, it includes an explanation of what is causing your issue as well as an suggested action you should perform.

1. Solving your question.

We have determined that your issue is caused by how Snowman handles the automatic wrapping of blocks of continuous content with a paragraph element, and the solution is as simple as replacing the block based paragraph elements you are using within your markup based links with an inline based element like span.

[[<span class="button">Primary</span>|Passage One]]
[[<span class="button">Secondary</span>|Passage Two]]
[[<span class="button">Alternative</span>|Passage Three]]
[[<span class="button">Other</span>|Passage Four]]

I cant explain why this works (although I have some suspicions but am being too lazy to look through Snowman's source code) but it does, and it produces HTML like the following.

<div id="passage">
	<p>
		<a href="javascript:void(0)" data-passage="Passage One">
			<span class="button">Primary</span>
		</a>
		<a href="javascript:void(0)" data-passage="Passage Two">
			<span class="button">Secondary</span>
		</a>
		<a href="javascript:void(0)" data-passage="Passage Three">
			<span class="button">Alternative</span>
		</a>
		<a href="javascript:void(0)" data-passage="Passage Four">
			<span class="button">Other</span>
		</a>
	</p>
</div>

... which is very similar to the HTML that we expected your original example to produce.

2. A couple of the issues with the CSS example you supplied.

a. Snowman doesn't have a tw-story element, a tw-passage element, or a tw-link element. These elements currently only exist in Harlowe, there for CSS rules targeting these elements have no effect in Snowman.

b. The Snowman equivalent of the tw-passage element is the div element with an ID of passage in my above HTML example. So the Snowman equivalent of your tw-passage CSS rule would be.

#passage {
	text-align: center;
}

 

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