Archive of Our Own

Chapter Text

This tutorial will give you a complete explanation of what each code in a site skin does. You will be able to change the background color, the text style and font family of the various parts of the site by editing the codes below.

You can also change the style of the story you're reading through your siteskin (thanks to user MiaDiAngelo for asking!).

I know that you can easily create a site skin using the wizard, sparing yourself the pain of messing with CSS, but the wizard doesn't allow you to use a gradient background, nor to give the text a neon effect. But using these codes, you can do it!

Also, just by changing the font family in the font-family line, you can have fun with using custom fonts downloaded from the net in your site skin, like the cute and elegant Autumn Flowers (you can find it here), the creepy Them People (you can find it here) or the cowboy style Gashroad (you can find it here). All you need to do is to write the line like this, where xxx is the full name of the custom font:

font-family: 'xxx', personal;

So, for example, for the Autumn Flowers font, it will be font-family: 'Autumn Flowers', personal;

If you want to have the site all with gradient text, you can check my tutorial specific for it here, which contains the ready to use codes along with complete siteskins for gradient text.

I used random colors for the background of each code here, simply to give you a better chance to see which code does what.

For info about new fonts, neon text and more, you can also check my CSS GUIDES series: it’s more focused on work skins, but many codes in them can also be applied to site skins.

One thing I recently discovered is that you can also use an image or a gif as background for many parts of the site, for example using this code you will add a sparkling rainbow gif background to the level of the dashboard when you hover over it (I'm also making the text in bold so it's more visible):

#dashboard a:hover {
  background: url('https://c.tenor.com/0Z8FOS08wkgAAAAd/tenor.gif');
  color: #000000;
  font-weight: bold;
  border: 2px solid #006400;
  border-radius: 20px;
}

And now, onwards to the codes!

This code affects the greetings (“Hi, xxxx!”, “Post” and “Logout”). For this example, I changed the font to Lucida Calligraphy in size 16px and gave it a neon orange effect (black background, white text and orange text-shadow):

#header #greeting a {
  font-family: Lucida Calligraphy, cursive;
  font-size: 16px;
  background: #000000;
  color: #ffffff;
  text-shadow: 0 0 3px #FF9933, 0 0 5px #FF9933, 0 0 7px #FF9933, 0 0 9px #FF9933, 0 0 11px #FF9933, 0 0 13px #FF9933;
}

If you want the text of the header and greetings (and the text of their dropdown menu) to be centered, you need to add this code to the siteskin:

#header a,
#header .primary a,
#header .dropdown .menu a,
#header .primary .dropdown a {
display: flex;
align-items: center;
}

This code affects the four buttons of the menu on the left (“Fandoms”, “Browse”, “Search”, “About"), giving the same style to all the :

#header .primary li,
#header ul a.dropdown-toggle {
  background: #00ff00;buttons
  border: solid 2px #1e90ff;
  color: #0000ff;
}

To change the background color and/or text style of the dropdown menu of the four buttons on the left (“Fandoms”, “Browse”, “Search”, “About”) you need this code:

#header .primary .open a,
#header .primary .dropdown:hover a,
#header .primary .dropdown a:focus,
#header #search input:focus,
#header #search input:hover {
  background: linear-gradient(to top right,  #392CC6, #0B1A8A, #392CC6, #0B1A8A, #392CC6, #0B1A8A, #392CC6, #0B1A8A, #392CC6, #0B1A8A);
  color: #ffff00;
}

This will give the same style to all the dropdown menu.

If you want to give each menu title in the header a different style (text color, font, background), you need to use these codes:

code for the menu "Fandoms" (I'm making it pink, bolded and in font Arial):

#header .primary .dropdown:nth-of-type(4n+1) a {
  color: #ff1493;
  font-weight: bold;
font-family: Arial, sans-serif;
}

code for the menu "Browse" (I'm making it yellow, bolded, with a blue background and in font Lucida Calligraphy)

#header .primary .dropdown:nth-of-type(4n+2) a {
  color: #ffff00;
  background: #0000ff;
  font-weight: bold;
  font-family: Lucida Calligraphy, cursive;
}

