Alhaitham-Inspired Site Skin & Workskin

The House of Daena has excellent taste in interior design. Your AO3 interface can too.

A free site skin and workskin inspired by Alhaitham, Scribe of the Sumeru Akademiya (Genshin Impact). Reskins your entire AO3 in deep teal, burnished gold, and aged parchment, with ornamental details throughout. Includes full installation instructions for both the site skin (which reskins your entire AO3 interface) and the workskin (which adds drop caps, decorated scene breaks, spoiler boxes, and ornamental borders to your own fic text). No prior CSS knowledge needed.

Notes:

(See the end of the work for notes.)

Work Text:

A free AO3 site skin inspired by Alhaitham, Scribe of the Sumeru Akademiya (Genshin). This skin reskins your entire AO3 interface in deep teal, burnished gold, and warm aged parchment with just enough ornamentation to feel like pulling a scroll from the shelves of the House of Daena.

The skin changes the header, navigation bar, sidebar dashboard, work listings, tags, pagination, comments, forms, and footer. A workskin is also included to style the body text of works you write, if you want your fic reading experience to match.

Free to use and adapt. Credit is appreciated but not required. If you make changes and want to share your version, please feel free.

Preview

The workskin — the styled text area you see when reading a fic — looks like this:

Kaveh, who has an entire curated collection of beautiful cups, does not understand how a person can drink feelings from something so emotionally barren.

“I’m buying new mugs,” he says abruptly.

Alhaitham raises a brow. “Why?”

“Because yours make me question the meaning of aesthetic life.”

“They’re functional.”

“They’re depressing.”

“They hold liquid. That’s all that matters.”

“I bet if someone gave you a cup that said ‘World’s Most Emotionally Avoidant Roommate’ you wouldn’t even flinch.”

“I’d use it,” Alhaitham replies, “because unlike some people, I don’t let ceramic dictate my emotional state.”

Kaveh narrows his eyes. “You let nothing dictate your emotional state.”

“Incorrect. You do. Constantly.”

Kaveh flinches.

Alhaitham doesn’t blink.

Neither of them breathe.

Somewhere, a spoon clinks against ceramic like a gun cocking in a romantic tragedy.

The drop cap, decorative inner border, and ✦ ◈ ✦ header ornament all appear automatically from the CSS — no special markup required in your fic text.

Here are some screenshots of how it looks. Mobile users please zoom in!

Colour Palette

For reference if you want to customise the skin:

Deep teal #163F3F — header background

Mid teal #1B5E5E — nav bar, links, accents

Burnished gold #C8971A — borders, highlights, hover states

Parchment #FAF3E0 — main background

Warm parchment #FCF4E4 — workskin / fic text background

Dark ink #2A1A08 — body text

Installing the Site Skin

What is a site skin? Site skins only change how you see AO3. Other users will not see this skin. It affects the entire interface — header, listings, tags, comments, forms, everything. It does not change how your works appear to readers.

Go to your Dashboard → Skins. Click your username in the top-right corner, then navigate to Archive → My Dashboard → Skins directly.
Click "Create Site Skin." Give it a name — for example, Alhaitham's Palette. Make sure the skin type is set to Site Skin.
Expand the CSS block below, select all the text inside it, and copy it. Paste it into the large CSS field on the creation page. Do not add anything before or after the CSS.
Click "Submit." AO3 will validate and save the skin. If you see an error, check that you copied the full block without any extra characters at the start.
Activate the skin. Go back to My Dashboard → Skins, find your new skin in the list, and click Use. The page will reload with your new look.
To uninstall at any time, go back to Skins and click Stop Using. Everything will revert to AO3 default immediately.

Site Skin CSS — click to expand/view

Copy everything in the box below. Please scroll.

body {
  background-color: #D9CCA8;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  color: #2A1A08;
}

#outer {
  background-color: #D9CCA8;
}

.wrapper {
  background-color: #FAF3E0;
  box-shadow: 0 0 0 2px #C8971A, 0 0 0 5px #1B5E5E, 0 0 0 6px rgba(200, 151, 26, 0.4), 0 8px 48px rgba(27, 94, 94, 0.22);
}

