Possible Guide To Basic Code On AO3

(Also all images I may use are hosted on tumblr so it's not the most stable system. If any of them fuck up please let me know! It's all worked fine for me so far.)

Index

How To Creat A Site Skin (super basic)

How To Block Tags (no browser add ons)

How To Manipulate Text (italics & Bold Text e.c.t.)

How To Add A Working Hyperlink (and other cool shit)

How To Hide Stats (kudos/hits/comments/bookmarks)

How To Block Works & Authors (from showing up in your search)

The Ins & Outs Of My Personal AO3 Skin

Clean AO3 Skin (NSFW & dark content free ao3) [UPDATED] I cringe just thinking about it 😫

AO3 leaves beta!!!

What a step! How far we've come. But we ao3 folks are a particular bunch and we like what we like, and if you're anything like me [autistic] (and the many people I have encountered after the reveal) you might be missing the beta. Good news is I have a fix for you!!! I have worked with skins that change the header before and its not too difficult so I have crafted a little something you can add to your skin to bring back the classic ao3 look of familiarity. Just paste into the Custom css box of your site skin and, voila! Here you have this classic header.

#header .logo { display: none; } #header h1.heading a::before { display: inline-block; width: 325px; height: 40px; content: ""; background-image: url("https://64.media.tumblr.com/a94764fc3d6899b60459174926ef108d/4e3100299da7b732-03/s500x750/2bca49c641a5c93082b9e7f52daf39a972e23561.png"); background-size: cover; } #header h1.heading span { display: none; } #header h1.heading sup { display: none; }

To all those bitching about ao3 needing to be censored... I present to you Clean AO3 Skin

If you want the boot and not the scalpel.

(FYI this hurt me to make, but it was a fun exercise for my limited coding skills)

The Ins & Outs Of My Personal AO3 Skin

This in my personal site skin that I use to brows ao3. I have included all the basic components on how you can get the same skin for yourself. This skin has grown over time and helped me solve many unique problems I've run into. Below is a snippet of how it looks while searching.

Do you want cool boxes for fics and tags? Easy.

Do you want a dark mode for ao3? Here you go.

Do you want to give ao3 a boop? Now you can. Credit to this post on tumblr (though the link to ao3 no longer works).

Skin Wizard Values

Percent of browser font size: 130%

Background color: #282828

Text color: #FFFFFF

Header color: #8B0000

Accent color: #303030

Boop AO3 Header

#header .logo {

display: none;

}

#header h1.heading a::before {

display: inline-block;

width: 320px;

height: 50px;

content: " ";

background-image: url("https://64.media.tumblr.com/7bba2404f3ba03df470499701b920ab0/e17a337685fece4c-77/s640x960/531b098ea5fe8de580b30b2f162ba922da48918c.png");

background-size: cover;

}

#header h1.heading span {

display: none;

}

#header h1.heading sup {

display: none;

}

Bold Bookmark Tags

.bookmark li .meta.tags {

font-weight: bold;

}

Comment Box Colours

.comment.odd {

background: #282828;

}

.comment.even {

background: #393939;

}

Tag Outline Boxes & Size

a.tag {

padding: 4px 7px;

line-height: 2.3em;

border: 1px solid;

border-radius: 3px;

}

.tag {

font-size: 70%;

}

.commas li:after {

content: "";

}

Work Outline Box

.group .group,

.actions a,

.actions a:link,

.actions a:hover,

.actions a:focus,

.actions input,

.actions input:hover,

.actions input:focus,

.actions button,

.actions button:hover,

.actions button:focus,

.flash,

fieldset,

fieldset,

form dl,

fieldset dl dl,

fieldset fieldset fieldset,

fieldset fieldset dl dl,

form.single fieldset,

dd.hideme,

form blockquote.userstuff {

border: 2px solid;

}

