Speech box painted style conflict

Authoring Twine
1

Hi,
I’ve been experimenting with the appearance of my stories and macros but I just faced a problem.
I used this link to try some macros and styles and everything seems to be working on the website but when I download it and copy paste everything things doesn’t work.
Here’s the problem, I’m mixing painted style with speech box to have this kind of effect :

image
image742×224 26.1 KB

But the image doesn’t appear. I can make it appear by unlocking “frame-image” parameter :
image
But then the paint style is not applied.

How can I fix this ?

Here’s the twee file :
testmacro.twee (24,0 Ko)

I’m working on last sugarcube version.

2

If you can supply the whole CSS for your speech box, that would be very useful. At the moment all I can say from your screenshot is that --frame-image is being overridden by some other style, which is why it is crossed out.

3

Thanks, I’ve just edited the topic to add the twee file in it.

4

There appear to be a whole bunch of errors going on here:

assets.css is being loaded halfway down the stylesheet, but it contains @font-face declarations which have to come first.

assets.css has a selector :root, ::before, ::after which appears to be invalid, which means that the frame image and mask image never get loaded.

The rest of the CSS constantly refers to -mask-image (and other -mask) properties, but those aren’t valid, they shouldn’t have the - in front of them, so those rules are invalid. The same rules define -webkit-mask properties which will work in Chrome but not Firefox, which might be why you managed to test them earlier (if you switched browsers).

5

I’m sorry I have no clue what you’re saying :sweat_smile:

I put assets.css first as you said then figured that if i delete the :root, ::before, ::after, the image is well loaded but without the “paint” effect that you can see on the screen.

So I guess it’s the problem.

About browsers i’m on Opera and the thing work if i touch it on the link I provided but not when I download it and open the file it gives me (or import it on twine). (I forgot to mention I added the paper background and the notify macro if it matters :thinking:)

What should I do about the :root and the -mask things ? If the code is too fucked up or if it’s too complicated just tell me it’s fine, i’ll figure out later or give up, my life doesn’t depend on it :sweat_smile:

6

Take out the dash (-) before all the -mask properties. The - makes them invalid and thus ignored. They should be referred to exactly as they’re named in the CSS documentation.
:x:

    -mask-image: var(--frame-image);
    -mask-position: center;
    -mask-repeat: no-repeat;
    -mask-size: 100% 100%;

:white_check_mark:

    mask-image: var(--frame-image);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;

The ::before and ::after pseudo-elements here are meant to be attached to a certain element selector, so like a::before (which will render something before every <a> (hyperlink) element) or something. Currently they are just hanging out alone, before or after nothing. This means that this whole section below is invalid and thus ignored.
:x:

:root,
\::before,
\::after {
    --brush-image: url("assets/brush.png");
    --frame-image: url("assets/frame.png");
    --background-image: url("assets/background.jpg");
}

You don’t even need the ::before or ::after pseudo-elements at all, as all you’re doing in the section is setting CSS variables to be used elsewhere.
:white_check_mark:

:root {
    --brush-image: url("assets/brush.png");
    --frame-image: url("assets/frame.png");
    --background-image: url("assets/background.jpg");
}

Any CSS properties that start with -webkit work in Google Chrome and Chromium browsers (ie most browsers including Opera), but not Firefox. Because your -webkit attributes are written correctly, that means those styles work in the Chromium browsers. However, since Firefox is only using the -mask-image et al properties which are, as aforementioned, invalid and thus ignored, those styles don’t work in Firefox.

Honestly I’m not sure you even need to keep the -webkit-mask properties, since mask-image etc works the same way across all current browsers.

1 Like
7

Thanks ! Things seems to work a bit better but now the problem is it actually doesn’t work until I unclick then click again the frame parameter in dev-tool :face_with_spiral_eyes:
When I do that everything works perfectly… Dev doesn’t make sense :joy: (i know it does when correctly done)
Thanks for the explanation tho !