Changing CSS text selection colour (with classes)

Authoring Twine
1

Hello!

I have a little system in my game where a user can choose the colour palette using a menu. I would like to make it so that the blue-by-default text selection colour would change, to better fit the palettes. Is there a way to make it customizable, perhaps within the current class-based system?

My current HTML:

(link-repeat: "make background Red, make text selection color blue")[{<script>$('html').removeClass("redBG YellowBG").addClass("redBG");</script>}]
(link-repeat: "make background yellow, make text selection color green")[{<script>$('html').removeClass("redBG YellowBG").addClass("yellowBG");</script>}]

My current CSS:

html.redBG tw-story { background-color: #red; }
html.yellowBG tw-story { background-color: #yellow; }

Any help would be greatly appreciated! :slight_smile:

2

This is more of a web development issue than a story issue but I think I can help.

  1. Do you have jQuery loaded on the page? If not, you can’t use the $ in $('html') and the helpers it comes with, but you could do document.body.classlist.remove('redBG', 'yellowBG') in a similar way https://devdocs.io/dom/element/classlist. You’d also need to change html to body in your css.
  2. Classes are case-sensitive in some cases, so fix the YellowBG vs yellowBG issue
  3. #red and #yellow are not valid css colors, use hex colors like #ff0000 or just red and yellow (without the # mark).
3

Hi Andy,

  1. I am not sure as I have no experience with jQuery. I am using ‘‘script’’ tags, which, after googling, seems to be how jQuery is loaded, but apart from that I don’t know.
  2. I didn’t notice this when I double-checked the post. In HTML, everything is written in the same way.
  3. I wrote the colors as names to make it more easy to read as the pure red and pure yellow RGB values look similar. In the project, they are written as Hex values.
4

Okay, sounds like you do not have jQuery on your webpage so let’s do this the non-jQuery way. Try this:

(link-repeat: "make background Red, make text selection color blue")[{<script>document.body.classList.remove("redBG", "yellowBG");  document.body.classList.add("redBG");</script>}]
(link-repeat: "make background yellow, make text selection color green")[{<script>document.body.classList.remove("redBG", "yellowBG");  document.body.classList.add("yellowBG");</script>}]

and CSS

body.redBG tw-story { background-color: #ff0000; }
body.yellowBG tw-story { background-color: #ffff00; }

Or use whatever colors you like.

Obviously this is a little verbose, but should work in a pinch. Let me know if that works for you.

5

Perhaps I forgot to mention in more detail, that the background changing mechanic, as written in the post, works properly, no issues with that. The next step, addition of highlight color, I am trying to figure out. Sorry if there was any confusion with this!

Either way, your non-jQuery version works great and behaves exactly the same way.

6

Oops, I missed the point of your original post; my bad for trying to multitask.
It looks like you are using Harlowe, and the links in Harlowe use either the element tw-link or the class .enchantment-link.

Your css might look like this then:

.redBG tw-link, .redBG .enchantment-link {  color: blue; }
.yellowBG tw-link, .yellowBG .enchantment-link {  color: green; }

That should change the color of links in your story. It does not, however, affect the hover color. You’ll need to add some similar css with the :hover modifier for that.

.redBG tw-link:hover, .redBG .enchantment-link:hover {  color: lightblue; }
.yellowBG tw-link:hover, .yellowBG .enchantment-link:hover {  color: lightgreen; }

Of course you can change the colors to whatever you like instead of these.

7

The code works, however, by ‘‘selection color’’ I meant the blue boxes behind letters when one would select text in, for example, in Wikipedia. In this site, it is set to green. In CSS it is, appearantly, usually modifed like this:

::selection {
  color: red;
}

If I would want to change this parameter just like the background colors, would I need to approach it the same way?

8

Ah, got it. I’ve never used ::selection before but it looks like you should write something like this

.redBG ::selection {  background-color: blue; }
.yellowBG ::selection {  background-color: green; }

If you also wanted to change the text color when selecting something, that’s easy to add too

.redBG ::selection {  background-color: blue; color: white; }
.yellowBG ::selection {  background-color: green; color: white; }

Try to avoid any horrific color clashes though :wink:

10

Works perfectly! This was much easier to do than expected.
Thank you very much :slight_smile: