Glowing links in Sugarcube 2?

Hi! I’m currently learning CSS and doing all kinds of neat things with Twine with Sugarcube, like adding music and videos to my game - all sorts of custom features. For the most part, I feel very comfortable with this story format.

Now, I would love for my fantasy game to have glowing links.

I’ve been tinkering with these bits from W3Schools:

I can’t seem to figure out how to get an effect like this to apply only to links effectively. Then again, it’s two in the morning on my end, and maybe I’m having no luck because I need sleep.

Maybe there’s a much simpler way to approach this than I’ve been trying it?

I’d appreciate any tips. I really hope to get good at using CCS someday!

1 Like

To make that work, the easiest thing to do is to inspect a link in your game to see how the element is set up. Just play your game, then right-click on a link in the game, and choose something like “inspect element”.

Doing that should open the inspection window, where you can see the HTML elements on the left, the CSS styles on the right, and the console window below them. The HTML for the link will probably look something like this:

<a data-passage="test" class="link-internal" tabindex="0">test</a>

The class for SugarCube links is “link-internal”.

NOTE: In CSS you represent a class’s name by starting it with a “.” and for a specific element’s ID you’d start it’s name with a “#”.

Since we’re working with a class in this case, the CSS in your Stylesheet section should be in this format:

.link-internal {
}

If we paste in the “.glow” class from your link above into that class’s CSS, along with the keyframes information, then it would become this:

.link-internal {
	font-size: 80px;
	color: #fff;
	text-align: center;
	-webkit-animation: glow 1s ease-in-out infinite alternate;
	-moz-animation: glow 1s ease-in-out infinite alternate;
	animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
	}
	to {
		text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
	}
}

Put that in your Stylesheet section, and now you should have links that glow and pulse in your Twine game.

You can use the inspector to tweak your CSS as well, like reducing the font size, and you’ll see what your changes would look like immediately. If you right-click on the line of HTML on the left, you can also force the state to, for example, :hover, which will let you see the CSS settings for that state on the right. Just keep tweaking the CSS there until it all looks good.

Once you have everything looking the way you want, just copy any CSS changes you made from the inspector to your Stylesheet section, do a test run make sure you didn’t forget to copy anything, and then if everything still looks right, you should be good.

I learned a lot of my CSS skills by playing around in the inspector and reading through places like the W3School’s “CSS Tutorial” and the MDN’s “CSS References” sections.

Hope that helps! :slight_smile:

3 Likes

Dude this is awesome! It worked perfectly. Thank you sooooo much.

The coolest thing is that you can add this classes on the fly and use it for countless neat tricks) Like revealing links when your light source is on or making that sword which glows only if some greenskins are nearby. Magic!

1 Like

I’ll experiment with it!