Embedding html wrecks my site. Help!

Using Ghost
1

I’m trying to include some parts of a screenplay in a post, and it’s important that they appear in the standard screenplay format. I figure the only way to do this (that I can work out, anyway) is to convert from the fountain format (a universal screenwriting format) to html and embed the html. Unfortunately the html i’m then embedding completely ruins the formatting of the rest of my site, so i’m imagining i’m doing something wrong here.

Here’s an example of what i’m trying to embed. I’ve got a feeling it’s too much like a full website, as opposed to a chunk of code that I can embed, but I don’t have the knowledge to be able to figure out which parts to use.

Alternatively, if there’s a way to embed parts of a screenplay in Ghost that doesn’t use HTML i’d love to know that too. I couldn’t find anything on this forum that would help unfortunately.

2

Adding HTML to content with tags will break your website.

You can embed this type of code via iframe. Save this HTML inside HTML file and then load it with an iframe. Or you can add this code without tags.

I hope that this helps.

3

Thank you - can I just ask what you mean by ‘without tags’? Does that mean remove all of the things at the top and bottom? Just not sure what to leave in.

4

The difficulty with this code is that it has a bunch of very general css selectors. Those are interacting with the rest of the elements on the page in ways that mess up those other elements. For example, you are changing margins on all the h1-h6 elements, the .footer element, etc. And that reset code at the top is going to actually fire AFTER a bunch of Ghost styles, and wipe them out.

Embedding in an iframe is a good idea, if you don’t want to adjust the styles.

Alternately, you just need to update these selectors to be MORE SPECIFIC to hit only this part. Your example already has all the play text in a #wrapper element, so use that! Then fix the styles to ONLY hit the contents of .#wrapper. Adjust your CSS to change #wrapper h2, not h2. Move all styling being applied to the body to be applied to the wrapper instead.

It’ll probably take you an hour, but when you’re done, you’ll be good for every play you want to post, and all you’ll need to do is grab the contents of the #wrapper element in your html export.

5

I agree with Cathy.

Here is the HTML that you can add as an HTML block.

<div id="custom-wrapper" class="custom-screenplay">
<h6>EXT. RESTAURANT. DAY</h6>
<div class="dialog"><p class="character">BOBBY</p><p>Hi Darla.</p></div>
<div class="dialog"><p class="character">DARLA</p><p>Hi Bobby!</p></div>
<div class="action"><p>And then other things happen, too...</p></div>
</div>

And CSS that you can add to the Code injection inside settings so you can have it on every other page:

<style>

#custom-wrapper {
    font-family: 'Courier Final Draft','Courier Screenplay',Courier;
    font-size: 12pt;
    text-align: left;
    width: 480pt;
    padding-left: 90pt;
    padding-top: 24pt;
    position: relative;
    margin: 0 auto;
    }
    header {
    margin-bottom: 1em;
    border-bottom: 1px solid black;
    }
    footer {
    margin-top: 1em;
    }
    em {
    font-style: italic;
    }
    strong {
    font-weight: bold;
    }
    br {
    clear: both;
    }
    
    /* Slug */
    
    div {
    width: 460pt;
    }
    #custom-wrapper  h1:before,#custom-wrapper h2:before,#custom-wrapper h3:before,#custom-wrapper h4:before,#custom-wrapper h5:before {
    content: "\25e6\00a0";
    margin-left:-9pt;
    }
    #custom-wrapper h1,#custom-wrapper h2,#custom-wrapper h3,#custom-wrapper h4,#custom-wrapper h5{
    font-family:'Gill Sans','Helvetiva Neue',Helvetica,sans-serif;
    margin-top:24pt;
    font-weight:400;
    color: rgb(110, 110, 110);
    border-top:dotted 1px rgb(199, 199, 199);
    background-image: -webkit-linear-gradient(top, rgb(255, 255, 245), rgb(255, 255, 255));
    font-size: 11pt;
    }
    #custom-wrapper h1,#custom-wrapper .h1-synopsis {
    margin-left:-71pt;
    }
    #custom-wrapper h2,#custom-wrapper .h2-synopsis {
    margin-left:-61pt;
    }
    #custom-wrapper h3,#custom-wrapper .h3-synopsis {
    margin-left:-41pt;
    }
    #custom-wrapper h4,#custom-wrapper .h4-synopsis {
    margin-left:-21pt;
    }
    #custom-wrapper h5,#custom-wrapper .h5-synopsis {
    margin-left:-1pt;
    }
    .h1-synopsis,.h2-synopsis,.h3-synopsis,.h4-synopsis,.h5-synopsis,.h6-synopsis{
    font-family:'Gill Sans','Helvetiva Neue',Helvetica,sans-serif;
    font-size: 10pt;
    font-style: italic;
    color:rgb(145, 145, 145);
    display:block;
    margin-bottom:5pt;
    }
    #custom-wrapper h6 {
    margin-top: 2em;
    text-transform: uppercase;
    font-weight: bold;
    }
    div.block {
    position: relative;
    background: #fff;
    }
    div.action p {
    margin-top: 1em;
    }
    .centered {
    text-align: center;
    }
    div.dialog,div.dual {
    margin-top: 1em;
    }
    div.transition {
    margin-top: 1em;
    margin-bottom: 12pt;
    text-align: right;
    }
    .dialog p.character {
    padding-left: 153.33pt;
    }
    .dialog p.parenthetical {
    padding-left: 115pt;
    }
    .dialog p {
    padding-left: 76.67pt;
    width: 306.67pt;
    }
    .dual > div {
    float: left;
    width: 48%!important;
    }
    .dual p.character {
    padding-left: 6em;
    }
    .dual p.parenthetical {
    padding-left: 3em;
    }
    .dual p {
    padding-left: 0;
    width: 19em;
    }
    .dual .right {
    margin-left: 1em;
    }
    .dual .right p.character {
    padding-left: 6em;
    }
    span.scnuml {
    display: block;
    float: left;
    margin-left: -4.52em;
    font-weight: inherit;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    }
    span.scnumr {
    display: block;
    float: right;
    margin-right: 0.72em;
    font-weight: inherit;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    }
    .page-break {
    page-break-before: always;
    }
</style>

This should to the trick.
I hope that I have prefixed everything well :slight_smile: .

6

Oh wow! Thank you so much! This is so generous, and is greatly appreciated. Thank you.

2 Likes