code for the menu "Search" (I'm making it green, bolded and in font Courier New)

#header .primary .dropdown:nth-of-type(4n+3) a {
  color: #00ff00;
  font-weight: bold;
 font-family: 'Courier New', monospace;
}

code for the menu "About" (I'm making it blue and bolded)

#header .primary .dropdown:nth-of-type(4n+4) a {
  color: #1e90ff;
  font-weight: bold;
}

code for the greeting (the part "Hello, xxx!", I'm making it orange, bolded and in font Lucida Callligraphy)

#greeting .dropdown:nth-of-type(2n+1) a {
  color: #ffa500;
  font-weight: bold;
font-family: Lucida Calligraphy, cursive;
}

code for the menu "Post" (I'm making it purple and bolded):

#greeting .dropdown:nth-of-type(2n+2) a {
  color: #800080;
  font-weight: bold;
}

If you only use these codes, the dropdown menu will have the same text style as the menu title.

If you want to also give a different style to each level of the dropdown menu, then you need to add these codes:

#outer #header .dropdown-menu li:nth-of-type(6n+1) a {
  color: #ff0000;
  font-weight: bold;
  background: #00ff00;
}

#outer #header .dropdown-menu li:nth-of-type(6n+2) a {
  background: #ff1493;
  color: #ffffff;
  font-family: 'Courier New', monospace;
}

#outer #header .dropdown-menu li:nth-of-type(6n+3) a {
  color: #1e90ff;
  background: #ffff00;
}

#outer #header .dropdown-menu li:nth-of-type(6n+4) a {
  background: #ffa500;
  color: #000000;
}

#outer #header .dropdown-menu li:nth-of-type(6n+5) a {
  color: #006400;
  background: #ffff99;
}

#outer #header .dropdown-menu li:nth-of-type(6n+6) a {
  color: #8b0000;
  background: #FFCCE6;
}

And this code changes the "Logout" button when you hover over it (I'm making it with a pastel rainbow gradient background and rounded black border):

#greeting .user > li:nth-of-type(3n+3) a:hover {
  background: linear-gradient(to right, #ff99cc, #ffcc66, #ffff66, #aaff80, #99ccff, #cc99ff);
  color: #000000;
  border: 1px solid #000000;
  border-radius: 20px;
}

This code affects the search bar on the right, under the greetings:

#header fieldset input#site_search.text {
background: linear-gradient(to bottom, #FF355E, #FF9933, #FFFF66, #66FF66, #50BFE6);
color: #000000;
}

This code changes the background color of the main page:

#header .primary,
#inner.wrapper,
#main,
#inner,
body,
.listbox .index,
li.relationships a {
background: #ff1493;
border: solid 2px #ff1493;
color: #000000;
}

This code affects the background of the Ao3 logo on the left upper part of the site. You can change it or ignore it directly:

#header .heading {
background: #ffff00;
border: solid 2px #ffff00;
color: #000000;
}

This code affects the background around the greetings on the upper right side of the site:

#header {
background: #FF9933;
border-right: solid 2px #FF9933;
border-left: solid 2px #FF9933;
border-top-right-radius: 10px;
  border-top-left-radius: 10px;
color: #000000;
}

This code affects the part of the greetings around the profile picture. It’s a very small part of the site, but if you want to have all the upper part be in the same shade of color, you can add it and apply the same background color as the fifth and sixth codes.

#greeting {
color: #000000;
border: solid 2px #1e90ff;
background: #00ff00;
}

This code affects only the dropdown menu of the buttons “Fandoms”, “Browse”, “Search” and “About” and the dropdown menu of the greetings as a whole, plus it changes the looks of said buttons but only when you hover over them. In this example, I gave them a gradient border like I would do for a text box (you can find more info about text boxes and borders here):