#header {
  background-color: #163F3F;
  border-bottom: 4px solid #C8971A;
  position: relative;
}

#header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(200, 151, 26, 0.35);
}

#header .heading {
  background-color: #163F3F;
  padding: 0.5em 1.5em;
}

#header .heading a {
  color: #F5DFA0;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-weight: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 0 18px rgba(200, 151, 26, 0.4);
}

#header .heading a:hover {
  color: #C8971A;
  text-decoration: none;
  text-shadow: 0 0 12px rgba(200, 151, 26, 0.7);
}

#header .actions a {
  color: #C8B87A;
  text-decoration: none;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 0.9em;
  letter-spacing: 0.05em;
}

#header .actions a:hover {
  color: #FAF3E0;
  text-decoration: none;
}

#header a {
  color: #C8B87A;
}

#header a:visited {
  color: #A89060;
}

#header .primary {
  background-color: #1B5E5E;
  border-top: 1px solid rgba(200, 151, 26, 0.3);
}

#header .primary a {
  color: #C8B87A;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 0.85em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-right: 1px solid rgba(200, 151, 26, 0.15);
}

#header .primary a:hover {
  color: #FAF3E0;
  background-color: rgba(200, 151, 26, 0.18);
  text-decoration: none;
}

#header .primary .open a {
  color: #FAF3E0;
  background-color: rgba(200, 151, 26, 0.15);
}

#header .primary .current {
  background-color: rgba(200, 151, 26, 0.22);
  border-bottom: 2px solid #C8971A;
}

#header .primary .current a {
  color: #EDD070;
}

#header .menu {
  background-color: #163F3F;
  border: 1px solid #C8971A;
  border-top: 2px solid #C8971A;
  box-shadow: 0 4px 12px rgba(27, 94, 94, 0.3);
}

#header .dropdown:hover .menu a {
  color: #C8B87A;
  border-right: none;
}

#header .dropdown:hover .menu a:hover {
  color: #FAF3E0;
  background-color: rgba(200, 151, 26, 0.18);
}

#header .search {
  background-color: #1B5E5E;
}

#small_login {
  background-color: #163F3F;
  border: 1px solid rgba(200, 151, 26, 0.5);
  box-shadow: 0 2px 8px rgba(27, 94, 94, 0.2);
}

#dashboard.own {
  background-color: #FDF8EC;
  border: 1px solid rgba(200, 151, 26, 0.35);
  border-top: 3px solid #1B5E5E;
  box-shadow: 2px 0 8px rgba(27, 94, 94, 0.06);
}

#dashboard a {
  color: #1B5E5E;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  letter-spacing: 0.03em;
}

#dashboard a:hover {
  color: #C8971A;
  text-decoration: none;
}

#dashboard span {
  color: #6B5230;
}

#dashboard .current {
  background-color: rgba(200, 151, 26, 0.12);
  border-left: 3px solid #C8971A;
  color: #6B4500;
}

#dashboard .current a {
  color: #6B4500;
  font-weight: bold;
}

#dashboard h4 {
  color: #1B5E5E;
  font-size: 0.78em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(200, 151, 26, 0.3);
  padding-bottom: 0.3em;
  margin-top: 1em;
}

#main {
  background-color: #FAF3E0;
}

#main h2.heading {
  color: #1B5E5E;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-weight: normal;
  font-size: 1.35em;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(200, 151, 26, 0.4);
  padding-bottom: 0.5em;
  margin-bottom: 1.2em;
  position: relative;
}

#main h2.heading::before {
  content: '\25C8  ';
  color: #C8971A;
  font-size: 0.85em;
}

#main h2.heading a {
  color: #1B5E5E;
  text-decoration: none;
}

#main h2.heading a:hover {
  color: #C8971A;
}

#main h3.heading {
  color: #8B6500;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-weight: normal;
  font-size: 1.05em;
  letter-spacing: 0.05em;
}

