Trouble applying CSS to button images that call a script

Authoring Twine
1

Twine Version: 2.3.14
Story Format: Sugarcube 2.34.1

I’m trying to apply css styling to the custom buttons I want to use for my project. When I try to use a class, it throws an error, which I think is because the script call is part of it. I’ve been able to get it to work by changing the default button css, for both active and hover states, but that has the side effect of changing the appearance of every button, such as those in the Saves dialog, which kind of messes it up. I need some way of applying customized css styling to my buttons AND maintain hover functionality, also using my custom buttons.

Initially, I was trying to do this with fully colored custom buttons that included text, but I couldn’t set the hover version to trigger on mouseover. I got around it by creating a new button set that was transparent except for the borders, which would change color from green to yellow on hover. That allowed me to recolor the text from the button macro to match the image. But I don’t consider this ideal.

ButtonsSample

From my Start passage:

> <<button [[SAVE|Start]]>>
>      <<script>>
>      UI.saves();
>      <</script>>
> <</button>>

From the stylesheet:

> button {
>   margin : 0;
>   padding-bottom: 10px;
>   border : 0;
>   height: 34px;
>   width: 154px;
>   color: limegreen;
>   font-size: 12pt;
>   font-family: "Calibri", sans-serif'
>   text-align: center;
>   background-color: transparent;
>   background-repeat: no-repeat;
>   background-image: url("images/DEF-T-lga.png");
> }
> button:hover {
>   margin : 0;
>   padding-bottom: 10px;
>   border : 0;
>   height: 34px;
>   width: 154px;
>   color: yellow;
>   font-size: 12pt;
>   font-family: "Calibri", sans-serif'
>   text-align: center;
>   background-color: transparent;
>   background-repeat: no-repeat;
>   background-image: url("images/DEF-T-lgh.png");

Now this does function, but because it alters the default button style, it messes up the buttons that aren’t using my customized set. This one opens the UI.saves dialog and stays on the same passage that it is being called from.

I’ve tried various configurations of div and span to try and get a custom class to apply without throwing an error, but nothing has worked.

2

Try wrapping it in a span with an ID selector:

<span id="mystyle">
<<button [[SAVE|Start]]>>
<<script>>
UI.saves();
<</script>>
<</button>>
</span>

then in the stylesheet

#mystyle > button { ... code ... }

and

#mystyle > button:hover { ... code ... }

3

That’s it! Thank you! And I can see my error now. I was defining the ID in css as just #mystyle, instead of #mystyle > button. I don’t think I’ve even seen an ID defined that way before using that operator. Must really show my inexperience.

Much appreciate the help.

4

Sure, check out this page on combinators for a more in-depth explanation.

5

FYI - Instead of doing that, you can simply do:

<<button [[SAVE|Start]]>>
	<<run UI.saves()>>
<</button>>

I’d only use the <<script>> macro in cases where you have chunks of JavaScript code that take up multiple lines. Otherwise, I’d just use the <<set>> and <<run>> macros for stuff like that.

Also, in addition to Parjeter’s link above, I’d check out the MDN CSS Selectors documentation. I have that link bookmarked, because I use it all the time when working with complex CSS references.

Enjoy! :slight_smile:

6

Thanks. I’ve been using that site for a while now (along with the MDN one below), but there’s a lot to take in. There’s obviously a lot I still haven’t read yet.

HiEv:
I’ll use that. Thank you. I’ve been vaccuuming up bits of code from wherever I can find it, not really understanding it and trying to suss out how it works through trial and error. That means I pick up bad coding habits along with the good. I’m always glad to have the bad ones corrected.

7

If the button’s function is only to open the Saves dialog, then you probably don’t need it to also navigate to the Start passage.

For example:

<<button "SAVE">>
	<<run UI.saves()>>
<</button>>