Actions

Work Header

Rating:
Archive Warning:
Categories:
Fandoms:
Additional Tags:
Language:
English
Series:
Part 6 of Ellipsus Inspired Site Skins for AO3 , Part 6 of Dark Mode AO3 Site Skins
Stats:
Published:
2025-10-11
Words:
3,394
Chapters:
1/1
Kudos:
1
Hits:
80

Wicked Fog (Ellipsus) AO3 Site Skin

Summary:

A dark mode site skin for AO3 that can be described as "violet haze, spellcraft and séances, smoke curling from cauldrons".

Notes:

I'm not affiliated with Ellipsus, and these site skins are not officially authorised by the Ellipsus product team. I did get permission to create and post them, but the work belongs to me.

I'm also not being paid or compensated for my work in any way. These site skins are not meant to promote Ellipsus, but to express my joy and appreciation for having a writing tool that does exactly what it claims to do, and manages to make all my writing look pretty AF. I want AO3 to look just as pretty, which is why I created these skins.

Basically, I'm a huge fan, and this is a fan work. Nothing more, nothing less.

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

Work Text:

Contents

 

Introduction

So, maybe you've heard of Ellipsus, the free online writing app, and maybe you haven't.

I could go into detail about a lot of its features, but this is not a promotional post. If you're curious, read this review on why it's better than Google Docs, or this review on its collaborative writing features, or this short post about the people behind Ellipsus. You can check out their Tumblr page for some of the new features they're working on, or you can join their Discord server for questions, how-tos, and chatting with other writers.

No, I want to talk to you about COLOUR THEMES.

You see, I've been using Ellipsus since January 2025, and I honestly haven't stopped going absolutely batshit crazy over the wide range of colour themes that I can choose from. I love it so much. New themes get released every few weeks, and they span the gamut from simple sepia or dark mode themes to full-on rainbow gradients. I've even gotten over a painful writer's block on several occasions, just by switching to a different theme that fits my mood and/or my writing better. That there is some powerful stuff!

Which is why I've built a whole series of site skins, to adapt those same colour themes for use on AO3. You can follow the instructions below and copy the code to make your version of AO3 look almost exactly like your favourite Ellipsus theme. Enjoy!

 

Wicked Fog (Ellipsus)

A dark mode theme that's described by Ellipsus as "violet haze, spellcraft and séances, smoke curling from cauldrons".

 

Screenshots

 

Installation Instructions

Follow these steps to install and use the Wicked Fog site skin:

  1. Make sure you are logged in. You can't use site skins without an AO3 account.
  2. Choose "My Dashboard" from the user menu in the upper right corner of your screen.
  3. Choose "Skins" from the menu on the left side of your screen.
  4. Click the "Create Site Skin" button at the top of the page.
  5. Make sure that you are on the "Write Custom CSS" page and that the "Type" drop down list is set to "Site Skin".
  6. Give your skin a title. It has to be unique, but you can get as creative as you'd like.
  7. Description is optional, but may help you remember what the site skin is for when it's in your list of site skins.
  8. Upload a preview. You can download one of the screenshots above this section as your preview, download the icon below (click the link or right-click on the image to save it), or find a different image of your own choosing. You can also skip this step entirely!
  9. Copy all the CSS code from the section below into the CSS field.
  10. Click "Submit".
  11. Scroll to the bottom of the page and click the "Use" button if you want to start using the site skin immediately.
  12. You can always turn the site skin on or off by going to "Skins" in the left hand menu on your Dashboard, and clicking the "Use" or "Stop Using" button next to the skin.

 

If you're already using a different site skin, for example to hide stats, or to use AO3 with a different font, you can keep using that one together with the Wicked Fog site skin!

  1. Create a new site skin following the steps above.
  2. Click "Edit" on the site skin you're currently using.
  3. Scroll to the bottom and click "Advanced".
  4. Scroll to "Parent Skins" and click "Add Parent Skin".
  5. Type in the name of the new skin you've just created.
  6. Click the "Update" button.

 

