So I’m basically trying to make a speech system where, your response is the passage link, and I want the passage links to be different colors to kinda hint towards what they’re doing.
So in super simple terms.
I would make a passage link, say, green, instead of blue. Thanks!
You can define classes in the stylesheet:
.happy a {
color: lime;
}
.angry a {
color: red;
}
The a after every class is important not to forget.
Then, around any link you want the color applied to:
@@.happy;[[Happy answer]]@@
or (these both do the same thing)
<span class="happy">[[Happy answer]]</span>
Thanks so much!
For some reason, red works, but lime and green do not?
When I try these. The text stays blue.
<span class="positive">[[Yes sir, Hugo Wells, Pleased to make your acqaintance! And you are?|Carriage][$hugo.localtrustscore += 4]]</span>
\
@@.negative;[[Maybe I am, maybe I ain't. Who's askin'?|Carriage
][$hugo.localtrustscore -= 5]]@@
For some reason, the red always works. But I set positive to lime and green and it never changes the color.
A little of my code got cut off of the formatting in the copy/paste sorry.
No worries. I assume positive is green and negative red. Could you show what you put in the stylesheet?
.positive a {
color: Lime;
}
.negative a {
color: Crimson;
}
.neutral a {
color: white;
}
Weird, it should work. Do you have anything above .positive in the stylesheet?
Yep, Its just not liking green for some reason. Any shade of it.
If you switch the places of .positive and .negative does .positive still not work? My guess is there is something above .positive in the stylesheet that is messing with it.
I tried switching it to .pos and .good and it didnt make a difference.
Put this in the stylesheet.
.negative a {
color: Crimson;
}
.positive a {
color: Lime;
}
.neutral a {
color: white;
}
Is .positive still not working after that?
First, I’d note that you should be careful when using colors alone to indicate things, since some people are colorblind. Red-green colorblindness is quite common. It would be best to add a symbol or something for those who can’t see colors.
You might also want to take a look at my “Multicolor links” sample code to see another way you can create colored links, and how to set up their “hover” color. (Click “Jump to Start” to see other sample code there.)
Also, can you post an example of the code where the “positive” class isn’t working? I suspect that the problem isn’t in the CSS, it’s actually in how you’re setting the style. So I’d look there.
Hope that helps. 
I agree! I honestly didnt want any indication of what your responses were doing, but everyone play testing said they wish they knew.
How would I add symbols? That sounds super neat.
You can use a CSS selector than includes either a :before or :after pseudo-class to attached content like a Plus or Minus symbol to the start or end of each of your links.
The CSS Content article on the CSS-Tricks web-site explain the concept in greated detail.
So assuming your Passage content looks something like the following…
/* Using SugarCube Custom Styling markup... */
@@.positive;[[Yes sir, Hugo Wells, Pleased to make your acqaintance! And you are?|Carriage][$hugo.localtrustscore += 4]]@@
@@.negative;[[Maybe I am, maybe I ain't. Who's askin'?|Carriage][$hugo.localtrustscore -= 5]]@@
/* Using HTML elements... */
<span class="positive">[[Yes sir, Hugo Wells, Pleased to make your acqaintance! And you are?|Carriage][$hugo.localtrustscore += 4]]</span>
<span class="negative">[[Maybe I am, maybe I ain't. Who's askin'?|Carriage][$hugo.localtrustscore -= 5]]</span>
…then CSS like the following will append either a plus or minus symbol, between open and close parentheses, to the end of the link…
.positive a:after {
margin-left: 0.5em;
content: '(\2795)';
color: white;
}
.negative a:after {
margin-left: 0.5em;
content: '(\2796)';
color: white;
}
…and if you want those symbols to appear before the link instead of after then simply replace the :after pseudo-class in above CSS with the :before pseudo-class one and change the margin from margin-left to margin-right.
.positive a:before {
margin-right: 0.5em;
content: '(\2795)';
color: white;
}
.negative a:before {
margin-right: 0.5em;
content: '(\2796)';
color: white;
}
note: I have removed the earlier suggested link colour changing related CSS because, as explained by HiEv, it would make your story less Accessible to those with specific vision related issues.
This game has A LOT of custom art. Is there anyway I could add custom symbols?
Sure. For example, if you had this for your CSS:
.pos a {
position: relative;
padding-left: 15px;
background: no-repeat left url('data:image/svg+xml;utf8,<svg viewBox="0 0 1e3 1e3" xmlns="http://www.w3.org/2000/svg"><path d="m785 163h-76c-4 44-40 78-85 78h-207c-45 0-81-34-85-78h-76c-32 0-58 26-58 58v715c0 32 26 58 58 58h529c32 0 58-26 58-58v-715c-1e-29 -32-26-58-58-58zm-73 483h-382c-8 0-14-6-14-14s6-14 14-14h382c8 0 14 6 14 14s-6 14-14 14zm0-83h-382c-8 0-14-6-14-14s6-14 14-14h382c8 0 14 6 14 14s-6 14-14 14zm0-83h-382c-8 0-14-6-14-14s6-14 14-14h382c8 0 14 6 14 14s-6 14-14 14zm0-83h-382c-8 0-14-6-14-14s6-14 14-14h382c8 0 14 6 14 14s-6 14-14 14z" fill="rgb(102, 136, 221)"/><path d="m612 69c-6 0-11 1-16 2-2-40-35-71-75-71s-73 32-75 71c-5-1-11-2-16-2-41 0-75 34-75 75s34 75 75 75h182c41 0 75-34 75-75s-34-75-75-75zm-91 49c-24 0-43-19-43-43s19-43 43-43 43 19 43 43-19 43-43 43z" fill="rgb(102, 136, 221)"/></svg>');
background-size: 15px 15px;
background-position-y: -1px;
color: #68d;
}
.neg a {
position: relative;
padding-left: 15px;
background: no-repeat left url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gINCBMCngDqkgAABF1JREFUOMuFlFtsVFUUhr99zplz6ZyZztChLVCgTSPElJoW0aQBSVBAIyGi9sUXiEXB8AARo+iDEjFGHwRjfNA0BhIxRoxGfSCxpIEUCVabcgmoyK1CS1uY6XWu57p96CCiif7JylpZ2etfa+/1Z8N/YU/4r5S8hSnTsUfK8f9jsn4FPJe+O/me00BnthFApuMH5HiblCPMA5ALWpGbUn8dFQAD89cRV4tJTbiLKgdO/BR78lyiEK/qCGYlO4ibTSRcSJaoTI4yueIxUFtB3syxb+AzroztEZ87I7cJFYCGwcMUZGRzUVEP8nB/m+Y744FU9y7T+5reir8OQgcBLfY5IAoyAJm0ebHlBZabX8iXEfL7GULtZt1qaoa6mUZsmKsV77kqt5104gFT1RHun9NH/eRlsH3wBNJRQY6BbCw/qALtD6zkxpmVYmmmR17X0GqGugGoUyab4maOREUe7CwkpunPtXLLSaHqkqAQoX94GYQjQB6IQCgBFWoXd0HGFAv8mSsPzln3ran4CTQJWgCREIyQpYVLXLRW0FXdjpGH/EQdm4/ug/AEBEAYlM0w5GDbDgDlbOXGeQixWggJaghq2QvA9DHdIt8NrcTJKZAP2X9hB50/t0PpGHgF8DzwXHBFu7zSJrRQarORQp/Z9992r4RkqnRaj3/KqNUA0QIYEVAVth7ppCl/nuX3/QjqEsCCwGsW956Smh9q1UGoRGQoIFCQvsLYUIKvL63iVGwxTDnE3FEcx8bXTaSmIEON3b0ddKe2Q/I8aIshEJXyQM3bWsk3q7xQl4HUBJ5CadokrgfgKpy43kzMThNxHBwjhx/RCRUVIRRuTMVmRDcRgnENRC2oEVOTofKr4xuBF0Y0y1WwPCDusrXlMKlMhpNjzdQ3ZIilShw68ygXby1EotJYex4sIA34BZBZqA5Oa05gjJf8ilLJt+xokEV1BQiBO1bDE/PO8lRLLyRCplSDXNonfWEDuZJg17PfQBbwyyamQcqvtDXBu4M97s5Mzo3Ztj5FRdGDnIduBXx4+HEmA50JEdI/vBApTCyRpn3tcR5adBVuAS4zEhJONx6OAoKSa70yVUySd2P4TgSmDMhKti05ii9dRjJJaiNZ5lsjbF//Ja8+3QWjZX0XgbyAP2KHxEakkJ0gtsAPxo4jtfHhNTXRYWwji0gWYXYRavI4UXAqAqKpHKpd1uhtuAL5ewIxt1gvXitdEwDd2i6CUKlLmBOna2LDqVTFTSqMAiLhwKwSJEsQdyHmQYUPRgBKCL4KRQ10/3nxhveJfP/uXvToOxO2MX1qdnS0ocrKYOkFhO1CpQtxB6I+mAHoZcKSOkAkXC8+nvxF7jYQbzp3CI9FXmKVt5eDfKQ2x3s/SFiTmxLWuF2h5dEMF2GVpzMDsqFGOjenu7H3+FoQUnbMQuwfv/PB/hN90S3kgpioj19+xjZymy2t8KChlWxVCdJC93tCI3znt6rY6SVdffKftX8CBMXrIvMsmx4AAAAASUVORK5CYII=');
background-size: 15px 15px;
background-position-y: -1px;
color: #68d;
}
.pos a:hover, .pos a:focus, .neg a:hover, .neg a:focus {
filter: brightness(1.3);
}
and this in your passage:
TestX<span class="pos">[[Positive]]</span>XTest
TestX<span class="neg">[[Negative]]</span>XTest
then it would display something like this:
(Note: I just used two sample icons I had lying around for that example. The “TestX” stuff is only there to show that the link fits normally within text, even with the icon next to it.)
You can use the Base64 Encode/Decode site to encode your icons, like I did in the “neg” class. However, I’d strongly recommend only using base64 encoding for very small image files, such as icons, since they bloat up the HTML file.
Hope that helps!
Thank you guys so much!
You guys make making this game so much more fun and less frustrating haha not to mention how much I’m learning.
I cant seem to get it to work.
What is the:
('data:image/svg+xml;utf8,<svg viewBox="0 0 1e3 1e3" xmlns="http://www.w3.org/2000/svg"><path d="m785 163h-76c-4 44-40 78-85 78h-207c-45 0-81-34-85-78h-76c-32 0-58 26-58 58v715c0 32 26 58 58 58h529c32 0 58-26 58-58v-715c-1e-29 -32-26-58-58-58zm-73 483h-382c-8 0-14-6-14-14s6-14 14-14h382c8 0 14 6 14 14s-6 14-14 14zm0-83h-382c-8 0-14-6-14-14s6-14 14-14h382c8 0 14 6 14 14s-6 14-14 14zm0-83h-382c-8 0-14-6-14-14s6-14 14-14h382c8 0 14 6 14 14s-6 14-14 14zm0-83h-382c-8 0-14-6-14-14s6-14 14-14h382c8 0 14 6 14 14s-6 14-14 14z" fill="rgb(102, 136, 221)"/><path d="m612 69c-6 0-11 1-16 2-2-40-35-71-75-71s-73 32-75 71c-5-1-11-2-16-2-41 0-75 34-75 75s34 75 75 75h182c41 0 75-34 75-75s-34-75-75-75zm-91 49c-24 0-43-19-43-43s19-43 43-43 43 19 43 43-19 43-43 43z" fill="rgb(102, 136, 221)"/></svg>');
???