#main h3.heading::before {
  content: '\2726  ';
  color: rgba(200, 151, 26, 0.6);
  font-size: 0.8em;
}

#main h3.heading a {
  color: #8B6500;
  text-decoration: none;
}

#main h3.heading a:hover {
  color: #1B5E5E;
}

#main a {
  color: #1B5E5E;
}

#main a:visited {
  color: #2E6F6F;
}

#main a:hover {
  color: #C8971A;
}

li.blurb {
  background-color: #FDF8EC;
  border: 1px solid rgba(200, 151, 26, 0.28);
  border-left: 4px solid #C8971A;
  border-radius: 2px;
  margin-bottom: 1.3em;
  box-shadow: 0 2px 10px rgba(27, 94, 94, 0.07), inset 0 0 0 1px rgba(200, 151, 26, 0.06);
}

li.blurb:hover {
  border-left-color: #1B5E5E;
  background-color: #FBF5E4;
  box-shadow: 0 4px 18px rgba(27, 94, 94, 0.12), inset 0 0 0 1px rgba(200, 151, 26, 0.1);
}

li.blurb .heading a {
  color: #1B5E5E;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 1.05em;
  text-decoration: none;
}

li.blurb .heading a:hover {
  color: #C8971A;
  text-shadow: 0 0 8px rgba(200, 151, 26, 0.25);
}

li.blurb .fandoms.heading {
  border-bottom: 1px solid rgba(200, 151, 26, 0.2);
  padding-bottom: 0.3em;
  margin-bottom: 0.4em;
}

li.blurb .fandoms.heading a {
  color: #8B6500;
  font-style: italic;
  text-decoration: none;
}

li.blurb .fandoms.heading a:hover {
  color: #C8971A;
}

a.tag {
  color: #1B5E5E;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 0.87em;
  text-decoration: none;
  border: 1px solid rgba(27, 94, 94, 0.25);
  border-radius: 2px;
  padding: 0 0.35em;
  background-color: rgba(27, 94, 94, 0.05);
}

a.tag:hover {
  color: #6B4500;
  background-color: rgba(200, 151, 26, 0.12);
  border-color: rgba(200, 151, 26, 0.4);
}

li.warnings a.tag {
  border-color: rgba(139, 101, 0, 0.35);
  background-color: rgba(200, 151, 26, 0.08);
  color: #6B4500;
}

li.blurb .stats {
  color: #6B5230;
  font-size: 0.88em;
  border-top: 1px solid rgba(200, 151, 26, 0.15);
  padding-top: 0.4em;
  margin-top: 0.4em;
}

li.blurb .stats dt {
  color: #4A3010;
  font-weight: bold;
}

li.blurb .series {
  border-left: 2px solid rgba(200, 151, 26, 0.45);
  padding-left: 0.6em;
  color: #6B5230;
  font-size: 0.9em;
  font-style: italic;
  margin-top: 0.4em;
}

li.blurb .series a {
  color: #8B6500;
  text-decoration: none;
}

li.blurb .series a:hover {
  color: #C8971A;
}

dl.meta {
  border: 1px solid rgba(200, 151, 26, 0.3);
  background-color: rgba(200, 151, 26, 0.04);
  box-shadow: inset 0 0 0 1px rgba(27, 94, 94, 0.06);
}

dl.meta dt {
  color: #4A3010;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 0.88em;
  letter-spacing: 0.04em;
}

dl.meta dd {
  color: #2A1A08;
}

dl.meta a {
  color: #1B5E5E;
  text-decoration: none;
}

dl.meta a:hover {
  color: #C8971A;
}

.series {
  border-left: 3px solid #C8971A;
  padding-left: 0.6em;
  color: #6B5230;
  font-style: italic;
}

.series a {
  color: #8B6500;
  text-decoration: none;
}

.series a:hover {
  color: #C8971A;
}

.preface {
  background-color: #FDF8EC;
  border: 1px solid rgba(200, 151, 26, 0.22);
  border-top: 3px solid #C8971A;
  position: relative;
}