CSS Code

Click here for the code!

#footer ul.navigation.actions::after {
    content: 'Wicked Fog (Ellipsus) 1.0 by Genly';
    float: right;
    margin-top: 65px;
    color: #6e63a1;
}

body,
.javascript,
#outer {
    background: #27213e;
    color: #c5baf8;
}

ul.tags.commas,
ul.tags,
ul.commas {
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

h2,
.userstuff h2 {
    color: #9f93d5;
}

h3,
.userstuff h3 {
    color: #c5baf8;
    border-bottom: 0.25em double #9f93d5;
}

h5,
.userstuff h5 {
    color: #9f93d5;
}

hr,
.userstuff hr {
    border: 1px solid #6e63a1;
}

span.symbol {
    vertical-align: middle;
    line-height: 2em;
    font-size: 11pt;
}

span.question {
    color: #201b35;
    background: #9f93d5;
    border-color: #151325;
    box-shadow: none;
}

a.help.symbol:hover,
a.help.question:hover {
    background: none;
    border-bottom: none;
}

blockquote,
.userstuff blockquote {
    border-color: #6e63a1;
    color: #c5baf8;
}

table {
    background: #6e63a1;
}

thead tr th {
    background: #201b35;
}

th {
    background: #6e63a1;
}

td {
    background: #6e63a1;
}

tbody tr:hover,
tr:hover,
td:hover {
    background: transparent;
}

.userstuff tbody tr:hover,
.userstuff tr:hover,
.userstuff th:hover,
.userstuff td:hover {
    background: transparent;
    border: none;
}

table,
thead,
tfoot,
tbody tr,
tbody tr:hover,
th,
td {
    border: 1px solid #151325;
}

a,
a:link,
a:visited,
.work .heading a,
.work .heading a:link,
.work .heading a:visited,
.blurb .heading a,
.blurb .heading a:link,
.blurb .heading a:visited,
.preface .byline a,
.preface .byline a:link,
.preface .byline a:visited,
.listbox .heading a,
.listbox .heading a:link,
.listbox .heading a:visited {
    color: #9f93d5;
}

.work .blurb .module h4.heading a:visited,
.bookmark .blurb .module h4.heading a:visited {
    color: #6e63a1;
}

.blurb .module .heading a,
.blurb .module .heading a:link,
.work .blurb .module .heading a[rel=author]:visited,
.bookmark .blurb .module .heading a[rel=author]:visited {
    color: #9f93d5;
}

a:hover,
a:link:hover,
a:visited:hover,
.work .heading a:hover,
.work .heading a:link:hover,
.work .heading a:visited:hover,
.work .module .heading a:hover,
.work .module .heading a:link:hover,
.work .module .heading a:visited:hover,
.work .blurb .module h4.heading a:hover,
.work .blurb .module h4.heading a:link:hover,
.work .blurb .module h4.heading a:visited:hover,
.bookmark .blurb .module h4.heading a:hover,
.bookmark .blurb .module h4.heading a:link:hover,
.bookmark .blurb .module h4.heading a:visited:hover,
.blurb .heading a:hover,
.blurb .heading a:link:hover,
.blurb .heading a:visited:hover,
.preface .byline a:hover,
.preface .byline a:link:hover,
.preface .byline a:visited:hover,
.listbox h3.heading a:hover,
.listbox h3.heading a:link:hover,
.listbox h3.heading a:visited:hover {
    background: #9f93d5;
    color: #201b35;
    border-bottom: 1px solid;
}

a.tag,
a.tag:link,
a.tag:visited {
    color: #9f93d5;
}

a.tag:hover,
a.tag:link:hover,
a.tag:visited:hover,
.listbox .heading a.tag:hover,
.listbox .heading a.tag:link:hover,
.listbox .heading a.tag:visited:hover {
    background: #9f93d5;
    color: #201b35;
    border-bottom: 1px solid;
}

#header {
    background: #151325;
}

