Jump to content

How do I do this?


tjalex01

Recommended Posts

I own the website www.scripttoolbox.com, a screenplay formatting guide. Throughout the website, I have hundreds of screenplay formatting examples created as images. Recently I saw this site: http://scriptwrecked.com/2011/01/10/to-pre-lap-or-not-to-pre-lap/ He also has examples, but it looks like they are created using some kind of script that may be CSS. Can someone help me figure out how to do something like this on my webpages? I want to find simpler ways to build my site to make updates easier. Keep in mind I know VERY LITTLE about CSS and how it works. Thanks in advance. T. J.

Link to comment
Share on other sites

Alright, so here I'll try to explain how can achieve an example like his. Here is the text from one of his examples:EXT. PARKING LOT – NIGHTSimon kisses his mistress goodnight. Looks her up and down as she sashays to her car. WIFE’S VOICE (PRE-LAP) Cheater! INT. SIMON’S HOUSE – NIGHT Guilt written all over his face, Simon gapes at his wife. WIFE You are totally cheating! You can’t look at all the questions first. She hurls a plastic Trivial Pursuit pie piece at Simon’s head, revealing a board game being played with ANOTHER COUPLE. They all laugh. SIMON I never get away with anything. The first thing to do with all that text is to separate it into paragraph tags in side a div:

<div class="example"><p class="setting">EXT. PARKING LOT – NIGHT</p><p class="description">Simon kisses his mistress goodnight. Looks her up and down as she sashays to her car.</p><p class="prelap">WIFE’S VOICE (PRE-LAP)</p><p class="dialogue">Cheater!</p><p class="setting">NT. SIMON’S HOUSE – NIGHT</p><p class="description">Guilt written all over his face, Simon gapes at his wife.</p><p class="character">WIFE</p><p class="dialogue">You are totally cheating! You can’t look at all the questions first.</p><p class="description">She hurls a plastic Trivial Pursuit pie piece at Simon’s head, revealing a board game being played with ANOTHER COUPLE. They all laugh.</p><p class="character">SIMON</p><p class="dialogue">I never get away with anything.</p></div>

Now you have something that looks nice and clean on a website, but isn't separated like you'd like. This is where the CSS comes into play. First let's get the border around all of our example text and a fixed width and padding:

div.example{/*border: widthOfLine typeOfBorder colorOfLine*/border: 1px solid #000000;width: 400px;padding:10px;}

So the 1px (widthOfLine) will make the border around the example 1px wide.The solid will make the border a solid line around the whole div, not dashed, not doubled, just a generic line.#000000 is the Hex Code for black, so it will make the border line black.Width will make sure the div is no bigger, or no smaller, than 400px wide.Padding will give the text a 10px padding in all directions, top bottom left right, from the INSIDE border of the div. ----------------------------------------- Now we will deal with the paragraph tags, <p></p> First thing we need to do is make sure none of the paragraph tags have the default margin or padding settings set. That way we can determine that for ourselves.

p{padding:0;margin:0;}

Now all you are going to do is add a padding bottom of 5px to all the paragraph tags so there is space inbetween.Then you will just have to add a padding left to get the indent effect you see on the example website. ---------------------------------------- Then for your final project you should have something like this (I did a few small changes like font-size to make it look nicer).But now you have fun control over how your example looks with CSS!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Text Example</title><style type="text/css">p{  margin:0;  padding:0;}div.example{/*border: widthOfLine typeOfBorder colorOfLine*/border: 1px solid #000000;width: 500px;padding: 10px;font-size:12px;}p.setting{  padding-bottom:5px;}p.description{  padding-bottom:5px;}p.prelap{  padding-bottom:5px;  padding-left:40%;}p.character{  padding-bottom:5px;  padding-left:40%;}p.dialogue{  width:300px;  padding-bottom:5px;  padding-left:20%;}</style></head><body><div class="example"><p class="setting">EXT. PARKING LOT - NIGHT</p><p class="description">Simon kisses his mistress goodnight. Looks her up and down as she sashays to her car.</p><p class="prelap">WIFE'S VOICE (PRE-LAP)</p><p class="dialogue">Cheater!</p><p class="setting">NT. SIMON'S HOUSE - NIGHT</p><p class="description">Guilt written all over his face, Simon gapes at his wife.</p><p class="character">WIFE</p><p class="dialogue">You are totally cheating! You can't look at all the questions first.</p><p class="description">She hurls a plastic Trivial Pursuit pie piece at Simon's head, revealing a board game being played with ANOTHER COUPLE. They all laugh.</p><p class="character">SIMON</p><p class="dialogue">I never get away with anything.</p></div></body></html>

Edited by Krewe
Link to comment
Share on other sites

Krewe, Thanks for the advice! I'd have thanked you sooner but I was with my wife at the hospital HAVING A BABY!! It's a boy, by the way. Is it possible to create a separate .css file on which to put the main information and then attach that file to the pages where the examples would be? That's way I could just connect the two files and not have to do it everytime.

Link to comment
Share on other sites

Congrats Alex!Of course you can do that, all you need to do is move all the css in the <style> tags into a new file and name it something like "style.css".Then in the HTML <head> tags you'd have this:

<head><title>Test Page</title><link rel="stylesheet" type="text/css" href="style.css" /></head>

Note that this will only work if the two files are in the same folder. If you are putting style.css into a folder named css then you're code would look like this:

<head><title>Test Page</title><link rel="stylesheet" type="text/css" href="css/style.css" /></head>

Congrats again and let me know of anymore questions!~Krewe

Edited by Krewe
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...