.preface h2.title {
  color: #1B5E5E;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-weight: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.preface h2.title::after {
  content: '  \25C8';
  color: rgba(200, 151, 26, 0.5);
  font-size: 0.7em;
}

.preface h2.title a {
  color: #1B5E5E;
  text-decoration: none;
}

.preface h3 {
  color: #8B6500;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-weight: normal;
  font-style: italic;
  border-color: rgba(200, 151, 26, 0.35);
  letter-spacing: 0.06em;
}

.preface h3::before {
  content: '\2014  ';
  color: rgba(200, 151, 26, 0.5);
}

.preface .summary {
  color: #2A1A08;
  line-height: 1.7;
}

.preface blockquote {
  border-left: 3px solid rgba(200, 151, 26, 0.45);
  background-color: rgba(200, 151, 26, 0.04);
  color: #4A3010;
  padding: 0.7em 1em;
  margin-left: 0.5em;
}

.chapter.navigation {
  background-color: rgba(27, 94, 94, 0.04);
  border-top: 1px solid rgba(200, 151, 26, 0.3);
  border-bottom: 1px solid rgba(200, 151, 26, 0.3);
  text-align: center;
}

.chapter.navigation a {
  color: #1B5E5E;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 0.92em;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.chapter.navigation a:hover {
  color: #C8971A;
}

.chapter.navigation .actions a[rel="prev"]::before {
  content: '\2B05  ';
  color: rgba(200, 151, 26, 0.6);
}

.chapter.navigation .actions a[rel="next"]::after {
  content: '  \27A1';
  color: rgba(200, 151, 26, 0.6);
}

#kudos {
  border-top: 1px solid rgba(200, 151, 26, 0.3);
  border-bottom: 1px solid rgba(200, 151, 26, 0.3);
  background-color: rgba(200, 151, 26, 0.05);
  text-align: center;
  padding: 1em;
  position: relative;
}

#kudos::before {
  content: '\2726';
  position: absolute;
  top: -0.6em;
  left: 50%;
  transform: translateX(-50%);
  background-color: #FAF3E0;
  color: #C8971A;
  padding: 0 0.5em;
  font-size: 0.85em;
}

#kudos a {
  color: #1B5E5E;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  text-decoration: none;
}

#kudos a:hover {
  color: #C8971A;
}

#kudos input[type="submit"] {
  background-color: #1B5E5E;
  color: #FAF3E0;
  border: 1px solid #C8971A;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 6px rgba(27, 94, 94, 0.2);
}

#kudos input[type="submit"]:hover {
  background-color: #C8971A;
  color: #1B5E5E;
  border-color: #1B5E5E;
}

.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
input[type="submit"],
button,
.actions label {
  background-color: #C8971A;
  color: #2A1A08;
  border-color: #163F3F;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 4px rgba(27, 94, 94, 0.18);
}

.actions a:hover,
.action:hover,
input[type="submit"]:hover,
button:hover {
  background-color: #163F3F;
  color: #FAF3E0;
  border-color: #C8971A;
  box-shadow: 0 2px 8px rgba(200, 151, 26, 0.25);
}

.actions a:visited,
.action:visited {
  color: #FAF3E0;
}

.current {
  background-color: rgba(200, 151, 26, 0.2);
  color: #4A3010;
  border-color: rgba(200, 151, 26, 0.4);
}

.notice,
.comment_notice,
ul.notes {
  background-color: rgba(200, 151, 26, 0.08);
  border: 1px solid rgba(200, 151, 26, 0.4);
  border-left: 4px solid #C8971A;
  color: #4A3010;
}

.caution {
  background-color: rgba(27, 94, 94, 0.06);
  border: 1px solid rgba(27, 94, 94, 0.3);
  border-left: 4px solid #1B5E5E;
  color: #1B3F3F;
}

.error,
.comment_error {
  background-color: rgba(100, 20, 20, 0.05);
  border: 1px solid rgba(100, 20, 20, 0.22);
  border-left: 4px solid #8B3A3A;
}

.alert.flash {
  background-color: rgba(200, 151, 26, 0.1);
  border: 1px solid rgba(200, 151, 26, 0.5);
  border-left: 4px solid #C8971A;
  color: #4A3010;
}

div.comment,
li.comment {
  border: 1px solid rgba(200, 151, 26, 0.22);
  border-left: 3px solid rgba(200, 151, 26, 0.5);
  background-color: #FDF8EC;
  box-shadow: 0 1px 4px rgba(27, 94, 94, 0.05);
}

div.comment:hover,
li.comment:hover {
  border-left-color: #C8971A;
}

div.comment .heading,
li.comment .heading {
  color: #1B5E5E;
  border-bottom: 1px solid rgba(200, 151, 26, 0.2);
  padding-bottom: 0.3em;
  margin-bottom: 0.4em;
}

div.comment .heading a,
li.comment .heading a {
  color: #1B5E5E;
  text-decoration: none;
}

div.comment .heading a:hover,
li.comment .heading a:hover {
  color: #C8971A;
}

.child {
  background-color: rgba(27, 94, 94, 0.03);
  border-left: 2px solid rgba(27, 94, 94, 0.2);
}

.listbox {
  background-color: #FDF8EC;
  border: 1px solid rgba(200, 151, 26, 0.32);
  border-top: 3px solid #1B5E5E;
  box-shadow: 0 2px 10px rgba(27, 94, 94, 0.07);
}

.listbox .heading,
.listbox>.heading {
  color: #1B5E5E;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 0.9em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 0.4em;
  border-bottom: 1px solid rgba(200, 151, 26, 0.25);
}

.listbox .heading::before {
  content: '\25C8  ';
  color: #C8971A;
  font-size: 0.85em;
}

.listbox .heading a {
  color: #1B5E5E;
  text-decoration: none;
}

.listbox .heading a:visited {
  color: #2E6F6F;
}

.listbox .index {
  background-color: #FAF3E0;
}

.filters .expander {
  color: #1B5E5E;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
}

li.relationships a {
  background-color: rgba(27, 94, 94, 0.07);
  color: #1B5E5E;
  border: 1px solid rgba(27, 94, 94, 0.2);
}

li.relationships a:hover {
  background-color: rgba(200, 151, 26, 0.1);
  color: #6B4500;
  border-color: rgba(200, 151, 26, 0.3);
}

ol.pagination {
  text-align: center;
}

ol.pagination li {
  display: inline-block;
}

ol.pagination a {
  border: 1px solid rgba(200, 151, 26, 0.4);
  color: #1B5E5E;
  border-radius: 2px;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  text-decoration: none;
  padding: 0.2em 0.6em;
}

ol.pagination a:hover {
  background-color: #1B5E5E;
  color: #FAF3E0;
  border-color: #1B5E5E;
  box-shadow: 0 2px 6px rgba(27, 94, 94, 0.2);
}

ol.pagination .current span {
  background-color: #C8971A;
  color: #FAF3E0;
  border: 1px solid #C8971A;
  border-radius: 2px;
  padding: 0.2em 0.6em;
  box-shadow: 0 2px 6px rgba(200, 151, 26, 0.3);
}

ol.pagination .gap {
  color: #8B7040;
}

ol.pagination .previous a::before {
  content: '\2B05  ';
  color: rgba(200, 151, 26, 0.7);
}

ol.pagination .next a::after {
  content: '  \27A1';
  color: rgba(200, 151, 26, 0.7);
}

fieldset {
  border: 1px solid rgba(200, 151, 26, 0.28);
  background-color: #FDF8EC;
  box-shadow: inset 0 1px 3px rgba(27, 94, 94, 0.04);
}

fieldset legend {
  color: #1B5E5E;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 0.9em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: #FDF8EC;
  padding: 0 0.5em;
}

form dl {
  background-color: #FBF5E0;
  border: 1px solid rgba(200, 151, 26, 0.22);
}

form dt {
  border-bottom: 1px solid rgba(200, 151, 26, 0.18);
  color: #4A3010;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 0.9em;
  letter-spacing: 0.04em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  background-color: #FDF8EC;
  border: 1px solid rgba(200, 151, 26, 0.35);
  color: #2A1A08;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: #1B5E5E;
  box-shadow: 0 0 0 2px rgba(27, 94, 94, 0.12);
}

.own,
.draft .wrapper {
  background-color: #FAF3E0;
}

.draft {
  border: 2px dashed rgba(200, 151, 26, 0.45);
}

.unread {
  background-color: rgba(27, 94, 94, 0.04);
  border-left: 2px solid rgba(27, 94, 94, 0.25);
}

.splash .module {
  background-color: #FDF8EC;
  border: 1px solid rgba(200, 151, 26, 0.28);
  border-top: 2px solid #1B5E5E;
}

.splash .module h3 {
  color: #1B5E5E;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-weight: normal;
  letter-spacing: 0.08em;
}

.splash .favorite li:nth-of-type(odd) a {
  background-color: rgba(27, 94, 94, 0.04);
}

.reading h4.viewed {
  background-color: rgba(200, 151, 26, 0.07);
  color: #6B4500;
}

#footer {
  background-color: #163F3F;
  border-top: 4px solid #C8971A;
  color: #8BB5B5;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 0.84em;
  letter-spacing: 0.05em;
  text-align: center;
}

#footer::before {
  content: '\2726  \25C8  \2726';
  display: block;
  color: rgba(200, 151, 26, 0.45);
  font-size: 0.85em;
  letter-spacing: 0.5em;
  padding-top: 0.6em;
}

#footer a {
  color: #C8B87A;
  text-decoration: none;
}

#footer a:hover {
  color: #FAF3E0;
  text-decoration: underline;
}

#footer ul {
  background-color: #163F3F;
}

#footer p {
  color: #7BA8A8;
}

#workskin {
  padding: 1.5em 1.2em;
  font-size: 1em;
}

#workskin p:first-of-type::first-letter {
  font-size: 2.8em;
}

#workskin blockquote {
  margin: 1.2em 0.3em;
}

#workskin h1 {
  font-size: 1.5em;
  letter-spacing: 0.1em;
}

#workskin hr {
  max-width: 95%;
}

#workskin summary {
  min-height: 44px;
  display: block;
  line-height: 44px;
  padding: 0;
}

#main {
  padding: 0.8em;
}

#header .primary a {
  font-size: 0.8em;
  letter-spacing: 0.04em;
}

ol.pagination a {
  padding: 0.2em 0.4em;
}

Workskin (for your own fic text)

The workskin styles the text of works you have written. It will affect how other users see your work, but it does not affect other people's works. You must apply it per-work.

With the workskin active, your fic will have:

A large decorative drop cap on the first paragraph of each chapter
An ornate border frame around the text area with a ✦ ◈ ✦ header
Decorated scene break dividers (just use a standard horizontal rule in your fic HTML)
Styled chapter headings — use h2 for part titles, h3 for sub-sections
Styled blockquotes with a decorative large opening quote mark
Collapsible spoiler boxes using <details><summary>Click to reveal</summary>...</details>

Go to Dashboard → Skins → Create Work Skin. Select Work Skin as the type — this is different from a site skin.
Give it a name (e.g. Alhaitham, Acting Grand Sage) and paste the CSS block below into the CSS field.
When posting or editing a work, scroll down to the Work Skin dropdown under the Associations section and select your new workskin before submitting.

Workskin CSS — click to expand/view

Copy everything in the box below. Please scroll.

#workskin {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  font-size: 1.05em;
  line-height: 1.95;
  color: #2A1A08;
  background-color: #FCF4E4;
  max-width: 760px;
  margin: 0 auto;
  padding: 3em 3.5em;
  box-sizing: border-box;
  border: 2px solid #C8971A;
  position: relative;
  box-shadow: 0 0 0 1px rgba(27, 94, 94, 0.2), 4px 4px 24px rgba(27, 94, 94, 0.1);
}

#workskin::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 7px;
  right: 7px;
  bottom: 7px;
  border: 1px solid rgba(27, 94, 94, 0.28);
}

#workskin::after {
  content: '\2726 \25C8 \2726';
  position: absolute;
  top: -0.7em;
  left: 50%;
  transform: translateX(-50%);
  background: #FCF4E4;
  color: #C8971A;
  font-size: 0.9em;
  padding: 0 0.8em;
  letter-spacing: 0.5em;
}

#workskin p {
  margin-bottom: 1.3em;
  text-align: justify;
  hyphens: auto;
}

#workskin p:first-of-type::first-letter {
  font-size: 3.8em;
  float: left;
  line-height: 0.75;
  padding-right: 0.1em;
  padding-top: 0.05em;
  color: #1B5E5E;
  font-weight: bold;
}

#workskin h1 {
  text-align: center;
  color: #1B5E5E;
  font-size: 2em;
  font-weight: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 0.5em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid #C8971A;
}

#workskin h2 {
  text-align: center;
  color: #8B6500;
  font-size: 1.25em;
  font-weight: normal;
  font-style: italic;
  letter-spacing: 0.1em;
  margin-top: 2.5em;
  margin-bottom: 1.5em;
}

#workskin h2::before {
  content: '\2726  ';
  color: #1B5E5E;
  font-style: normal;
}

#workskin h2::after {
  content: '  \2726';
  color: #1B5E5E;
  font-style: normal;
}

#workskin h3 {
  color: #1B5E5E;
  font-size: 1.05em;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-left: 3px solid #C8971A;
  padding-left: 0.8em;
  margin-top: 2em;
}

#workskin h4 {
  color: #8B6500;
  font-size: 0.95em;
  font-style: italic;
  text-align: center;
  letter-spacing: 0.06em;
  margin-top: 1.8em;
}

#workskin hr {
  border: none;
  border-top: 1px solid rgba(200, 151, 26, 0.5);
  margin: 2.5em auto;
  max-width: 80%;
  position: relative;
}

#workskin hr::before {
  content: '\2726  \25C8  \2726';
  position: absolute;
  top: -0.75em;
  left: 50%;
  transform: translateX(-50%);
  background: #FCF4E4;
  color: #C8971A;
  padding: 0 1em;
  font-size: 0.85em;
  letter-spacing: 0.4em;
  white-space: nowrap;
}

#workskin em {
  color: #7A4F00;
  font-style: italic;
}

#workskin strong {
  color: #1B5E5E;
  font-weight: bold;
}

#workskin strong em {
  color: #C8971A;
}

#workskin em strong {
  color: #C8971A;
}

#workskin blockquote {
  border-left: 4px solid #C8971A;
  border-right: 1px solid rgba(200, 151, 26, 0.3);
  margin: 1.8em 1.5em;
  padding: 0.9em 1.4em;
  background: rgba(200, 151, 26, 0.05);
  color: #4A3010;
  font-style: italic;
  position: relative;
}

#workskin blockquote::before {
  content: '\201C';
  position: absolute;
  top: -0.1em;
  left: 0.3em;
  font-size: 2.5em;
  color: rgba(200, 151, 26, 0.22);
  font-style: normal;
  line-height: 1;
}

#workskin cite {
  color: #1B5E5E;
  font-style: italic;
  font-size: 0.95em;
}

#workskin details {
  border: 1px solid rgba(27, 94, 94, 0.4);
  border-radius: 2px;
  margin: 2em 0;
  padding: 0 1.2em;
  background: rgba(27, 94, 94, 0.03);
}

#workskin summary {
  color: #1B5E5E;
  font-weight: bold;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: block;
  line-height: 44px;
  padding: 0;
}

#workskin summary::-webkit-details-marker {
  display: none;
}

#workskin summary::before {
  content: '\25B8  ';
  color: #C8971A;
  display: inline-block;
}

#workskin details[open] summary::before {
  content: '\25BE  ';
}