#header .dropdown:hover a,
ul.menu.dropdown-menu {
  background: #ccff00;
  border: 5px solid transparent;
  border-image: linear-gradient(to right, #081c85, #096979, #00d4ff, #081c85);
  border-image-slice: 1;
}

This code affects the notes that appear for example when you apply a siteskin (“You preferences were successfully updated”):

.flash,
.notice {
background-color: #ffffff;
border: solid 2px #1e90ff;
color: #000000;
}

This code affects the main background of the “Search and filter” column on the right side of the site, plus the outer mask of the list box for the "Fandoms", "Works" and "Bookmarks":

.listbox,
.draft,
.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: #ffffff;
color: #000000;
}

This code affects the boxes containing each single work, series and bookmark, plus the comments of uneven numbers (the first comment, the third comment and so on) and the upper part of a work page (the one containing the rating, the warnings, the category, the tags, the language, the series and the stats):

li.comment,
#ibox_wrapper,
#ibox_content,
textarea:focus,
input:focus,
select:focus,
li.blurb,
.listbox li.blurb,
.statistics .index li:nth-of-type(even),
dl.meta,
dl.index dd {
background: #9C51B6;
color: #ffffff;

}

This code affects the comment box and the comments in even numbers (the second comment, the fourth and so on), plus the dropdown menu of the “Sort by” button and the additional tags boxes in the “Sort and filter” column:

.work.own,
.thread .even,
.bookmark .user,
.bookmark .user .header,
textarea,
input,
select,
option,
.toggled form,
.dynamic form,
.autocomplete .dropdown ul,
.autocomplete .dropdown ul li,
.autocomplete input {
background: #1e90ff;
border: solid 2px #1e90ff;
color: #000000;
}

This code affects the datetime of the works

.blurb .datetime {
color: #000000;
background: #93DFB8;
}

This code affects the “Search” button of the search field on the right upper side of the site, the buttons “Works”, “Bookmarks” and “Favorite tag” on the right side of the site, all the buttons of the skin pages (“My Site Skins”, “My Work Skins”, “Public Site Skins”, “Public Work Skins”, “Edit Skin”, “Use”, “Preview”, “Edit”, “Delete”), the buttons "Post new”, “Edit works”, “Subscribe”, “Invitations”, “Expand fandom list” and all the buttons at the top and at the bottom of a work.

#header input[type="submit"],
#main .actions a,
#main .actions a:visited,
#main .action,
#main .actions input,
#main input[type="submit"],
#main .actions label {
background: linear-gradient(to bottom right, #7CD1FF 24%, #78FF95 43%, #7CD1FF 66%, #78FF95 77%);
color: #000000;
border: solid 2px #1e90ff;
}

This code affects the currently used button

#main .current {
background: #ffffff;
color: #1e90ff;
border-color: #1e90ff;

}

This code affects the relationship tags (like “Urameshi Yuusuke/Yukimura Keiko”)

