Changing CSS inside the passage

Authoring Twine
1

Twine 2.3.5 and Sugar Cube 2.30.0

Hi its me again…

I have realised this wont work because of these things “{” “.” or something, so I have been searching for other methods that refer to the stylesheet however they all don’t seem to work and I’m all out of a ideas.

<img id="car" src="Cars/r32colour.png"/>

<<button "push me">>
<<script>>
img.car {
  filter:hue-rotate(90deg);
}
<</script>>
<</button>>
1 Like
2

Hey pinkyo,

The <<script>> macro does not run CSS, it runs JavaScript. I don’t think there’s any macro in SugarCube to add CSS to the stylesheet, but there are two things you can do.

Create a New CSS Class and use <<addclass>>

You could add a new CSS class to your stylesheet like so:

img.clicked
{
    filter: hue-rotate(90deg);
}

Then use the <<addclass>> macro to like so:

<<button "push me">>
<<addclass "img#car" "clicked">>
<</button>>

This will add the “clicked” class to any img#car on the page, thus adding the filter defined above.

For more information, check out the <<addclass>> macro on the SugarCube manual: https://www.motoslave.net/sugarcube/2/docs/#macros-macro-addclass

Alternatively, use JQuery’s css method

There’s a library called jQuery included with Twine that lets you add css to something via Javascript. Your example would turn into this:

<<button "push me">>
<<script>>
    $("img#car").css("filter", "hue-rotate(90deg)");
<</script>>
<</button>>

If you wanted to add more than one property, you’d change it to:

$("img#car").css("filter", "hue-rotate(90deg)").css("background-color", "red");

etc.

The first way is probably simpler for you and easier to write. The second way would mean you don’t have to add new classes to your story stylesheet everytime you want to do something new.

1 Like
3

Hi, thanks for the reply however If I’m doing the first method right, it doesn’t work as it gives me the error "no elements matched the selector “img.car”.

Passage script:

<img id="img.car" src="Cars/r32colour.png"/>

<<button "push me">>
<<addclass "img.car" "clicked">>
<</button>>

Stylesheet:

img.clicked
{
    filter: hue-rotate(90deg);
}

Edit: The Javascript doesn’t give an error but doesn’t do anything also I’ve tried changing all image hues in the stylesheet and it changes it.

4

The id attribute of the image should be just “car” and the first part of addclass should be “img#car”, not “img.car”

1 Like
5

Thank you! that works, I just changed the name to try to get it to work.

For future reference though, do you know why this does nothing?

<<button "push me">>
<<script>>
    $("img.car").css("filter", "hue-rotate(90deg)");
<</script>>
<</button>>
6

Hey, I think it’s because I put the wrong selector there. “img.car” means “An image element with the class ‘car’.” Since car is your id, you use “img#car” which means “An image element with the id ‘car’.”

I misread your original post and thought you had “car” as the class on your image, not the id. I updated my original answer to use the # which means select by id.

You can find a full reference to the kind of selectors you can use in CSS or jQuery or the <<addclass>> macro here: https://www.w3schools.com/cssref/css_selectors.asp

1 Like
7

Ah yes, that’s partly my fault for putting .car in the original :sweat_smile: Thank you very much though! :smile:

1 Like