#header .heading a {
    color: #990000;
}

#header .primary {
    background: linear-gradient(270deg, #4a465d,#110c2b);
    background-color: #27213e;
    color: #c5baf8;
}

#header .primary a {
    color: #c5baf8;
}

#header .user a,
#header .user a.dropdown-toggle,
#header .user a.dropdown-toggle:link,
#header .user a.dropdown-toggle:visited {
    color: #990000;
}

#header .user a:hover,
#header .user a.dropdown-toggle:hover,
#header .user a.dropdown-toggle:link:hover,
#header .user a.dropdown-toggle:visited:hover {
    background: linear-gradient(270deg, #4a465d,#110c2b);
    color: #c5baf8;
}

#header .menu li a:hover,
#header .menu li a:link:hover,
#header .menu li a:visited:hover {
    color: #c5baf8;
}

#greeting .user li a:hover {
    background: linear-gradient(270deg, #4a465d,#110c2b);
    color: #c5baf8;
}

#header .menu {
    background: #201b35;
}

#header .menu a,
#header .menu a:link,
#header .menu a:visited {
    color: #c5baf8;
    background: #201b35;
}

#header .menu li {
    border-bottom: 1px solid #423e6d;
}

#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a {
    background: #201b35;
    color: #c5baf8;
}

#header .primary .open a,
#header .primary .dropdown:hover a,
#header .primary .dropdown a:focus {
    color: #c5baf8;
}

#header .dropdown .menu a:hover,
#header .dropdown .menu a:focus {
    background: #423e6d;
}

input a,
input a:link,
input a:visited,
input[type="submit"],
.actions a,
.actions a:link,
.actions a:visited,
.action,
.action a,
.action a:link,
.action a:visited,
.action:link,
.actions button,
.actions input,
.actions label,
button,
.current {
    color: #c5baf8;
    background: #201b35;
    border: 1px solid #151325;
}

#header #search .button {
    color: #c5baf8;
    background: #201b35;
    border: 1px solid #151325;
}

.actions a:hover,
.actions a:visited:hover,
.actions button:hover,
.actions input:hover,
.actions a:focus,
.actions button:focus,
.actions input:focus,
label.action a:hover,
label.action a:visited:hover,
label.action:hover,
label.action:visited:hover,
.action a:hover,
.action a:visited:hover,
.action a:focus,
.action:hover,
.action:focus {
    color: #c5baf8;
    background: linear-gradient(270deg, #4a465d,#110c2b);
    border-top: 1px solid #151325;
    border-left: 1px solid #151325;
    box-shadow: inset 1px 1px 1px #27213e;
}

.actions a:active,
.current,
a.current,
a:link.current,
.current a:visited {
    border-color: #151325;
    background: linear-gradient(270deg, #4a465d,#110c2b);
    color: #c5baf8;
    box-shadow: none;
}

a.action.modal-closer:hover,
a.advanced_skin_open.action.hidden:hover,
a.advanced_skin_close.action.hidden:hover {
    border-color: #151325;
    background: linear-gradient(270deg, #4a465d,#110c2b);
    color: #c5baf8;
    box-shadow: none;
}

#footer {
    background: linear-gradient(180deg, #4a465d,#110c2b);
    border-top: 2px solid #201b35;
    color: #c5baf8;
}

#footer .heading,
#footer a,
#footer a:link,
#footer a:visited,
#footer button {
    color: #c5baf8;
    background: transparent;
}

#dashboard {
    margin-top: 15px;
    padding: 1em;
}

#dashboard,
#dashboard a,
#dashboard.own {
    border: none;
    background: #201b35;
    color: #9f93d5;
    font-size: 95%;
}

#dashboard ul {
    border-top: none;
}

#dashboard .current {
    background: linear-gradient(270deg, #4a465d,#110c2b);
    background-color: #201b35;
    color: #c5baf8;
    font-size: 95%;
}

