CoraBlue's Window Box Macro

CoraBlue

There was some mild interest in my script to generate CSS boxes around text with Twine. So I'll add it so everyone can enjoy. It allows you to do things like this:



I'm uploading a basic toolkit with all the necessary code to get started, which when run looks like this.



This code is for anyone to use. I would welcome improvements as I do not claim to be any good at all with javascript or CSS.

mostly useless

Oh, awesome! I will definitely take a look at this, which means you can expect a bunch of annoying questions from me. Thanks for sharing.

EDIT - The story file won't run, it says it's missing a custom Sugarcane template?

CoraBlue

Ah. I was just adding Firefox support for the color gradients (it only works on Chrome and looks terrible on IE right now) so I'll fix that. Its just I forgot to take off my custom header.

In the mean time just go to Story > Story Format and change it back to normal Sugarcane.

EDIT: Okay. Firefox gradient support added and the default Sugarcane header is applied. Should run from a vanilla install now.

Sharpe

Doesn't it suck how every browser uses different gradient code? ;D

Thanks for the upload. I'll have to check it out. It looks really cool and I'm sure I'll learn a thing or two or ten.

I'm sure your code is going to be much more legible than mine, too. My code looks like a dog took a crap on a rat's next. ;D

My code is so ugly that it turned Medusa to stone!

My code is so ugly that when I entered it in an ugly code contest, they said, "Sorry, no professionals."

L

Sharpe wrote:

Doesn't it suck how every browser uses different gradient code? ;D

This is no longer true. (Except for IE 8, but w/e)

To the original poster: I notice you never actually use the unprefixed linear-gradient() function, which is not too good for forwards-compatibility.

Some other comments:
* Don't put the HTML <style> tag in a stylesheet passage. It's CSS only in there!
* Please use one border-radius property instead of... eight.

CoraBlue

Thanks L, I appreciate the help. CSS is a lot cleaner now, and probably a lot more compatible. I might add some functionality if I release another version.

Bluntie

Good gravy, that is sexy. Reverse-engineering it is a bit out of my reach yet, but this is definitely something I'll toy with down the line. Thank you for sharing.