Parchment Coding

Parchment Coding

First, Sanction of the Athar has great templates in general, and this is where I started in my quest for parchment. I recommend you take a look. But, we wanted something slightly different.

We decided we wanted something a bit more medieval. Parchment, the thin writing material of choice pre-1500s, is made from specially treated hides of sheep, cows, or goats, but particularly calves, so it wouldn’t quite have the same color, texture, or tears as Sanction’s paper. We found a great looking parchment-looking texture from Firesign24-7 on Deviant Art. Then, after scouring the interwebs to try and figure out how to make a seamless, endless background, found this guide. I then put the two together! Below will be the individual images used to make the parchment seen on the site. I ask that you give credit to Firesign24-7 for making the original parchment, and add a link in your acknowledgements back here so that others can learn how to make their own parchment. Also, becoming a fan of Tyellador’s never hurt either! ;)

In general, I want as little code on each page as possible. I couldn’t figure out how to put all of the code in the CSS, but I could get most of it by making some classes. The following is my CSS code:

.parchmentTop {position:relative;width:730px;top:25px;font-family:georgia,times;font-style:italic;font-size:12pt;line-height:normal;background-image:url(‘body parchment image here’);}

.parchment {position:relative;top:-25px;width:730px;height:38px;background-image:url(‘top parchment image here’);}

.parchmentBottom {position:relative;bottom:-18px;right:-6px;width:730px;height:38px;background-image:url(‘bottom parchment image here’);margin-bottom:40px;}

.parchmentBody {width:610px;padding: 1px 60px 2px 60px;}

So you have a good idea of what’s going on here, here’s what each of my images looks like:




You’ll notice that my parchmentTop and parchment images seem swapped. I need the parchmentTop image to load first, so that the parchment and parchmentBottom images float on top of it. And it looks weird to write parchment before parchmentTop. parchmentBody is there to keep the text within the bounds of the images. You’ll notice that parchment and parchmentBottom are moved relatively up and down respectively with the top and bottom commands.

So, now that we have the CSS code, how do we get it into the individual pages? Your pages should look like this:

<div class="parchmentTop"><div class="parchment"></div><div class="parchmentBody">
All of your page contents go here. 
</div><div class="parchmentBottom"></div></div>

So, I have the actual on-page code down to two lines.

Back to Tutorials

Parchment Coding

Tyellador Thorvaldr Thorvaldr