.favorite a.tag {

How To Hide Stats (kudos/hits/comments/bookmarks)

Like everything else to to do with navigating ao3 in a personalised way, this is done using the 'Custom CSS' button in your site skin. This could be useful if you want a cleaner display while browsing, or want to see fics without judging "how good" they are by kudos/hits/comments/bookmarks.

To hide stats from view you use this piece of code: 

.stats .hits,

.stats .kudos,

.stats .bookmarks,

.stats .comments {

display: none; }

To use these separately you simply need to choose the stat(s) you want to hide and keep those.

e.x:

.stats .kudos,

display: none; }

And the works you see will no longer display how many kudos they have. These are my a few of my fics for reference on how it will look to browse. (This is using my test skin, if you add it to your main skin then it won’t affect anything else about how it looks 👍).

How To Block Works & Authors (from showing up in your search)

Ao3 has a block/mute function built in to the site, but that only stops the blocked party from being able to interact with your fics. That may work fine for some people such as those spamming your works with unwanted comments, or someone being mean. But many times when you block someone it is because you just don't want to see anything to do with that person i.e any of their works, and therefore the built in block is not much help. There is a way to properly block a user or a particular work from showing up in your searches though, using site skins as always! 

How To Block A User:

To block a user simply go into the 'Custom CSS' box of your site skin, and paste this piece of code:

.user-000 { display: none !important; }

This will do nothing if left as is, the '000' is a placeholder for the user ID of the person you want to block. I will use mine as a demonstration of how it works (please don't block me, I'm your friend).

My user ID is:5135567

e.x.

.user-5135567 { display: none !important; }

How To Block Works:

Sometimes there is a particular work, maybe for a fandom or ship you're into, that for whatever reason you have no interest in reading but it shows up every time you look for fics. Whatever reason you want to block a work, be it a fic that's triggering for you, one you dislike that's continually updating to the top of the tag, or just an annoying fic with waaaaaaaaay too many tags, to block a work simply go into the 'Custom CSS' box of your site skin, and paste this piece of code:

.work-000 { display: none !important; }