li.relationships a.tag {
background: linear-gradient(to right, #F8295A 0%, #FFA500 25%, #EAE326 50%, #37EA1B 75%, #2A97EA 90%, #B926F8 100%);
}

This code will change the text color and/or background color of the relationship tags when you hover over them

li.relationships a:hover,
li.relationships a:visited:hover,
dl.meta dd.relationship a.tag:hover,
dl.meta dd.relationship a.tag:visited:hover {
background: #C39953;
border: 1px solid #ff0000;
color: #ffff00;
}

This code affects the character tags

li.characters a.tag {
background: #ff0000;
}

This code will change the text font/color and/or background color of the character tags when you hover over them

li.characters a:hover,
li.characters a:visited:hover,
dl.meta dd.character a.tag:hover,
dl.meta dd.character a.tag:visited:hover {
  background: #BD8260;
  color: #0000FF;
  font-weight: bold;
  text-shadow: none;
}

This code affects the freeform tags. Here I made the text in font Papyrus, in bold, color yellow (#ffff00) and size 14px.

li.freeforms a {
  background: #738276;
  font-family: Papyrus, fantasy;
  font-size: 14px;
  color: #ffff00;
font-weight: bold;
}

This code will change the text color and/or background color of the freeform tags when you hover over them

li.freeforms a:hover,
li.freeforms a:visited:hover,
dl.meta dd.freeform a.tag:hover,
dl.meta dd.freeform a.tag:visited:hover {
  background: #ffffff;
  color: #006400;
  font-weight: bold;
  text-shadow: none;
}

This code affects the buttons in the "Sort and filter" column on the right side of the page (if you want each level of the "Sort and filter" column to have a different font/color/background and/or add small emoticon and emoji at the sides of each level, you need to switch this code with the codes in the next chapter):

The next six codes will affect the dashboard on the left side of the site. I gave each level of the dashboard a different gradient background here, but you can choose to make it all in the same shade of color. I also made the tex use the font Courier New in bold and in size 16px and made the text yellow (color #ffff00) for the third and fourth level of the dashboard.

#dashboard li:nth-of-type(6n+1) a {
  background: linear-gradient(30deg, #FF0000 0%, #FFA500 25%, #05C1FF 50%, #FFA500 75%, #FF0000 100%);
  color: #000000;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
}

#dashboard li:nth-of-type(6n+2) a {
  background: linear-gradient(to right, #39B3CF 0%, #00FF00 100%);
  color: #000000;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
}

#dashboard li:nth-of-type(6n+3) a {
  background: linear-gradient(to bottom right, #FF20E9 0%, #FF005D 30%, #AB30CA 50%, #FF005D 70%, #FF20E9 100%);
  color: #ffff00;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
}

#dashboard li:nth-of-type(6n+4) a {
  background: linear-gradient(to right, #810404 0%, #000000 10%, #BA0000 15%, #000000 25%, #FF0000 50%, #000000 60%, #BA0000 80%, #000000 90%, #810404 100%);
  color: #ffff00;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
}

#dashboard li:nth-of-type(6n+5) a {
  background: conic-gradient(from 180deg at 50% 120%, #e85907, #eb5638,  #f83fa4, #a87cff, #00c477, #b8b500, #daac00, #deab02);
  color: #000000;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
}

#dashboard li:nth-of-type(6n+6) a {
  background: linear-gradient(to bottom right, #ffb916, #FF3939,  #b300ff, #ffca00, #434dff);
  color: #000000;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
}

If you want to use only one color (or gradient, font, text color, background color, or special effect) for all the levels of the dashboard, you can use this code instead of the above six codes:

#dashboard,
#dashboard ul,
#dashboard .secondary,
#dashboard a {
 color: #0000ff;
background: #ffa500;
}

And the specific code to change only the color and font of the text in the dashboard as a whole is this:

#dashboard a {
color: #ff1493;
font-weight: bold;
font-family: Comics Sans MS, cursive;
}

This code changes the color of the dark red bars above and below the dashboard:

#dashboard.own {
  border-color: #1e90ff;
}

This code affects the current level of the dashboard (the one of the page you're viewing in that moment), in this case giving it a rainbow background with black text:

#dashboard .current {
  background: linear-gradient(to right, #F8295A 0%, #FFA500 25%, #EAE326 40%, #37EA1B 60%, #2A97EA 80%, #B926F8 100%);
  color: #000000;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
}

This code will change the looks of the dashboard level you're hovering over (I'm giving it a creamy white background and a rounded dark green border here):

#dashboard a:hover {
  background: #ffff99;
  border: 2px solid #006400;
  border-radius: 20px;
}

And with these codes you add an emoticon/emoji before and after the text:

#dashboard a:hover:before {
  content: '✨ ';
}

#dashboard a:hover:after {
  content: ' ✨';
}

