CSS Help Needed: Scrippets & Squarespace

I am beginning work on a website for some of my shorter work, and am in need of some very specific help from someone more code-savvy than I.

My blog is through a company called Squarespace (so far, I like). They’re one of those all-in-one hosting, posting and design companies, and they allow fully custom CSS… as long as you know how to code. No support for that kind of thing.

Which brings me to Scrippets, a nice little chunk of code that lets screenwriters post clips of scripts in the proper format. Scrippets provides instructions on how to add their code to your own site. Thing is, despite their very specific instructions, I can’t seem to figure out where to put the code.

I’ve tried both Squarespace and Scrippets support, but they’re not in that business, so I thought I’d turn to some of the more code-friendly folks here.

I know this is kind of a big/obscure/annoying request, so many thanks in advance to anyone who even reads this post. Anyway, if you have some familiarity with Squarespace, or an idea of any kind, please let me know.

Best.

S

I’m not familiar with this blogging service, but this is from their documentation:

Perhaps if you poke around in the advanced style settings you’ll find a place to insert custom CSS?

Edit: Okay, the fact that I can’t even post images properly suggests that I probably shouldn’t be messing with this.

I have attached two snapshots of the Advanced button and the list to which it leads. Question: Can I just add the new code to the bottom?

Or am I just kidding myself?

Stage 1.jpg

Stage 2.jpg

That’s what it looks like to me. The left box would be a common-language reference to what the selector does, and then the right box is the selector itself. Note that the selection is only the stuff in front of the curly-brackets, in CSS. It will look something like div#scrippets p. Presumably, after you add a custom selector like this, you can click on the “edit” button beside it and then add all of the contents inside of the brackets.

You’ll have to do this for each CSS directive, which is a pairing of selector {style stuff}. So if the Scrippets supplied stuff looks like:

div#scrippets p { padding-left: 2em; line-height: 1.2em; }
div#scrippets p.dialogue { width: 15em; padding-left: 5em}

Then you would need to add a custom named selector for each line.

Thank you!

And: Wow! That’s incredibly tedious! :smiley:

This might point to a less tedious way:

The Squarespace site directs you that way for building some javascript into your site, so it stands to reason that the facility you will find there will let you paste a whole chunk of stuff at a time, instead of by the onesey. Just make sure thes CSS stuff you inject into the header is enclosed in tags.

–Greg

P.S. In fact, it looks to me in-principle possible to in this way use the javascript + css solution (Cf their Blogger javascript solution) to get scrippet working on your site–and in that way you would not need the rely on the Scrippet-Maker to mark up your script snippets. [scrippet] You would just need to put your script bits inside the scrippet brackets.[/scrippet] Clearly, you can put the requisite javascript and css into the header in the above way, and then it is only a matter of figuring out how to invoke the convert() function. If you can get an onload into the body tag, you are golden, but it was unclear to me you could mod the body tag on Squarespace. I would definitely start by getting the CSS-only strategy that you are pursuing working, but this javascript approach might be something to explore at some point.