#dashboard a:hover,
#dashboard a:link:hover,
#dashboard a:visited:hover {
    background: linear-gradient(270deg, #4a465d,#110c2b);
    background-color: #201b35;
    color: #c5baf8;
}

.secondary,
#dashboard .secondary {
    background: #27213e;
    box-shadow: none;
    border: 1px solid #27213e;
}

#dashboard .secondary a {
    margin: 5px;
}

#dashboard .secondary a:hover,
#dashboard .secondary a:link:hover,
#dashboard .secondary a:visited:hover {
    background: linear-gradient(270deg,#4a465d,#110c2b);
    background-color: #27213e;
    color: #c5baf8;
}

.filters .expander {
    color: #9f93d5;
}

.filters input:checked + .indicator + span {
    font-weight: inherit;
    background: #423e6d;
    color: #c5baf8;
}

.filters .submit input {
    background: #423e6d;
}

.filters .group dt.bookmarker {
    border: none;
}

li.relationships a,
li.relationships a:link,
li.relationships a:visited,
dd.relationship a,
dd.relationship a:link,
dd.relationship a:visited {
    background: #423e6d;
    color: #c5baf8;
}

.works-show .wrapper li.relationships a,
.works-show .wrapper li.relationships a:link,
.works-show .wrapper li.relationships a:visited,
.works-show .wrapper dd.relationship a,
.works-show .wrapper dd.relationship a:link,
.works-show .wrapper dd.relationship a:visited {
    background: #423e6d;
}

li.relationships a:hover,
li.relationships a:link:hover,
li.relationships a:visited:hover,
dd.relationship a:hover,
dd.relationship a:link:hover,
dd.relationship a:visited:hover,
.works-show .wrapper li.relationships a:hover,
.works-show .wrapper li.relationships a:link:hover,
.works-show .wrapper li.relationships a:visited:hover,
.works-show .wrapper dd.relationship a:hover,
.works-show .wrapper dd.relationship a:link:hover,
.works-show .wrapper dd.relationship a:visited:hover {
    background-color: #201b35;
    background: linear-gradient(270deg, #4a465d,#110c2b);
    color: #c5baf8;
    border-bottom: 1px solid;
}

input,
textarea,
#header input,
select,
input:focus,
textarea:focus,
select:focus {
    background: #c5baf8;
    background-image: none;
    border: 1px solid #151325;
    box-shadow: none;
}

.actions input:focus,
p.submit input:focus {
    background: #6e63a1;
    color: #c5baf8;
}

#header #search input:focus {
    background: #c5baf8;
}

form.simple.search input[type="text"] {
    background: #c5baf8;
    border: none;
    max-width: 11em;
    margin-right: 4px;
}

fieldset,
form dl,
fieldset dl dl,
fieldset fieldset,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
.listbox,
.listbox .index,
fieldset fieldset.listbox,
li.blurb,
dd.hideme,
form blockquote.userstuff,
form dt,
form.single fieldset,
dl.meta,
dl.index dt,
dl.index dd,
.faq .example,
.guideline .example {
    background-color: transparent;
    border-color: #151325;
    box-shadow: none;
}

fieldset,
fieldset fieldset,
fieldset fieldset.listbox,
.listbox.group {
    border: 1px solid #151325;
}

form.filters fieldset {
    background: #201b35;
    border: 1px solid #151325;
}

.works-show .wrapper,
.work .wrapper,
.series-show .wrapper {
    background-color: #201b35;
    border-color: #151325;
    box-shadow: none;
}

.listbox .heading {
    width: 100%;
}

.listbox h3.heading {
    color: #c5baf8;
    border-bottom: 0.25em double #151325;
    width: 100%;
    background: #151325;
}

.listbox h4.heading {
    color: #c5baf8;
    width: 100%;
    background: #151325;
}

.listbox h4.heading a:hover,
.listbox h4.heading a:link:hover,
.listbox h4.heading a:visited:hover {
    background: #6e63a1;
    color: #201b35;
    border-bottom: 1px solid;
}