Again the '000' is a placeholder for the work no. which is a set of numbers unique to every work on ao3. I will use this work no. to demonstrate (this work no is no longer a part of ao3, but the example servs it's purpose).

https://archiveofourown.org/works/58275322

e.x.

.work-58275322 { display: none !important; }

How To Add A Working Hyperlink (and other cool shit)

You may have noticed that pasting a basic Web link into ao3 doesn't work. Well there is a relatively simple solution to that problem that allows you to insert links and even make them look nice and tidy.

Adding A Hyperlink

A working hyperlink can be added using this pice of code:

<a href="add link here">write what you want the it to say here</a>

I'm just going to link my Tumblr here as an example:

https://sak-supernatural.tumblr.com/

|

\/

Come give me a follow?

Adding A Drop Down Menu

A drop down menu can be added using this piece of code:

How To Manipulate Text (italics & Bold Text e.c.t.)

I know the ritch text editor allows you to do some of this by simply clicking the B, I, U, S buttons. But it cannot be applied to summary, notes, or comments. (Some of these work for tumblr too)

To apply any of these manually onto work texts you have to be in HTML and not Rich Text.

Bold

Bold text is made using this command:

<strong>add text you want to be bold here</strong>

E.g.

<strong>Wow!!! This is so cool!!!</strong>

|

\/

Wow!!! This is so cool!!!

Italics

Italics are made using this command:

<em>add text you want in italics here</em>

E.g.

<em>AO3 is the best!</em>

|

\/

AO3 is the best!

Underline

An underline is made using this command:

<u>add text you want to underline here</u>

E.g.

<u>Look at me I'm fancy.</u>

|

\/

Look at me I'm fancy.

Strike through

A strike through is made with this command:

<strike>add text you want to strike through here</strike>

E.g.

<strike>No I didn't mean to say that</strike>

|

\/

No I didn't mean to say that

Big Text

Big text is made with this command:

<big>add text you want big here</big>

E.g.

<big>Pretty self explanatory</big>

|

\/

Pretty self explanatory

Small Text

Small text is made with this command:

<small>add text you want to be small here</small>

E.g.

<small>Look at me I'm tiny</small>

|

\/

Look at me I'm tiny

This Weird Text

Weird text is made with this command:

<tt>add text you want to be weird here</tt>

E.g.

<tt>This is good I guess?</tt>

|

\/

This is good I guess?

Paragraphs & Line Breaks

Paragraphs are added automatically when you go onto a new line. But sometimes you don't want the text to be so far appart this is where line breaks come in.

Paragraph Spacing

this

far

Line Break Spacing

this

far

This is achieved with the command:

<br>

E.g.

How To Block Tags (no browser add ons)

How to exclude tags so that you don't have to set filters every time you search. This is where it gets more complicated. But the results can be well worth it if there are specific tags you don't want to see. Now this isn't full-proof by any means due to the fact that not everyone is going to tag their work appropriately, and some tags that have such varied meanings it can be hard to pin them down. But it should really reduce your accidental exposure to things you don't like.

Excluding Ships

Firstly you go into your site skin (if you don't have one see this post) and click on Custom CSS, it will show the box where the code for the skin will go:

Then for excluding tags there is a piece of code you must use:

.blurb:has(a[href$="/tags/tagstringhere/works"]) { display: none !important; }

Excluding a ship tag (maybe one that's popular in a fandom you're in, and always clogs the search, that you simply hate) I find works best since it's such a specific tag. To do this you will need the URL pulled directly from the tag. I will use a ship I don't like to demonstrate. I want to excluding the ship of Hank Anderson/Connor from my searches because I have no interest in reading for this ship: 

https://archiveofourown.org/tags/Hank%20Anderson*s*Connor/works

For the tag block to work we don't need the whole URL:

https://archiveofourown.org/tags/Hank%20Anderson*s*Connor/works

Take the remaining part and paste it into the "quotation marks". It should look something like this:

.blurb:has(a[href$="/tags/Hank%20Anderson*s*Connor/works"]) { display: none !important; }

Update the skin and your display should look like this for the excluded ship:

You can repeat this process as many times as needed for different ships and you will have no more works tagged with the specific ship or ships appearing in your search. Pretty cool!!! 

Excluding Other Tags

Excluding other tags is done in the same way, using the same piece of code. But it may not be as effective, especially if it's from the 'additional tags' section. There are many tags that link to other tags so excluding all of them that link up may not be possible, but excluding the main offenders should help reduce your exposure to works you don't like.

Here's an example list of some tags that I want to exclude:

Puppy Play

Pet Play (which links to the tag 'Animal Play' allong with many others)

Here's what the code I have used to exclude them looks like:

.blurb:has(a[href$="/tags/Puppy%20Play/works"]) { display: none !important; } .blurb:has(a[href$="/tags/Animal%20Play/works"]) { display: none !important; } .blurb:has(a[href$="/tags/Petplay/works"]) { display: none !important; } .blurb:has(a[href$="/tags/Pet%20Play/works"]) { display: none !important; }

Site skins can be tricky and intimidating to tackle, but it is also super fun to personalise your AO3s look. Here's what mine looks like v.s the basic look:

Much nicer isn't it? (maybe it's not to your tastes, but that's ok I'm gonna show you how to make it exactly what you want to see)

This is where you go to start:

You will be brought here, and the first thing you need to do is give your site skin a unique name (a keyboard smash works fine if you can't think of anything right away), you can also give your skin a description if you want. This is my testing skin. Next click the use wizard button:

This is where you can input font/text size/e.c.t. (I just leave the other things alone because I don't really care about them). And for colour you can simply look through the handy list provided, there is no real substitute for trying them out and seeing what suites your needs best. I have included my site skin settings incase you already like what I've got going on:

Once you are happy with the colours, text, and layout of your custom site skin you can click submit (this is basically saving it, you can do this earlier in the process if you want as long as all the required* fields are filled out). Once your skin has been saved it should show up under My Site Skins on your dashboard, simply click use and you're good!!!: