Actions

Work Header

Rating:
Archive Warning:
Fandoms:
Additional Tags:
Language:
Français
Series:
Part 2 of CSS stuff
Stats:
Published:
2026-05-12
Completed:
2026-06-12
Words:
2,604
Chapters:
2/2
Comments:
2
Kudos:
12
Bookmarks:
5
Hits:
137

The Scriptorium [Work Skin]

Summary:

CSS components for AO3 workskins: simple document-style formatting elements with an antiquarian feel.

  • parchment scrolls
  • book cover / book pages
  • newspaper clippings

More may follow.

Notes:

Updates will be posted as new chapters whenever a new component is added.
Subscribe to the work if you'd like to be notified.

Chapter 1: Components

Notes:

The full CSS is available on GitHub. Copy only the components you need.

(See the end of the chapter for more notes.)

Chapter Text

MENU

 

HOW TO USE ↑

1. Go to My Dashboard → Skins → My Work Skins → Create Work Skin
2. Paste the CSS for the components you want to use
3. Apply the skin to your work under Edit Work → Post/Edit → Select work skin
4. In your chapter text (HTML mode), wrap your content in the appropriate class

 

COMPONENTS ↑

1. PARCHMENT BACKGROUND ↑

A simple, textured parchment background. Can be used alone or with .frame

Standalone demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac leo in elit tristique porta et nec tortor. Maecenas maximus vel lectus in pharetra. Nam id justo vestibulum, faucibus eros vitae, mollis neque. Aliquam lacinia eros libero, quis rhoncus justo commodo at. Phasellus porta finibus nisl ut dictum. Pellentesque consectetur ultricies nunc. Proin id volutpat eros. Donec volutpat risus ac mauris gravida congue. Aenean cursus ligula et erat fringilla, at ornare arcu dignissim.

 

Parchment with frame demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac leo in elit tristique porta et nec tortor. Maecenas maximus vel lectus in pharetra. Nam id justo vestibulum, faucibus eros vitae, mollis neque. Aliquam lacinia eros libero, quis rhoncus justo commodo at. Phasellus porta finibus nisl ut dictum. Pellentesque consectetur ultricies nunc. Proin id volutpat eros. Donec volutpat risus ac mauris gravida congue. Aenean cursus ligula et erat fringilla, at ornare arcu dignissim.

HTML / CSS

HTML → standalone:

<div class="parchment">
  <p>Your text here.</p>
</div>

HTML → with frame:

<div class="frame">
  <div class="parchment">
    <p>Your text here.</p>
  </div>
</div>
Show CSS

CSS parchment:

#workskin .parchment {
  max-width: 40em;
  margin: auto;
  color: black;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
  background: url("https://raw.githubusercontent.com/lostquill/ao3-the-scriptorium/main/assets/parchment-texture.jpg");
  padding: 1em 1.3em;
  position: relative;
  box-sizing: border-box;
}

CSS frame:

#workskin .frame {
  max-width: 40em;
  margin: auto;
  padding: 5px;
  background: white;
  border: 2px solid #F0E7D9;
  box-sizing: border-box;
}

 

2. PARCHMENT SCROLL ↑

A decorative parchment scroll with a fixed size and scrollable content area.

Note that the layout does not adapt to smaller screens: the scroll will overflow on mobile.

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac leo in elit tristique porta et nec tortor. Maecenas maximus vel lectus in pharetra. Nam id justo vestibulum, faucibus eros vitae, mollis neque. Aliquam lacinia eros libero, quis rhoncus justo commodo at.

HTML / CSS
<div class="parchment-scroll">
  <div class="parchment-scroll-content">
    <p>Your text here.</p>
  </div>
</div>
Show CSS
/* ============================================================
   PARCHMENT SCROLL
   ============================================================ */

#workskin .parchment-scroll {
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
	
    width: 600px;
    height: 435px;
    overflow: hidden;
    margin: 10px auto;
    padding: 7em 5.3em;
	
    background: url("https://raw.githubusercontent.com/lostquill/ao3-the-scriptorium/main/assets/parchment-scroll.png");
    background-size: cover;
    background-repeat: no-repeat;
}

#workskin .parchment-scroll-content {
    max-height: 200px;
    padding-inline: 2em;
    overflow: auto;
    margin: auto;
}

#workskin .parchment-scroll-content p {
    color: black;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
    font-style: italic;
}

 

3. BOOK ↑

A dark, ornate book cover with a decorative border. Nest .parchment inside for inner page sections with a lighter texture. Use .book-title for the title and .book-edition for edition information at the bottom.

A scrollbar will appear if the content exceeds 500px in height.

  • You can adjust this value by changing max-height in #workskin .book-content in the CSS, or remove it entirely by setting max-height to unset.
  • To enforce a fixed height regardless of content length (for a consistent page or cover format) use height instead of max-height.
Book CSS
Show CSS
/* ============================================================
   BOOK
   ============================================================ */

#workskin .book {
  max-width: 38em;
  margin: 20px auto;
  padding: 5em 2em;
  box-sizing: border-box;
  position: relative;
	
  color: #d8c8af;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
	
  background: url("https://raw.githubusercontent.com/lostquill/ao3-the-scriptorium/main/assets/book-cover-texture.png") top left;
  background-color: #180905;
  border-image: url("https://raw.githubusercontent.com/lostquill/ao3-the-scriptorium/main/assets/book-border.png") 45% round;
  border-image-outset: 20px;
  border-image-width: 130px;
  filter: drop-shadow(2px 4px 6px #464646) contrast(0.9);
}

#workskin .book p {
  margin: 15px auto;
}

#workskin p.book-title {
  font-size: 1.1em;
  letter-spacing: 0.1em;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 2px 2px 2px black;
  border-bottom: 2px solid #887777;
  padding-bottom: 5px;
}

#workskin .book-content {
  padding: 5px;
  max-height: 500px;
  overflow-y: auto;
  box-sizing: border-box;
}

#workskin .book-content p {
  line-height: 1.3em;
}

#workskin .book-content p:first-of-type {
  margin-top: 0;
}

#workskin .book-content p:last-of-type {
  margin-bottom: 0;
}

#workskin .book-edition {
  border-top: 2px solid #887777;
  padding-top: 10px;
  font-size: 12px;
  text-align: right;
}


/* ============================================================
   PARCHMENT BACKGROUND
   No need to add #workskin .parchment again if already included above (standalone parchment)
   ============================================================ */

#workskin .parchment {
  max-width: 40em;
  margin: auto;
  color: black;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
  background: url("https://raw.githubusercontent.com/lostquill/ao3-the-scriptorium/main/assets/parchment-texture.jpg");
  padding: 1em 1.3em;
  position: relative;
  box-sizing: border-box;
}

#workskin .parchment p.book-title {
  text-shadow: none;
}


/* ============================================================
   BOOK IMAGE
   No need to add #workskin .img-float-clear again if already included via newspaper image css
   ============================================================ */

#workskin .cover-float {
  width: 40%;
  margin: 0 10px 0 0;
  float: left;
}

#workskin .cover-book-img {
  padding-bottom: 59%;
  background: url("https://raw.githubusercontent.com/lostquill/ao3-the-scriptorium/main/assets/book-cover-image.gif") center center;
  background-size: cover;
  filter: brightness(0.8);
}

#workskin .img-float-clear {
  clear: both;
}


I. Basic back cover
Demo

Advanced Potion-Making

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac leo in elit tristique porta et nec tortor. Maecenas maximus vel lectus in pharetra. Nam id justo vestibulum, faucibus eros vitae, mollis neque. Aliquam lacinia eros libero, quis rhoncus justo commodo at. Phasellus porta finibus nisl ut dictum. Pellentesque consectetur ultricies nunc. Proin id volutpat eros. Donec volutpat risus ac mauris gravida congue. Aenean cursus ligula et erat fringilla, at ornare arcu dignissim.

Aenean ut risus tellus. Morbi ac neque quis lorem tincidunt ultrices nec id magna. Integer tellus diam, vehicula eget augue vel, imperdiet consequat lacus. Donec porttitor sit amet ipsum fringilla volutpat. Morbi quam tellus, ornare et ante a, vehicula blandit nisi. Fusce malesuada, felis eu maximus viverra, felis nibh congue leo, eu consequat eros lorem sed lectus. Sed laoreet condimentum nunc, ac elementum turpis molestie vel. Aliquam posuere magna a justo pharetra vestibulum a id eros. Morbi fringilla nulla nulla, ac convallis risus finibus sed.

Sixth Edition — Published by Obscurus Books, London