This code changes the look of the buttons in the site (I'm using a pink glitter wallpaper as background image for the example):

.actions a,
.actions a:link,
.action,
.action:link,
.actions button,
.actions input,
input[type=“submit”],
button,
.actions label {
  background-image: url('https://img.freepik.com/foto-premium/glitter-rosa-texture-di-sfondo_322958-1027.jpg');
  border: 2px solid #ff1493;
  color: #000000;
  text-shadow: 0 0 3px #FFFFFF, 0 0 5px #FFFFFF, 0 0 7px #FFFFFF, 0 0 9px #FFFFFF, 0 0 11px #FFFFFF, 0 0 13px #FFFFFF, 0 0 15px #FFFFFF;
}

This code changes the way the buttons look like when you hover over them:

.actions a:hover,
.actions button:hover,
.actions input:hover,
.actions a:focus,
.actions button:focus,
.actions input:focus,
label.action:hover,
.action:hover,
.action:focus {
color: #ff0000;
border: 1px solid #ff0000;
box-shadow: 2px 2px 2px #ffa500;
}

This code will affect the links at the bottom of the site (the columns "Customize", "About the Archive", "Contact us" and "Development"):

#footer,
#footer h4.heading,
#footer .actions a:link,
#footer .actions a,
#footer .action,
#footer .action:link,
#footer .actions button,
#footer .actions input,
#footer input[type=“submit”],
#footer button,
#footer .actions label {
  color: #000000;
  text-shadow: none;
  background: linear-gradient(to right, #fecdef 0%, #ffcccc 50%, #ffedcc 100%);
}

I'm going to add also the code that switches the Ao3 logo on the upper left corner of the page with another image of your choice (in this example, it changes the logo to the image of a colored heart):

header .logo {
  content: url('https://i.etsystatic.com/41346178/r/il/931054/5782205330/il_794xN.5782205330_abcn.jpg');
}

This code changes the color/font/background color of the title and username in a work in the work boxes:

.header.module h4.heading a {
  color: #ffa500;
}

This code changes the text style of the upper part of a work (the one with the ratings, pairings, characters, fandom, number of kudos, number of bookmarks and so on):

.work.meta.group {
  color: #00ff00;
}

And this code changes the text style of the links in the same mask:

.work.meta.group a {
  color: #ffff00;
}

This code affects the dropdown menu of chapters (the background can only be in solid color, it won't work if you try to make it in gradient color):

#chapter_index.expandable.secondary li #selected_id {
  color: #ffff00;
  background: #00008b;
}

This code affects the inner mask that appears when you edit a work/chapter:

#main .verbose legend,
.comment h4.byline,
.reading h4.viewed,
.unread,
.child,
.unwrangled,
.unreviewed,
.verbose fieldset,
form ul.notes,
#modal,
.ui-sortable li,
.comment_notice,
.kudos_notice,
div.dynamic,
#ui-datepicker-div,
.ui-datepicker table {
background: radial-gradient(#ff99cc, #ffcc66, #ffff66, #aaff80, #99ccff, #cc99ff, #99ccff, #aaff80, #ffff66, #ffcc66, #ff99cc, #ffcc66, #ffff66, #aaff80, #99ccff, #cc99ff, #99ccff);
color: #00008b;
}

This code changes the font/color/background of the title of the stories and the username in the work list:

.header.module h4.heading a {
color: #ffa500;
}

And this code affects the fandom link in the work list:

.header.module h5.fandoms.heading a {
color: #00ff00;
}

This code affects the work boxes (those you find in the "Recent Works" list and in the "Works" list ):

.work li.blurb {
background: #99ccff;
}

You can also choose to give a different background color/border to the work boxes, for example like this:

.work li.blurb:nth-of-type(even) {
  background: #99ccff;
}

.work li.blurb:nth-of-type(odd) {
  background: #ffccff;
}

You will have the work boxes in even numbers with a light blue background and the work boxes in odd numbers with a light pink background.

To change the font, text size and/or text color of the summary in the work boxes of the "Recent Works" and "Works", the code is written like this:

.work .blurb blockquote {
  font-family: Lucida Calligraphy, cursive;
color: #1e90ff;
}

But you can't make the single boxes have different fonts, it's one for all.

This code affects the work boxes in the "Recent Series" list:

.series li.blurb {
  border: 10px solid #99ccff;
}

And you can choose to give the work boxes a different border/background using these two codes instead of the one above:

.series li.blurb:nth-of-type(even) {
  border: 10px solid #99ccff;
}

.series li.blurb:nth-of-type(odd) {
  border: 10px solid #ffccff;
}

To change the font, text size and/or text color of the summary in the work boxes of the "Recent Series", the code is written like this:

.series .blurb blockquote {
  font-family: Arial, sans-serif;
font-size: 16px;
color: #ffa500;
}

But you can't make the single boxes have different fonts, it's one for all.

This code affects the work boxes in the "Recent Bookmarks" list:

.bookmark li.blurb {
  color: #ff1493;
}

And you can choose to give the work boxes a different border/background color using these two codes instead of the single code above:

.bookmark li.blurb:nth-of-type(even) {
  color: #ff1493;
}

.bookmark li.blurb:nth-of-type(odd) {
  color: #1e90ff;
}

To change the font, text size and/or text color of the summary in the work boxes of the "Bookmarks", the code is written like this:

.bookmark .blurb blockquote {
font-family: 'Brush Script TM', cursive;
font-size: 20px;
color: #ff1493;
}

But you can't make the single boxes have different fonts, it's one for all.

To change the font and color of the stats at the bottom of the work boxes (the number of chapters, bookmarks and comments), you need to use this little code:

dl.stats dd a:link {
  color: #ffff00;
}

If you want to give each link of the stats a different style, you need to use these codes instead (the bolded part is the specific stat that is affected by that code):

dl.stats dd.chapters a {
background: #86bff7;
}

dl.stats dd.comments a {
background: #ffccff;
}

dl.stats dd.kudos a {
background: #00ff00;
}

dl.stats dd.bookmarks a {
background: #ffa500;
}

In case you want to customize the main page menu (the one with the bigger profile image and the buttons "Post new", "Edit Works", "Subscribe" and "Invitations") you need this code (I'm giving it a creamy white background, orange text and a pink border in the example);

.home .primary {
  background: #FFFF99;
  border: 2px solid #FF1493;
  border-radius: 20px;
  color: #ffa500;
}

To have the work title and user name (or names, in case the work is co-authored or gifted to someone) in the work boxes for the "Recent works", "Recent bookmarks" and "Recent series", plus the work boxes that come out when you make a search, be all in different color or font, you need to use these codes, where the first code is for the work title and the other codes are for the author names:

.work .blurb h4 a:link:nth-of-type(3n+1),
.series .blurb h4 a:link:nth-of-type(3n+1),
.bookmark .blurb h4 a:link:nth-of-type(3n+1) {
  color: #ffa500;
  font-weight: bold;
  font-family: Lucida Calligraphy, cursive;
}

.work .blurb h4 a:link:nth-of-type(3n+2),
.series .blurb h4 a:link:nth-of-type(3n+2),
.bookmark .blurb h4 a:link:nth-of-type(3n+2) {
  color: #1e90ff;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

.work .blurb h4 a:link:nth-of-type(3n+3),
.series .blurb h4 a:link:nth-of-type(3n+3),
.bookmark .blurb h4 a:link:nth-of-type(3n+3) {
  color: #006400;
  font-weight: bold;
  font-family: 'Times New Roman', serif;
}

I only put three codes here because I used the case of a work being gifted by the author to another user, but of course you can add more if needed. In the example, the work title is orange in font Lucida Calligraphy, the author name is blue in font Arial and the name of the user the work was gifted to is green in font Times New Roman.

This code will change the style of the header of each listbox (the lists "Fandoms", "Recent works", "Recent series" and "Recent bookmarks"):

.listbox h3.heading {
  color: #000000;
  background: #ffff99;
  border: 1px solid #ff1493;
  border-radius: 20px;
}

In this case, the title will be in color black, with creamy white background and a pink rounded border.

This code affects all the dropdown menu in the page that appears when you make changes to a work (changing the language, the siteskin, the title and so on):

option {
  background: #d1e1ef;
  color: #0000ff;
  font-weight: bold;
}

This code changes the background, color and text style of the headings in the "Statistics" page (where you can see the number of bookmarks, kudos, comments and subscriptions for all your works and for you as a user), meaning the "XXX fandom" titles:

.statistics.index.group h5.heading {
color: #ffff99;
background: #1e90ff;
}

And this code changes the look of the background and text in the statistics page "Totals" box (so the lines "User subscriptions", "Kudos", "Comment threads", "Bookmarks", "Subscriptions", "Word count" and "Hits"):

.statistics.meta.group {
  background: #000000;
  color: #ffffff;
  text-shadow: 0 0 3px #FF9933, 0 0 5px #FF9933, 0 0 7px #FF9933, 0 0 9px #FF9933, 0 0 11px #FF9933, 0 0 13px #FF9933;
  border: #FF9933;
}

This code affects the fandom name in the work boxes (here I'm making it in white font Lucida Calligraphy with green background):

.blurb h5.fandoms.heading {
color: #ffffff;
background: #00ff00;
font-family: Lucida Calligraphy, cursive;
}

This code adds a border to the text boxes in the Workskins and Siteskins list in the "Skins" page:

.skins.own.picture.blurb.group {
  border: 10px solid transparent;
  border-image: linear-gradient(to right, #FF355E, #ffa500, #ffd700, #00ff00, #50bfe6, #da70d6);
  border-image-slice: 1;
}

CODES TO CHANGE THE STYLE OF THE STORY YOU'RE READING THROUGH YOUR SITESKIN

Thanks to user MiaDiAngelo, who asked me about this in a comment, I found a way to change the style of the story you're reading, both for the whole story or for a specific chapter (or chapters).

If you want to change the style of the whole story, you will need to add this code to your siteskin (I'm making the text in gold and font Lucida Calligraphy in the example):

#main #chapters {
color: #b39947;
font-family: Lucida Calligraphy, cursive;
}

If you want to change the style only of a specific chapter, you will write the code like this, where the ? stands for the number of the chapter of your choice (I'm making the text red in font Courier New in the example):

#main #chapter-? {
font-weight: bold;
color: #ff0000;
font-family: 'Courier New', monospace;
}

With these codes, you can change the text color, the font family, the font-size and the background of the work/chapter and you can add a border to the work/chapter, for example writing the code like this for the whole story (I'm making the border pink in the example):

#main #chapters {
  border: 3px solid #ff1493;
}

And like this for the chapter (I'm making the border in gradient rainbow colors in the example):

#main #chapter-2 {
border: 3px solid transparent;
border-image: linear-gradient(to right, #FF355E, #FF9933, #00ffff, #00ff00, #50BFE6, #EE34D2, #50BFE6, #00ff00, #00ffff, #FF9933, #FF355E);
  border-image-slice: 1;
}

You can also add both codes to the siteskin, if you want to have the whole story in a certain style while giving a different style to a specific chapter. You can even  give a different style to every chapter by repeating the second code and changing the number of the chapter accordingly.

Just remember that, if you add both codes and choose a background color/border for the whole story, this will be applied to all the chapters.

If you want the chapter (or chapters) of your choice to have the standard white background, you will have to add the line background: #ffffff; to the code, like this for example:

#main #chapter-5 {
color: #0000ff;
background: #ffffff;
}

Of course, here I used the standard white color, but you can choose to give the chapter any background color you like, also in gradient colors.

As for the border, the two codes will overlap and you will get that specific chapter with two borders: the border of the whole work will be on the outside, with the border for that chapter on the inside. I'm sorry to say that I have not yet found a way around it.

If you want to change the style of the first letters of the whole work, you will need to write the code like this (I'm making it in white, in font Lucida Calligraphy and size 26px with a red background):

#main #chapters p::first-letter {
font-weight: bold;
color: #ffffff;
background: #ff0000;
font-family: Lucida Calligraphy, cursive;
font-size: 26px;
}

If you want to change the style of the first letters only in a specific chapter, you will need to write the code like this, where the ? is the number of the chapter of your choice:

#main #chapters #chapter-? p::first-letter {
  font-weight: bold;
  color: #0000ff;
  background: #ffff00;
  font-family: Courier New, monospace;
  font-size: 20px;
}

To change the style of the first letter after a line divider in the whole work, you will write the code like this:

#main #chapters hr + p::first-letter {
color: #006400;
border: 2px solid #ff1493;
padding: 10px 10px 10px 10px;
font-size: 20px;
}

And to change the style of the first letter after a line divider only in a specific chapter, you will write the code like this, where the ? stands for the number of that chapter:

#main #chapters #chapter-? hr + p::first-letter {
color: #ff0000;
}

As for the first line, if you want to change the style of the first line of the whole work, you will write the code like this:

#main #chapters p::first-line {
font-size: 24px;
}

To change the style of the first line only in a specific chapter, you will write the code like this, where the ? stands for the number of that chapter:

#main #chapters #chapter-? p::first-line {
font-family: Arial, sans-serif;
}

To change the style of the first line after a line divider in the whole work, you will need to write the code like this:

#main #chapters hr + p::first-line {
color: #ff1493;
}

