How to add formatting to your AO3 Dashboard
If you want to personalise your AO3 Dashboard, see below for step-by-step instructions on how to change your site skin
- I have provided a detailed site skin in hideous colours so that you can identify which pieces of code affect which parts of the screen.
Background
The default AO3 dashboard has basic colours, layout and formatting, designed to ensure your dashboard loads quickly, rather than to be eye-catching.
Personally, I don’t like the default dashboard as I find it difficult to read and rather boring in comparison to the stories. I’m also not a fan of the alternatives that AO3 offers for situations like impaired vision. (If you want to see these AO3 options, they are listed on the footer of your dashboard.)
Since the only person who can see your AO3 dashboard is you, changing the look and feel is completely about making it fun for your own enjoyment. This is where Site Skins are useful.
Like Work skins, applying a Site Skin to your dashboard is relatively easy. In some ways, Site Skins are easier to set up than work skins, given you just write them and click ‘use’. However, I have found them more temperamental. For that reason, unless you are confident with coding, I would recommend you limit the changes to the code I’ve provided. This can still provide you with lots of customisation opportunities, such as adding your own images to the header, colours to the screen, and different fonts.
Hopefully, this article will explain how to add AO3 site skins to your dashboard in a sensible way.
Terminology
What exactly is a Site Skin?
A Site skin is a file containing the instructions to change the way your browser displays the AO3 dashboard. The code format is similar to AO3 Work Skins, but you are the only person for whom the formatting changes are visible. If you want to share your site skin with someone else, you will need to send them the code – and instructions on how to apply it.
This article will aim to give you some site skins that you can understand – and change to suit your own tastes!
Creating the Site Skin
Step One: Open the Skins menu option
Go to your AO3 Dashboard and look at the left hand side of the screen.
Put “ABCSITE” in the Title field to name the new Site Skin, where ABC is yourname.
- Add the Code
We are going to copy and paste my code into your CSS box to create a basic site skin.
When you do, leave a line between each group of code so that it looks a bit like this.
This skin looks absolutely hideous, but it’s like this for a reason. Below is the annotated code. The colours are to help you understand which bit of code formats which part of the display. I would recommend making two skins. One for reference, and the other one to play with. Begin with the same code in both.
Pale Green text are the annotations / comments I have made about the code.
/* In this first section of code, various elements on the standard AO3 header are removed. The code identifies the elements on the screen it wants to format and selects an option not to display them. Specifically, the <h1> tag defines the most important heading on a webpage. #header h1 sup selects the element <sup></sup> ready for styling. In this instance, the sup is a superscript “Beta” alongside the Archive of Our Own title.
Similarly, the other #header lines select elements of the main header, including the AO3 logo. The line display:none ensures that these elements are hidden from the screen. If you were to change the line to display: inline, the AO3 logo and other parts of the element would be revealed.
Most elements are self-explanatory, but for clarity, Landmark is the bar on which the Archive of Our Own title sits and button is the search button near the gravestone image. This is hidden when the code is active.*/
#header h1 sup,
#header .button,
#header .landmark,
#header .logo {
display: none;
}
/* The next header command formats part of the inner container of the header defined as ‘inner.wrapper’, giving it margins of 0 and 2%. Increasing these margins squeezes the central working space. 2% is fine!*/
#header,
#inner.wrapper {
margin: 0em 2%;
}
/* Similar to C++, #main specifies the main content of the document. You won’t see some of this when working on Skins on the dashboard screen, as the formatting may apply to the Works screen. In this situation, the sections listed are the listbox, the index, the works, list boxes for relationships etc. All these sections have been given the same background colour. */
#main,
.listbox .index,
.work.own,
li.relationships a,
.thread .even {
background: #C6EAC3;
}
/* The next section of code specifies the text colour for the main body of text on this screen. This is easiest to understand if you colour it red.*/
body,
#main {
color: red;
}
/* The ‘outer wrapper’ is the part of the screen not governed by the main box in the middle. In this case, everything else on the screen! Padding at the top stops the main header image from encroaching on the outer image bar at the very top. This image listed in the example code below is a picture of three ghosts on a green background. Like most of the images in my examples, these were created in Canva.
Since we only want the image to appear once across the top, the repeat information is set to no-repeat. The dimensions for the image are 100% across, 2 % down. Sizings are given in percentages to enable different devices to scale the image. Although recommended for most situations, percentages don’t always work. Sometimes you can get away with px sizings and when dealing with text and text boxes – for example box shadows – the unit of scaling should be em (where 1em is 100% of the default font size).
The background colour refers to anything which isn’t in the header image. This is easier to understand if you colour it blue. */
#outer.wrapper {
padding-top: 16em;
background-color: blue;
background-image: url(“https://64.media.tumblr.com/8dfb295de22717067519c8abd3a0a015/d83b646000cf16f8-02/s1280x1920/3dab190947908c46975c2ceeb080b2d1a71105fb.gif”);
background-repeat: no-repeat;
background-size: 100% 2%;
}
/* Between the outer wrapper and the central body there is an inner wrapper (not to be confused with the inner wrapper for the header box we have already encountered. The padding for this is based on text sizing, so is given in em units. I’ve coloured it orange.*/
#inner.wrapper {
padding: 2em 0.5em 0.5em 0.5em;
background: orange;
}
/* This reference to a heading is for the area between the ghost image bar and the main text (ignoring the padding from both boxes. You can see which part of this specifically if you dramatically reduce the height. It is, in essence, the second image on the screen – the picture of Lucy and Lockwood in a dark corridor. Here, the background colour is given as none – because it isn’t needed. However, if you did set it to purple, you will see the small slither of purple on the left hand side where the dimensions don’t quite fit. */
#header .heading {
height: 30em;
background: none;
}
/* The formatting for the heading in Main is contained in this next section. For the image we are using, a background colour is irrelevant, but it has been set to transparent. The Lucy & Lockwood image has been added.
Since we only want to see the image once on the screen, it is set to no-repeat.
The background-size is an interesting one. If you are viewing this page on a desktop it makes little difference whether you set the size to cover or contain. If you are viewing it on a mobile phone, it makes a LOT of difference. Contain will mean you can see all the banner image, but it will also mean you don’t get the alignment right with the menu options. */
#header {
background-color: transparent;
background-image: url(“https://64.media.tumblr.com/559c9722bb3c1bcb169e46eeea79b73c/12b672d5c6315bb7-45/s1280x1920/360a52cd39fa29a88543bcd08ccc236bbc5a1734.gif”);
background-repeat: no-repeat;
background-size: cover;
}
/* This next, extra piece of main code puts a border around the body text. To make it show up, I’ve made it 10px and purple*/
#main {
border: 10px solid purple;
}
/* The following section of code relates to the menu option on the left of the header. You can see the area by colouring the background lime green. The width and height relate to the box as well. Its position is set to absolute. This means it tracks an earlier defined element and its position relates to that earlier element.*/
#header .primary {
background: lime;
color: #549959;
width: 12em;
height: 9em;
position: absolute;
top: 18.5em;
left: 0.3em;
box-shadow: none;
}
/* This code related to the drop down menu. It gives a minimum size so that the text is guaranteed to fit on itfff. */
#header .dropdown .menu {
min-width: 19em;
}
/* This is relating to the first option on the menu “Fandoms”. Adding Yellow, shows you where. */
#header .primary li:first-child {
Background: yellow;
margin-left: 0em;
}
/* This section formats the search box. Once again, I’ve coloured it purple and because I didn’t like the positioning (it was too far to the right), I have adjusted it using the command right: 1em.) */
#header #search .text {
width: 10em;
background: purple;
border: 1px solid #549959;
position: absolute;
top: 3em;
right: 1em;
}
/* This code colours the font in the greeting box on the right hand side. */
#greeting li,
#greeting li a {
color: #549959 !important;
}
/* This code colours the font on the drop down menu */
#header .primary li,
#header .primary li a {
color: #064517 !important;
}
/* This formats the greeting box. The top and right positions relate to where the greeting box is on the screen. By making the top 18.5em and the right 3em, we can mirror the position of the search box on the left hand side. “Position” relates to the top left corner of the box in relation to the whole header. If we alter the margin-right command, it squeezes the box away from the right hand side of the screen. Again, adding width and height values allows the box to mirror search box on the other side. However, this box will have an icon in it, so the proportions will need to be slightly different.*/
#greeting {
background: brown;
border: 2px solid #E6F6E6;
position: absolute;
width: 12em;
Height: 8em;
top: 18.5em;
right: 3em;
margin-right: 0em;
}
/* The next few lines are about the menus which appear when you hover over the options in the greeting box. I don’t recommend playing with the layout of these. If you wanted to have the options underlined, you might want to alter the border-bottom line by changing the 0 value to 1px. You could also change “dashed” to Solid or another style, and set a colour for the line. At this point, the code is only changing margins. The code for changing colours and hover colours is below.*/
#greeting li {
clear: left;
border-bottom: 0 dashed #E6F6E6;
margin-top: 0.4em !important;
}
#greeting .dropdown .menu li {
margin: 0 0.125em !important;
}
#greeting .menu {
width: 16em;
}
/* The code below is for the AO3 icon on the right menu box. I want to remove it completely, however, if you want it to be displayed, the code would look something like this: #greeting .icon img {border: 4px solid magenta; margin-right: 8px;}*/
#greeting .icon img {
display: none;
}
/* This section of code formats the replacement for the AO3 logo in the right hand menu box. In this case, I’ve added a cartoon skull. The Skull image was created in Canva, saved as a gif with a transparent background and then loaded into Tumblr as the hosting site. I then reference the image in the line ‘background-image: url’.
Because I didn’t want the image to appear more than once, I then specified ‘no repeat’. The image needs to fill the container it is sitting in, so the dimensions in background-size and the width and height dimensions need to match.
Finally, the image position is linked to the top left corner of the comment box. */
#greeting::before {
background-image: url(“https://64.media.tumblr.com/988f452fc4053e40593429efa1f0fc32/82e6e0add1b42a64-cf/s540x810/a0a3e066689e340a909b7b28f3d64447a67708d9.gif”);
background-repeat: no-repeat;
background-size: 50px 55px;
width: 50px;
height: 55px;
content: “”;
position: absolute;
left: 12px;
top: 24px;
}
#header .heading a {
font-size: 5em;
line-height: 1.2em;
text-transform: titlecase;
letter-spacing: .1em;
color: #E6F6E6;
position: absolute;
left: 0em;
top: -1.5em;
}
/* Just as you can have a header image, so you can also have a footer image. In this case, I have repeated the corridor image. This works well as the text overlayed is white, and the image is predominantly dark. If you use a light image for your footer, you will need to alter the text colour in the footer. */
#footer {
background-image: url(“https://64.media.tumblr.com/559c9722bb3c1bcb169e46eeea79b73c/12b672d5c6315bb7-45/s1280x1920/360a52cd39fa29a88543bcd08ccc236bbc5a1734.gif”);
background-repeat: no-repeat;
background-size: cover;
border: none;
}
/* This applies a dark green to several elements of the workskin, and specified their header types. From this point on, much of the code is about the format of the dropdown menus. Their size and shape has been determined previously. This is about assign colour and other formatting.*/
#workskin h2,
.preface h3 a,
.system .latest h3,
.splash .module h3,
.system .tweets h3 {
color: #549959;
}
/* This applies the pale green to any text which is a h4 link. Here I’ve highlighted it in pink. */
.blurb h4 a:link {
color: pink !important;
}
.splash .favorite li:nth-of-type(odd) a {
background: #E6F6E6;
}
/* This code relates to any hover function, changing the background to pink. When pink, the text changes to white. */
.splash .favorite li:nth-of-type(odd) a:hover,
.splash .favorite li:nth-of-type(odd) a:focus,
a.tag:hover,
a.tag:focus,
#dashboard a:hover,
#dashboard a:focus,
#dashboard .current,
#header .dropdown .menu a:hover,
#header .dropdown .menu a:focus {
background: pink !important;
color: #fff !important;
}
/* This code changes the dropdown menu colours, when not clicked or hovering. I have coded this gold. Subsequent sections change the colours in certain circumstances.*/
#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
#header .dropdown .menu a,
#header .dropdown .menu,
#greeting .dropdown .menu,
#greeting .dropdown .menu a {
background: gold !important;
color: #043005 !important;
}
#header .dropdown .menu,
#greeting .dropdown .menu {
border: 1px solid #549959;
}
#greeting .current,
#greeting .dropdown:hover li,
#greeting .dropdown:focus li {
box-shadow: none;
background: #E6F6E6 !important;
color: #043005 !important;
}
/* This section formats the left hand dashboard column. In this case, I have coloured it magenta (apologies for that!). It has box-shadows set in black and dark green. The actual border is white.*/
#dashboard.own,
#dashboard {
background: magenta;
box-shadow: 0 0 2px #000;
color: #043005;
border: 2px solid white;
}
/* Within the dashboard column there are different sections. This code formats the border around them and colours the background. */
#dashboard ul {
background: lightblue;
border: none;
}
/* There are now several sets of code which change the colour to different areas of the screen. I would recommend the same approach as I have above if you want to identify exactly which bit of code affects which bit of the display. Change the colour to something really bright and it will get highlighted. From now on, I’ll only identify new bits of syntax. */
#dashboard .secondary {
background-color: rgba(250,250,250,0.7);
box-shadow: none;
}
.splash .module h3,
.splash .news li,
.home .header h2,
li.comment,
dl.meta,
.bookmark .user,
#header .menu li,
#dashboard ul,
#dashboard .secondary,
ul.notes,
.flash,
.notice,
tbody tr,
thead td,
#header #small_login,
fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
form dt,
.actions a:active,
.current,
a.current,
.current a:visited,
.search span.tip,
.listbox,
fieldset fieldset.listbox {
border-color: #549959;
}
#main .verbose legend,
.unread,
.child,
.unwrangled,
.unreviewed,
.verbose fieldset,
.draft,
form ul.notes,
#modal,
.ui-sortable li,
.comment_notice,
.kudos_notice,
div.dynamic,
#ui-datepicker-div,
.ui-datepicker table {
background-color: #c7b9b5;
border-color: #549959;
}
.flash,
.notice {
background-color: #549959;
color: #fff;
border-color: #000;
}
.flash a,
.notice a {
color: #fff;
}
form .notice,
ul.notes,
.caution {
background-color: #FFEEDA;
border-color: #45769e;
color: #043005;
}
form .notice a,
ul.notes a,
.caution a {
background-color: #FFEEDA;
border-color: #45769e;
color: #043005;
}
.alert.flash,
.error,
.comment_error,
.kudos_error {
background: #efd1d1;
color: #000;
border-color: #900;
}
/* This code is for changing the font size and margins around it. */
h2 {
font-size: 1.286em;
line-height: 1;
margin: 0.5375em 0;
}
.comment h4.byline {
background-color: #83B77C;
}
.listbox,
.bookmark .user,
.bookmark .user .header,
.reading h4.viewed,
.dropdown,
fieldset fieldset.listbox,
fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
.dynamic form fieldset,
.toggled form fieldset,
.toggled form dl,
.secondary .toggled form,
.secondary form,
.required .autocomplete {
background-color: #e3dbd9;
}
.filters .submit input {
color: #FFF;
background: #9c908e;
box-shadow: 0 0 4px #000;
border: none;
}
li.blurb,
.listbox li.blurb,
li.comment,
.statistics .index li:nth-of-type(even),
dl.meta,
dl.index dd,
#ibox_wrapper,
#ibox_content,
textarea:focus,
input:focus,
select:focus {
background: rgba(250,250,250,0.7);
}
textarea,
input,
select,
option,
.toggled form,
.dynamic form,
.autocomplete .dropdown ul,
.autocomplete .dropdown ul li,
.autocomplete input {
background-color: #fff;
}
/* These sections of code is interesting because it has a new line of formatting to a text box. As well as giving the box a slight shadow and a border, the box is also given rounded corners using the border-radius code. If you want to identify which box is being changed, try changing the colour of the box border.*/
li.blurb,
.listbox li.blurb {
box-shadow: 0px 0px 4px #000;
border: 2px solid #549959;
border-radius: 10px;
}
.bookmark .user {
border-radius: 5px;
}
.blurb .header {
border-bottom: 1px solid #549959;
}
.bookmark .user .module {
border: none;
}
.reading h4.viewed,
.bookmark .user {
box-shadow: none;
}
.reading h4.viewed {
border: 1px dashed #549959;
}
/* On some versions of site skins, this is a second AO3 icon. If you want to display this, use the code: .icon {
border: 2px solid #fff;
}. If you don’t, use the following code. */
.icon {
Display: none;
}
.comment div.icon {
border-bottom: none;
}
#workskin .notes,
dl.meta,
.reading h4.viewed,
.bookmark .user,
.comment .posted,
.comment .edited {
font-size: 90%;
}
#workskin {
text-align: justify;
}
#workskin h2 {
font-size: 2.7em;
}
ul.tags li.warnings,
ul.tags li.relationships,
ul.tags li.characters,
ul.tags li.freeforms {
float: left !important;
margin: 0;
padding: 2px;
}
li.warnings + li.relationships,
li.relationships + li.characters,
li.characters + li.freeforms,
li.warnings + li.characters,
li.warnings + li.freeforms,
li.relationships + li.freeforms {
clear: left;
}
/* Here you can change the font of the Warnings and other titles on the dashboard. */
ul.tags li.warnings:first-child:before {
content: “Warnings: “;
color: #000;
font-family: Verdana,serif;
font-weight: 600;
}
li.warnings + li.relationships:before {
content: “Relationships: “;
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}
li.relationships + li.characters:before {
content: “Characters: “;
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}
li.characters + li.freeforms:before {
content: “Other tags: “;
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}
li.warnings + li.characters:before {
content: “Characters: “;
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}
li.warnings + li.freeforms:before {
content: “Other tags: “;
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}
li.relationships + li.freeforms:before {
content: “Other tags: “;
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}
/* Although the same font as the other titles, this section makes the text for the ‘About’ section slightly smaller than the other sections. In this case 95% smaller. The code can do this because it is structured as a pseudo child section of code. This enables you to isolate parts of the text for targeted formatting. You can tell the pseudo child code by the ‘::’ lines.*/
li.blurb blockquote p:first-child::before {
content: “About: “;
color: #000;
font-size: 95%;
font-family: Georgia,serif;
font-weight: 600;
}
.blurb ul.series::before {
content: “Series: “;
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}
.blurb .fandoms::before {
content: “Fandom: “;
color: #000;
font-family: Georgia,serif;
font-weight: 600;
}
#header h2 {
background-color: #B9848C !important;
margin: 0.1em auto;
border-top: 1px solid #E6F6E6;
border-bottom: 1px solid #E6F6E6;
clear: right;
}
/*This final piece of code relates to the icon at the top of the main box. In this case, a second cartoon Skull image. If you want to remove it, you change the following code to {display: none;}. */
.home .primary .icon::after {
background-image: url(“https://64.media.tumblr.com/b88970999397ffc78bac1cb5d0abc62b/61194217dcc27100-d8/s1280x1920/2614e9346e49b702d74abdfa9947e2c55af76ee1.gif”);
background-size: 70px 100px;
display: block;
width: 70px;
height: 100px;
content: “”;
position: absolute;
left: 10px;
top: 1px;
}