.listbox h5.heading,
.fandom.listbox h5.heading {
    color: #c5baf8;
    width: 100%;
    background: #151325;
    border-bottom: 1px solid #151325;
}

.toggled h4.heading,
.dynamic h4.heading,
.toggled h5.heading,
.dynamic h5.heading {
    background: transparent;
}

.listbox .heading .action a,
.listbox .heading .action a:link,
.listbox .heading .action a:hover,
.listbox .heading .action a:visited,
.listbox .heading .actions a,
.listbox .heading .actions a:link,
.listbox .heading .actions a:hover,
.listbox .heading .actions a:visited,
.listbox .heading span.actions a,
.listbox .heading span.actions a:link,
.listbox .heading span.actions a:hover,
.listbox .heading span.actions a:visited {
    color: #9f93d5;
    background: linear-gradient(270deg, #4a465d,#110c2b);
}

.listbox h3.heading .action a,
.listbox h3.heading .action a:link,
.listbox h3.heading .action a:visited {
    border: none;
    background: transparent;
    color: #9f93d5;
}

.listbox h5.heading .actions a,
.listbox h5.heading .actions a:link,
.listbox h5.heading .actions a:visited {
    color: #9f93d5;
    font-weight: bold;
}

form.verbose legend,
.verbose form legend {
    background: #201b35;
    border: 1px solid #6e63a1;
    box-shadow: none;
    color: #c5baf8;
}

.autocomplete div.dropdown ul {
    background: #6e63a1;
    border: 1px solid #151325;
    color: #201b35;
}

form li ul.autocomplete li.input {
    border: none;
}

.autocomplete .dropdown ul li:hover,
.autocomplete .dropdown li.selected {
    background: #6e63a1;
    color: #201b35;
}

.required .autocomplete,
.autocomplete .notice {
    color: #201b35;
}

input[type="file"] {
    background-color: inherit;
    box-shadow: none;
    border-color: #151325;
}

.autocomplete .notice {
    margin-top: 0 !important;
    margin-bottom: 0;
    background-color: #6e63a1;
}

p.character_counter {
    color: #6e63a1;
}

.post .required .warnings {
    color: #c5baf8;
    background: #423e6d;
}

.tag,
.required .tag {
    color: #6e63a1;
    padding: 4px;
}

form dd.required {
    color: inherit;
}

.footnote {
    color: #6e63a1;
}

.draft {
    border: 3px dashed #423e6d;
}

.wrapper {
    box-shadow: none;
}

.announcement .action {
    color: #990000;
}

.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed {
    background: none;
    box-shadow: none;
}

label.action {
    padding: 0.3em 0.35em 0.65em 0.375em;
}

.notice,
form .notice,
.comment_notice,
.kudos_notice,
ul.notes,
.caution,
.error,
.comment_error,
.kudos_error,
.alert.flash {
    background: #201b35;
    color: #c5baf8;
    border: 1px solid #151325;
    box-shadow: none;
}

.ui-sortable li,
.ui-sortable li:hover {
    background: none;
    border: 1px solid #151325;
    box-shadow: none;
}

div.comment,
li.comment {
    border: 1px solid #151325;
}

.comment fieldset {
    border-color: transparent;
}

.comment div.icon {
    margin-right: 1em;
    background: #201b35;
    border-bottom: none;
}

.comment div.icon a:hover,
.comment div.icon a:link:hover,
.comment div.icon a:visited:hover {
    background: none;
    border: none;
}

.comment h4.byline {
    background: #201b35;
}

.comment h4.byline a,
.comment h4.byline a:link,
.comment h4.byline a:visited {
    color: #6e63a1;
}

.comment h4.byline a:hover,
.comment h4.byline a:link:hover,
.comment h4.byline a:visited:hover {
    background: #6e63a1;
    color: #201b35;
}

span.unread,
span.replied,
span.claimed,
.actions span.defaulted {
    background: #c5baf8;
    border: 1px solid #151325;
}

span.unread {
    font-weight: bold;
}

span.offered,
span.replied,
.nominations .approved {
    color: #201b35;
}

span.requested,
.nominations .rejected {
    color: #990000;
}

span.offered.requested {
    color: #201b35;
}

.thread .odd {
    background: transparent;
}

.thread .even {
    background: #27213e;
}

.reading h4.viewed {
    background: #201b35;
    color: inherit;
}

span.series .divider,
span.series .position {
    color: #c5baf8;
}

.statistics .index li:nth-of-type(even) {
    background: #201b35;
    border-bottom: 1px dotted #151325;
    border-top: 1px dotted #151325;
}

.bookmark .user {
    border: 1px dotted #151325;
    background-color: #201b35;
}

.bookmark .user .byline {
    background: transparent;
}

.bookmark .count a,
.bookmark .count a:link,
.bookmark .count a:visited {
    color: #6e63a1;
}

.bookmark .count a:hover,
.bookmark .count a:link:hover,
.bookmark .count a:visited:hover {
    background: inherit;
    color: inherit;
    border: none;
}

.toggled form,
.dynamic form {
    border: 1px solid #151325;
    background-color: #201b35;
    box-shadow: none;
    color: #c5baf8;
}

.bookmark .dynamic {
    background: inherit;
}

.toggled form p.footnote,
.dynamic form p.footnote {
    padding: 0 0 15px 0;
    color: #6e63a1;
}

.toggled form .autocomplete li.added,
.dynamic form .autocomplete li.added {
    color: #6e63a1;
}

.picture .header {
    border-bottom: none;
}

#ui-datepicker-div {
    background: #27213e;
    border: 1px solid #151325;
    box-shadow: none;
}

.ui-datepicker table {
    background: #27213e;
}

.ui-datepicker thead {
    border: none;
}

.ui-datepicker-header a:hover,
.ui-datepicker-header a:link:hover,
.ui-datepicker-header a:visited:hover {
    background: #6e63a1;
}

.ui-datepicker th {
    background-color: transparent;
    border-color: #151325;
}

.ui-datepicker td {
    border: 1px solid #151325;
}

.ui-datepicker tr:hover {
    background: #423e6d;
}

.ui-datepicker td:hover {
    background: #423e6d;
}

.ui-datepicker td a,
.ui-datepicker td a:link,
.ui-datepicker td a:visited {
    color: inherit;
}

.ui-datepicker td a:hover,
.ui-datepicker td a:link:hover,
.ui-datepicker td a:visited:hover {
    background: #6e63a1;
    color: #201b35;
}

#modal {
    background: #27213e;
    border: 10px solid #201b35;
}

#modal .content,
#modal .content dl {
    border-color: #151325;
}

.search [role="tooltip"] {
    background: #6e63a1;
    border: 1px solid #151325;
    color: #201b35;
}

.splash .favorite a,
.splash .favorite a:link,
.splash .favorite a:visited,
.splash .favorite li:nth-of-type(odd) a,
.splash .favorite li:nth-of-type(odd) a:link,
.splash .favorite li:nth-of-type(odd) a:visited {
    background-color: #423e6d;
    border-bottom: 1px dotted #151325;
    color: #c5baf8;
}

.splash .favorite a:hover,
.splash .favorite a:link:hover,
.splash .favorite a:visited:hover,
.splash .favorite li:nth-of-type(odd) a:hover,
.splash .favorite li:nth-of-type(odd) a:link:hover,
.splash .favorite li:nth-of-type(odd) a:visited:hover {
    background: linear-gradient(270deg,#4a465d,#110c2b);
    background-color: #201b35;
    color: #c5baf8;
    border-bottom: 1px dotted #151325;
}

.splash .news li,
.splash .module h3 {
    border-bottom: 1px solid #151325;
}

.splash .module h3 {
    color: #990000;
}

#header h2.collections {
display: none;
}

#workskin #work_endnotes,
#workskin .preface .notes,
#workskin .preface .summary {
    font-size: 95%;
}

dl.subscription {
    border: 1px solid #151325;
}

dl.subscription dt {
    background: #201b35;
    padding: 10px;
}

.blurb .header .heading img,
.preface h2.title img,
h2.heading img {
    content: url("https://images.squidge.org/images/2025/09/14/lockblack.png");
}

.blurb .header .heading,
.blurb .header ul {
    width: auto;
}

ul.cloud {
    border: 1px solid #151325;
    padding: 10px;
    background-color: #27213e;
    max-width: 95%;
    background-image: linear-gradient(90deg, #a99fcf 0.1%, #5b4c9f 90%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

ul.cloud a.tag,
ul.cloud a.tag:link,
ul.cloud a.tag:visited {
    border: none;
}

ul.cloud a.tag:hover,
ul.cloud a.tag:link:hover,
ul.cloud a.tag:visited:hover {
    background-color: #6e63a1;
    color: #201b35;
    -webkit-text-fill-color: #201b35;
    -moz-text-fill-color: #201b35;
}

.required-tags .rating-general-audience {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -50px -25px;
}

.required-tags .rating-explicit {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -25px -25px;
}

.required-tags .rating-mature {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -75px -25px;
}

.required-tags .rating-notrated,
.required-tags .category-none,
.required-tags .warning-no,
.status .count {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -150px 0px;
}

.required-tags .rating-teen {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat 0px -25px;
}

.required-tags .category-femslash {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -25px 0px;
}

.required-tags .category-gen {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -50px 0px;
}

.required-tags .category-slash {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat 0px 0px;
}

.required-tags .category-het {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -75px 0px;
}

.required-tags .category-multi {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -100px -0px;
}

.required-tags .category-other {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -125px 0px;
}

.required-tags .complete-no {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -100px -25px;
}

.required-tags .complete-yes {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -175px -25px;
}

.required-tags .warning-yes {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -150px -25px;
}

.required-tags .warning-choosenotto {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -125px -25px;
}

.required-tags .external-work {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -75px -50px;
}

.status .private .text {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -175px -50px;
}

.status .public {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -125px -50px;
}

.status .hidden {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -150px -50px;
}

.status .rec {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -100px -50px;
}

.index .skins .icon {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat 0px -580px;
}

.index .mystery .icon {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -110px -525px;
}

.index .tag .icon,
.index .tagset .icon {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -55px -580px;
}

.tag .primary .icon,
.tagset .primary .icon {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat 0px -275px;
}

.comment .icon .anonymous {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -0px -735px;
}

.comment .icon .visitor {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat 0px -635px;
}

.abbreviated .icon .anonymous {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat -75px -450px;
}

.abbreviated .icon .visitor {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat 0px -450px;
}

.skins .primary .icon {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat 0px -175px;
}

.admin .primary .icon {
    background: url("https://images.squidge.org/images/2025/10/11/imageset-wickedfog.png") no-repeat 100px -75px;
}

 

Version History

If you are already using this skin and wondering if you have the most up-to-date version, check the page footer! It will show the version number of the code you copied. To update to a newer version, simply copy the CSS code above, edit your existing site skin, and replace all the code in there with the code you've copied.

  • 2025/10/11
    Wicked Fog (Ellipsus) 1.0 (current version)
    initial release

↑ Back to top

Notes:

Icons created by seraphet.

Many thanks to the Ellipsus team, for designing the original theme that this skin is based on, and for giving me permission to recreate it for AO3.

Additional thanks to the people on the Erotica Abyss Discord server, among others Booleanean, EfOvEs, LameCinnamon, Vesper and Treachery, who allowed me to ramble on and on about weird bugs in the code and graciously tried out early versions of this skin.

If you have questions, if you encounter something that doesn't work as it should, or if you just want to let me know what you think of this site skin, drop me a note in the comments! I'd love hearing from you! ♥️