This post continues from part two, which itself is a continuation of part one. I now had a working programme, but one which my target audience of students, actors and academics would have difficulty interacting with. Before I made the website user-friendly, however, I still had some bugs to squash. I added another dialogue box to let users select how many words they wanted as a cue (updating the javascript accordingly); I wrote a new function to resest everything after the generation of a part so as to allow for the seamless generation of a new one; and I dabbled in a bit of PHP and drew on the TEI Boilerplate XSLT to create a ‘Look at the Whole Play’ button.

It was now time to style the website. I don’t like this stage, and I have never produced anything particularly stunning with css. Indeed, the first aesthetic update I made was actually the creation of a favicon for the website. I chose a bell, as early modern prompters rung bells to signal scene changes and entrances and exits. Witness Aaron Hill:

Among his Instrumenta Regni, his Implements of Government, I have taken particular Notice of a little Bell, which hangs over his Arm: By the Tinkling of this Bell, if a Lady in Tragedy be in the Spleen for the Absence of her Lover, or a Hero in the Dumps for the Loss of a Battle, he can conjure up soft Musick to sooth their Distress; nay, if a a Wedding happens in a Comedy, he can summon up the Fidlers to dispel Care by a Country Dance.

With my favicon in place, I then started trying to make the website presentable. My original plan was to make the site look like an eighteenth-century writing desk, with green leather inlay and a gold trim. I ended up avoiding this as it would require loading a very large picture behind my text, on top of everything else I was asking of the user’s browser. Instead, I picked a set of colours that would hopefully be vaguley reminiscenet of sheets on a table.

The real issue, however, was organizing my pages. To do this, I had to create additional <div> elements to serve as wrappers, and to move some of my existing <div> elements into new places in the page. This really messed up my code, which itself then needed editing so that it pointed at the correct thing again. The process was dull and repetitive, and the only thing that made it slightly better was the fact that Firefox allowed me to edit each page’s CSS in the browser (simply hit F12 to bring up the console).

Eventually I got everything working, albeit a little inelegantly. I wrote some FAQs and other instructions, and now my website was ready to enter beta testing. By this, I mean that I will email it to friends and colleagues at the start of next week.

Some more code as a conclusion. This time, the one bit of CSS I am quite proud of, in that it uses a selector I wouldn’t have known about before doing this project:

.sp div:nth-last-child(1) {
margin-bottom: 0.5em;
}

This creates a little bit of space between each of the cue / speech pairs, and so makes the finished part much easier to read.