HTML
<div class="book">
  <p class="book-title">Title of the Book</p>
  <div class="book-content">
    <p>First paragraph here.</p>
    <p>Another paragraph here.</p>
  </div>
  <p class="book-edition">First Edition — 1998</p>
</div>


II. Basic back cover with image

Add an image to your back cover:

  • Find #workskin .cover-book-img in the CSS to swap in your own URL.
  • You can adjust the height via the padding-bottom property of the same class, and change the width in #workskin .cover-float.
Demo

Advanced Potion-Making

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac leo in elit tristique porta et nec tortor. Maecenas maximus vel lectus in pharetra. Nam id justo vestibulum, faucibus eros vitae, mollis neque. Aliquam lacinia eros libero, quis rhoncus justo commodo at. Phasellus porta finibus nisl ut dictum. Pellentesque consectetur ultricies nunc. Proin id volutpat eros. Donec volutpat risus ac mauris gravida congue. Aenean cursus ligula et erat fringilla, at ornare arcu dignissim.

Aenean ut risus tellus. Morbi ac neque quis lorem tincidunt ultrices nec id magna. Integer tellus diam, vehicula eget augue vel, imperdiet consequat lacus. Donec porttitor sit amet ipsum fringilla volutpat. Morbi quam tellus, ornare et ante a, vehicula blandit nisi. Fusce malesuada, felis eu maximus viverra, felis nibh congue leo, eu consequat eros lorem sed lectus. Sed laoreet condimentum nunc, ac elementum turpis molestie vel. Aliquam posuere magna a justo pharetra vestibulum a id eros. Morbi fringilla nulla nulla, ac convallis risus finibus sed.

Sixth Edition — Published by Obscurus Books, London

HTML
<div class="book">
  <p class="book-title">Title of the Book</p>
  <div class="book-content">
    <div class="cover-float">
      <div class="cover-book-img"></div>
    </div>
    <p>First paragraph here.</p>
    <p>Another paragraph here.</p>
    <div class="img-float-clear"></div>
  </div>
  <p class="book-edition">First Edition — 1998</p>
</div>


III. Book with inner parchment page
Demo

Foreword

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac leo in elit tristique porta et nec tortor. Maecenas maximus vel lectus in pharetra. Nam id justo vestibulum, faucibus eros vitae, mollis neque. Aliquam lacinia eros libero, quis rhoncus justo commodo at. Phasellus porta finibus nisl ut dictum. Pellentesque consectetur ultricies nunc. Proin id volutpat eros. Donec volutpat risus ac mauris gravida congue. Aenean cursus ligula et erat fringilla, at ornare arcu dignissim.

Aenean ut risus tellus. Morbi ac neque quis lorem tincidunt ultrices nec id magna. Integer tellus diam, vehicula eget augue vel, imperdiet consequat lacus. Donec porttitor sit amet ipsum fringilla volutpat. Morbi quam tellus, ornare et ante a, vehicula blandit nisi. Fusce malesuada, felis eu maximus viverra, felis nibh congue leo, eu consequat eros lorem sed lectus. Sed laoreet condimentum nunc, ac elementum turpis molestie vel. Aliquam posuere magna a justo pharetra vestibulum a id eros. Morbi fringilla nulla nulla, ac convallis risus finibus sed.

Sixth Edition — Published by Obscurus Books, London

HTML
<div class="book">
  <div class="parchment">
    <p class="book-title">Chapter One</p>
    <div class="book-content">
      <p>First paragraph here.</p>
      <p>Another paragraph here.</p>
    </div>
    <p class="book-edition">First Edition — 1998</p>
  </div>
</div>

 

4. NEWSPAPER ↑

A sepia-toned newspaper layout.

A scrollbar will appear if the content exceeds 550px in height.

  • You can adjust this value by changing max-height in #workskin .newspaper-content in the CSS, or remove it entirely by setting max-height to unset.
  • To enforce a fixed height regardless of content length (for a consistent newspaper format) use height instead of max-height.
Newspaper CSS
Show CSS
/* ============================================================
   NEWSPAPER
   ============================================================ */

#workskin .newspaper {
  max-width: 40em;
  margin: auto;
  padding: 10px 20px;
  box-sizing: border-box;
  position: relative;
	
  color: black;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
	
  background: url("https://raw.githubusercontent.com/lostquill/ao3-the-scriptorium/main/assets/newspaper-texture.jpg");
  box-shadow: 0 0 10px #bcbcbc;
  filter: sepia(40%) saturate(60%) brightness(1);
}

#workskin .newspaper p {
  margin: 15px auto;
}

#workskin .newspaper-headline {
  margin: 1.286em auto;
  margin-top: 2em;
  padding: 10px 0;
  border-bottom: 2px dashed #b3a4a4;
  border-top: 2px dashed #b3a4a4;
}

#workskin .newspaper-headline p {
  margin: auto;
}

#workskin .newspaper-title {
  font-family: "Courier New", Courier, monospace;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 18px;
  line-height: 23px;
}

#workskin .newspaper-date {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  position: absolute;
  top: 1em;
}

#workskin .newspaper-content {
  padding: 5px;
  max-height: 550px;
  overflow-y: auto;
  box-sizing: border-box;
}

#workskin .newspaper-content p {
  font-size: 14px;
  line-height: 17px;
  text-align: justify;
}

#workskin .newspaper-content p:first-of-type {
  margin-top: 0;
}

#workskin .newspaper-content p:last-of-type {
  margin-bottom: 0;
}

#workskin .newspaper-byline {
  font-size: 12px;
  text-align: right;
}

#workskin .newspaper-footer {
  font-family: "Courier New", Courier, monospace;
  text-align: center;
  font-size: 12px;
  border-top: 1px solid #9d9d9d;
  padding-top: 10px;
  margin-bottom: 0;
}


/* ============================================================
   NEWSPAPER IMAGES
   No need to add #workskin .img-float-clear again if already included via book image css
   ============================================================ */

#workskin .newspaper-float-left {
  width: 40%;
  margin: 0 10px 0 0;
  float: left;
}

#workskin .newspaper-float-right {
  width: 30%;
  margin: 0 0 0 10px;
  float: right;
}

#workskin .newspaper-img-left,
#workskin .newspaper-img-right {
  filter: sepia(1);
}

#workskin .newspaper-img-left {
  background: url("https://raw.githubusercontent.com/lostquill/ao3-the-scriptorium/main/assets/newspaper-image.jpg") center center;
  background-size: cover;
  padding-bottom: 59%;
}

#workskin .newspaper-img-right {
  background: url("https://raw.githubusercontent.com/lostquill/ao3-the-scriptorium/main/assets/newspaper-image.jpg") center center;
  background-size: cover;
  padding-bottom: 69%;
}

#workskin .newspaper-content:has(.img-float-clear) .newspaper-float-left + p,
#workskin .newspaper-content:has(.img-float-clear) .newspaper-float-right + p {
	margin-top: 0;
}

#workskin .img-float-clear {
  clear: both;
}


I. Basic newspaper
Demo

Monday, 2 September 1998 — 3 Sickles

The Daily Prophet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac leo in elit tristique porta et nec tortor. Maecenas maximus vel lectus in pharetra. Nam id justo vestibulum, faucibus eros vitae, mollis neque. Aliquam lacinia eros libero, quis rhoncus justo commodo at. Phasellus porta finibus nisl ut dictum. Pellentesque consectetur ultricies nunc. Proin id volutpat eros. Donec volutpat risus ac mauris gravida congue. Aenean cursus ligula et erat fringilla, at ornare arcu dignissim.

Aenean ut risus tellus. Morbi ac neque quis lorem tincidunt ultrices nec id magna. Integer tellus diam, vehicula eget augue vel, imperdiet consequat lacus. Donec porttitor sit amet ipsum fringilla volutpat. Morbi quam tellus, ornare et ante a, vehicula blandit nisi. Fusce malesuada, felis eu maximus viverra, felis nibh congue leo, eu consequat eros lorem sed lectus. Sed laoreet condimentum nunc, ac elementum turpis molestie vel. Aliquam posuere magna a justo pharetra vestibulum a id eros. Morbi fringilla nulla nulla, ac convallis risus finibus sed.

Nam sit amet pulvinar metus, a pretium metus. Morbi lobortis eu turpis et rhoncus. Mauris at metus mattis, fermentum risus non, vulputate risus. Phasellus lobortis auctor lacus, vel hendrerit elit fringilla in. Ut vel diam ac eros suscipit blandit nec eget quam. Integer porttitor eros eget libero interdum tincidunt. Phasellus molestie, erat eget pharetra suscipit, eros mi malesuada justo, nec dignissim quam odio eu urna. Proin porttitor accumsan risus, in viverra velit imperdiet at. Nunc a dignissim diam, luctus pharetra eros. Vivamus sed sapien nisl. Aenean ultrices, elit eget molestie commodo, leo arcu mattis ante, in ultricies augue justo vitae velit.