#workskin details[open] {
  background: rgba(200, 151, 26, 0.04);
  border-color: rgba(200, 151, 26, 0.5);
  padding-bottom: 0.8em;
}

#workskin details[open] summary {
  border-bottom: 1px solid rgba(200, 151, 26, 0.25);
  margin-bottom: 0.5em;
}

Tips for Using the Workskin

Scene breaks

Use a plain <hr> in your fic HTML for scene breaks. The workskin turns these into decorated dividers with the ✦ ◈ ✦ ornament automatically. In AO3's rich text editor, the horizontal rule button does this for you.

Chapter / part headings

Use <h2> for part or chapter titles inside your fic text. The CSS will centre them and add flanking gold ✦ symbols. Use <h3> for sub-sections — they appear in teal with a gold left border.

Spoiler / content boxes

You can use collapsible boxes anywhere in your fic for spoilers, footnotes, or hidden content. In your fic HTML, put complex HTML on a single line to prevent AO3's formatter from breaking it:

<details><summary>Click to reveal</summary><p>Hidden content here.</p></details>

The drop cap

The drop cap triggers on the very first letter of the first paragraph in the chapter. If your chapter starts immediately with fic text, the drop cap appears on the opening word. This is intended behaviour.

Emphasis colours

Inside your fic, <em> renders in warm amber. <strong> renders in teal. Using both together — <strong><em> — renders in bright gold, useful for titles or dramatic emphasis.

Notes:

This is the first site skin I've made that I actually felt happy enough with to share. I've been tinkering with site skins on and off for a while—a lot of failed experiments, a lot of "why is the header doing that" at 1am—and this one finally came together in a way that felt complete. I originally aimed for a Sumeru Akademiya aesthetic—scholarly! refined!—and then accidentally grafted some Alhaitham vibes onto it. Look. He’s a scribe. He studies for fun. He is the mortal embodiment of an MLA formatting guide. Of course his influence appears the moment I try to make something look orderly. (Alhaitham would judge my CSS, but he would secretly admire the layout hierarchy. I accept this.)

If this moved you, even a little, please consider leaving a kudos or a comment. I'd love to know if anyone installs the skin or uses the workskin on something they're writing—feel free to drop a link.

I've recently realized: I have free will. Which means I've been joyfully and chaotically experimenting with HTML formatting, custom workskins, interactive fic presentation, etc. My plan is to post or update something in this vein weekly OR biweekly: formatted pieces, skins, interactive experiments, small HTML things that probably have no business existing on a fanfiction website but do anyway.

If you want to stay updated on this HTML series, please consider subscribing or bookmarking.

You can find me on Bluesky ( @the_wild_poet25 ) and on Twitter (the_tamed_poet) if you want to connect. I'm also on Discord too!

The comment section also works—feel free to leave a comment! :)

Series this work belongs to:

← Previous Work Part 8 of Izzy's HTML & CSS Experiments Next Work →
Part 1 of HTML/CSS AO3 Skins & Tutorials Next Work →

Actions

Kudos

scarameoww, Starrgaze, feeblescholarr, ViatrixAlatus, passarinho, dawnoftruth, impcat, Cryptid_BYO, puppynokt, chellymabelle, Lunar_eclipse32, Charles_Rockafellor, desdonna, elnayava, asteraceaefaerie, comfy_moony, lumielle, Pixrocker, WhyBotherEatingSauce, Pouick_Pouick, winged_lizard, TheYellow_Mech, L3m0n_C4rd804rd, the_words_we_lost_in_the_edit, giyeah, RichE, Plum26, unkorene, rashoumon_agito, jayxlan, malmond, Helpallthenamesicanthinkofhavebeentaken, 48bees, DemoiSel, SS_681, evrlarcq, disasteria, chaoticsnowflake, Kuronox, DarkLuminosity, akhdkwdh, Amoure_x, LiulfrLokison, kavehs246eyelash, AnonWrites, nicawlette, kkyao, and Infernal_Madness as well as 9 guests left kudos on this work!

Archive of Our Own

Actions

Work Header