And to change the style of the first line after a line divider only in a specific chapter, you will write the code like this, where the ? stands for the number of that chapter:

#main #chapters #chapter-? hr + p::first-line {
color: #1e90ff;
font-weight: bold;
}

In case you want to change the style of the first letter of other parts of the site, or use a different first-letter style in your workskins, check out my guide for it here: the chapters from 1 to 5 are focused on styling the first letter or first line in works through a workskin, while chapter 6 in focused on styling the first letter in some parts of the site (greetings, buttons, dashboard) and styling the first letter and first line of the works you're reading through your siteskin.

CODES FOR THE NAVIGATION BUTTONS

BUTTON "PREVIOUS CHAPTER" (in this example it's with blue text in bold and font Arial)

.work.navigation li.chapter.previous a {
  color: #0000ff;
font-weight: bold;
font-family: Arial, sans-serif;
}

BUTTON "NEXT CHAPTER" (in this example it's with red text in bold and font Courier New)

.work.navigation li.chapter.next a {
  color: #ff0000;
font-weight: bold;
font-family: 'Courier New', monospace;
}

BUTTON "ENTIRE WORK" (in this example it's with green text and black background)

.work.navigation li.chapter.entire a {
color: #00ff00;
background: #000000;
}

BUTTON "ADD CHAPTER" (in this example it's with orange background)

.work.navigation li.add a {
background:  #ffa500;
}

BUTTON "EDIT" (FOR THE WHOLE WORK) (in this example it's with yellow background)

.work.navigation li.edit a {
  background: #ffff00;
}

BUTTON "EDIT TAGS" (in this example it's with pink text in bold and font Lucida Calligraphy and with light blue background)

.work.navigation li.edit.tag a {
  color: #ff1493;
background: #71b2ec;
font-weight: bold;
font-family: Lucida Calligraphy, cursive;
}

BUTTON "BOOKMARK" (in this example it's with neon green text and black background)

.work.navigation li.bookmark a {
  color: #ffffff;
background: #000000;
text-shadow: 0 0 3px #00ff00, 0 0 5px #00ff00, 0 0 7px #00ff00;
}

BUTTON "SHARE" (in this example it's in font Comic Sans MS)

.work.navigation li.share a {
  font-family: Comic Sans MS, cursive;
}

BUTTON "COMMENTS" (in this example it's with black text and rainbow gradient background)

.work.navigation li.comments a {
  color: #000000;
background: linear-gradient(to right, #FF355E, #FF9933, #00ffff, #00ff00, #50BFE6, #EE34D2, #50BFE6, #00ff00, #00ffff, #FF9933, #FF355E);
}

BUTTON "HIDE CREATOR'S STYLE" (OR "SHOW CREATOR'S STYLE") (in this example it's with light pink background)

.work.navigation li.style a {
background: #ffcce6;

Next chapter contains the codes to change the text font/color/background of each level of the "Sort and filter" column.