Changing text colour in <<click>> macro text

Question

I'm using Sugarcube 2 and I'm trying to change the colour of one line of text with a <<click>> macro. At the moment, because the links are set to appear as white on a blue background in most places, the text that says "you're an investor rather than a builder" here, appears white, too.

But I want it to be grey. I tried to add a span class around it and change the font color that way, which I thought would be simple. But it doesn't seem to work. I'm not sure if the other css code is over-riding it somehow. (I've pasted all the css code below, too)

Like many who own land in the city, 
<<click "you're an investor rather than a builder.▼">><<toggleclass "#section1" "hidden">><</click>>

<div id="section1" class="hidden">If you were a builder, there would be a number of factors to take into account in deciding whether to build or not: development risks, construction costs, financing, planning, and taxes. But we're not going to go into those here.</div>\

body {
	background-color: white; 
  	color: #666666;
  	font-family: Times, Arial, Helvetica, sans-serif;
  	font-size: 125%;
  }

a {
  	color: white;
}

.hide {
	display: none;
}

a:link{ 
    color: #666666;
}

a:visited{ 
    color: #666666;
}

#ui-bar {
  display:none;
}

#story {
  margin-left: 3.5em;
}

.score-buttons button {
  color: white;
  width: 15em;
  font-size: 16px;
  background-color: #ff9a00;
  border: 2px solid #ff9a00;
}  

.fixed-buttons button {
	color: white;
	width: 80%;
    font-size: 24px;
}

.wrapper {
  text-align: center;
}

.wrapper2 {
  text-align: right;
}

 

Answer 1

I would use the following CSS to alter the fore-ground and back-ground colours of all standard SugarCube 2 (internal) links:

a.link-internal {
	color: white;
	background-color: blue;
}

... the a element related CSS in your examples is targeting ANY / ALL a elements in the generated documents, not just the elements generated for your links. Also as I understand it due to the way passage traversals are handled the :link and visited :pseudo class don't apply to a elements generated by <<link>> macros.

 

There are a number of ways you mark a specific link so that you could target it using CSS, the following example uses Custom Style Markup to add a CSS classed wrapper around the link you want to apply a special style to:

@@.special-link;<<click "you're an investor rather than a builder.▼">>\
	<<toggleclass "#section1" "hidden">>\
<</click>>@@

You could then use CSS like the following to target the above special-link class wrapped link:

.special-link a.link-internal {
	color: grey;
}

note: you can rename the special-link CSS class anything that makes sense in your story.

Comments

Thanks so much.

---

Also as I understand it due to the way passage traversals are handled the :link and :visited pseudo class don't apply to a elements generated by <<link>> macros.

That is correct.  As with most web applications, the end-user isn't traversing distinct web pages, so :link and :visited do not work.

That said, for those that really want similar functionality, SugarCube offers a solution in the Config.addVisitedLinkClass configuration property.  If enabled, it causes the .link-visited class to be added to passage links which go to previously visited passages.  For example:

/* Emulate the :visited pseudo-class on passage links. */
a[data-passage].link-visited {
	color: purple;
}

/* Emulate the :link pseudo-class on passage links. */
a[data-passage]:not(.link-visited) {
	color: green;
}