— By Archibald Holt, Ministry Correspondent

— Continued on page 4 —

HTML
<div class="newspaper">
  <div class="newspaper-headline">
    <p class="newspaper-date">1 September 1998</p>
    <p class="newspaper-title">THE DAILY PROPHET</p>
  </div>
  <div class="newspaper-content">
    <p>First paragraph here.</p>
    <p>Another paragraph here.</p>
  </div>
  <p class="newspaper-byline">— By Your Name</p>
  <p class="newspaper-footer">— End of article —</p>
</div>


II. Newspaper with sepia article images

Add images to your article:

  • Find #workskin .newspaper-img-left and #workskin .newspaper-img-right in the CSS to swap in your own URLs.
  • You can adjust the height via the padding-bottom property of these classes, and change the width in #workskin .newspaper-float-left / #workskin .newspaper-float-right.
Demo

Monday, 2 September 1998 — 3 Sickles

The Daily Prophet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac leo in elit tristique porta et nec tortor. Maecenas maximus vel lectus in pharetra. Nam id justo vestibulum, faucibus eros vitae, mollis neque. Aliquam lacinia eros libero, quis rhoncus justo commodo at. Phasellus porta finibus nisl ut dictum. Pellentesque consectetur ultricies nunc. Proin id volutpat eros. Donec volutpat risus ac mauris gravida congue. Aenean cursus ligula et erat fringilla, at ornare arcu dignissim.

Aenean ut risus tellus. Morbi ac neque quis lorem tincidunt ultrices nec id magna. Integer tellus diam, vehicula eget augue vel, imperdiet consequat lacus. Donec porttitor sit amet ipsum fringilla volutpat. Morbi quam tellus, ornare et ante a, vehicula blandit nisi. Fusce malesuada, felis eu maximus viverra, felis nibh congue leo, eu consequat eros lorem sed lectus. Sed laoreet condimentum nunc, ac elementum turpis molestie vel. Aliquam posuere magna a justo pharetra vestibulum a id eros. Morbi fringilla nulla nulla, ac convallis risus finibus sed.

Nam sit amet pulvinar metus, a pretium metus. Morbi lobortis eu turpis et rhoncus. Mauris at metus mattis, fermentum risus non, vulputate risus. Phasellus lobortis auctor lacus, vel hendrerit elit fringilla in. Ut vel diam ac eros suscipit blandit nec eget quam. Integer porttitor eros eget libero interdum tincidunt. Phasellus molestie, erat eget pharetra suscipit, eros mi malesuada justo, nec dignissim quam odio eu urna. Proin porttitor accumsan risus, in viverra velit imperdiet at. Nunc a dignissim diam, luctus pharetra eros. Vivamus sed sapien nisl. Aenean ultrices, elit eget molestie commodo, leo arcu mattis ante, in ultricies augue justo vitae velit.

— By Archibald Holt, Ministry Correspondent

— Continued on page 4 —

HTML
<div class="newspaper">
  <div class="newspaper-headline">
    <p class="newspaper-date">1 September 1998</p>
    <p class="newspaper-title">THE DAILY PROPHET</p>
  </div>
  <div class="newspaper-content">
    <div class="newspaper-float-left">
      <div class="newspaper-img-left"></div>
    </div>
    <p>First paragraph here.</p>
    <div class="img-float-clear"></div>
    <div class="newspaper-float-right">
      <div class="newspaper-img-right"></div>
    </div>
    <p>Another paragraph here.</p>
    <div class="img-float-clear"></div>
  </div>
  <p class="newspaper-byline">— By Rita Skeeter</p>
  <p class="newspaper-footer">— End of article —</p>
</div>

Notes:

CREDITS AND ASSETS ↑

The textures used in this workskin are free-to-use images, with one exception: the book border was generated with Gemini and is shared here under the same spirit of open use. If you'd prefer not to use AI-generated assets, feel free to swap it out for a border of your choice; the CSS will work with any image with a little tweaking of the border properties.

— The newspaper photo is by Jupilu via Pixabay.
— Parchment scroll designed by Magnific

If you use The Scriptorium in your work, a mention in your end notes would be appreciated but is not required.