okay guys
AO3 ADD-ONS!!!!!!!!!
a guide by a newbie who knows nothing about code. please feel free to correct me and/or provide your own resources.
so if you're here at all you've likely heard of site skins on AO3. this is going to be your main "modifying medium" and the method that allows you to stay vanilla. the two other things I'll be talking about are bookmarklets, based in your bookmarks, and user scripts which you need an extension and sometimes a different browser to use. (BUT THEY'RE TOTALLY WORTH IT!!!!)
I'll be, in order, doing a quick explanation, helpful resources and a list of each kind of add-on. This is made by someone on a tablet, but a combination of common sense and provided resources should make doing this stuff on other devices fairly easy.
IF LIST ITEMS DO NOT HAVE CREDIT LISTED, I EITHER FORGOT, DON'T KNOW THE CREATOR, OR THE LINK IS TO THE CREATOR'S POST/WORK.
LIST ITEMS ARE LINKED ON THE COLORED TEXT
Site Skins!
What are they?
Site skins are the vanilla method of changing how your AO3 looks. Going to your dashboard and then skins [you need an account to use skins], you can see a list of your skins and public ones. The most popular, and likely the only skins you've seen before, primarily change the appearance of AO3. However, there is another kind of site skin that I've decided to call 'functional skins'. Functional skins differ from decorative skins in that they change things beyond font and color. My primary examples are perma-blocking tags, shortening blurb tags and adding a scroll bar, and replacing the (rating, relationships, etc.) icons with writing providing the same information.
To create a functional site skin, simply create a new skin and copy and paste your code below the CSS header! (the skin upon creation should automatically be set to a site skin with the CSS code box.)
To use a functional site skin in conjunction with a decorative site skin, set the F skin as the D's parent skin under "Advanced" in the D skin editor. If it doesn't immediately work, try flipping the parent chain around. If that doesn't work, your decorative skin might somehow block the function. (this is sadly the case with one of my functional skins.)
Resources
The best resources I can give you for site skins are Tumblr users @ao3commentoftheday and @ao3skin ! (sorry for the tag!!) Not only do they have a lot of decorative skins, they also both have functional skins!
The List
- warnings/rating/etc icons in text form
(I never really memorized the icon meanings so this is both easier for me to understand and is still colorful! I did change the text color to be lighter to work with my dark theme, though)
- shortens tag section and adds tag scroller
li.blurb .tags {
max-height: 7.5em;
overflow-y: auto;
}
(genuinely don't know where I found this one nor the link to it so here; very useful in preventing tag walls while browsing)
- perma-blocks tags (you won't have to filter them!)
(SO SOS SO SO SO AWESOME! haven't finished my list yet since it's (in my opinion) a bit tedious but definitely worth it and not all that difficult)
- rainbow text!!!
(very pretty! works with my decorative skin, too!)
- changes the color of links you've visited
(neat, but doesn't work with my deco skin :[ wanna try to figure out why!)
- my current decorative skin :]
(it glowy!!!!! prebby!!!!! need I say more)
Bookmarklets!
What are they?
Bookmarklets are bookmarks! But with javascript and therefore funky functions. Genuinely don't know how to explain them, nor how to free hand but the javascript from my understanding goes certain places in the bookmark's URL.
Resources
Again, I know nothing about javascript and therefore.... can only provide you a couple handy bookmarklets myself!
The List
- replaces y/n with specified name
(what it says on the tin! haven't tried this one out since I don't read y/n docs but it seemed helpful.)
- saved filters
(I should NOT need to explain why this one is awesome. seriously guys it's awesome)
- saved filters specifically filtering out smut tags
javascript:(function(){const%20urlWithFilters="https://archiveofourown.org/works?commit=Sort+and+Filter&work_search%5Bsort_column%5D=revised_at&work_search%5Bother_tag_names%5D=&exclude_work_search%5Barchive_warning_ids%5D%5B%5D=19&exclude_work_search%5Barchive_warning_ids%5D%5B%5D=20&work_search%5Bexcluded_tag_names%5D=Smut%2CEventual+Smut%2CShameless+Smut%2CMild+Smut%2CSex%2CAnal+Sex%2COral+Sex%2CUnderage+Sex%2CVaginal+Sex%2CRough+Sex%2CSex+Toys%2CGay+Sex%2CRobot+Sex%2CPorn%2CPlot+What+Plot%2FPorn+Without+Plot%2CPorn+with+Feelings%2CPorn+With+Plot%2CIdentity+Porn%2CAngst+and+Porn%2CMasturbation%2CPraise+Kink%2CDaddy+Kink%2CSize+Kink%2CBreeding+Kink%2CBlood+Kink%2CMommy+Kink%2CVoice+Kink%2CExplicit+Sexual+Content%2CImplied+Sexual+Content%2CSexual+Tension%2CSexual+Content%2CUnresolved+Sexual+Tension%2CMild+Sexual+Content%2CNon-Explicit+Sex%2CImplied%2FReferenced+Sex%2CSemi-Public+Sex%2CPublic+Sex%2CPenis+In+Vagina+Sex%2CLesbian+Sex%2CUnderage+Sex+-+Freeform%2CShower+Sex%2CDrunk+Sex%2CPegging%2CRimming&work_search%5Bcrossover%5D=&work_search%5Bcomplete%5D=&work_search%5Bwords_from%5D=&work_search%5Bwords_to%5D=&work_search%5Bdate_from%5D=&work_search%5Bdate_to%5D=&work_search%5Bquery%5D=&work_search%5Blanguage_id%5D=&tag_id=Spider-Man+-+All+Media+Types%22;if(urlWithFilters){const%20filterParams=new%20URL(urlWithFilters).searchParams;const%20page=window.location.pathname.slice(0,-1).split(%22/%22).pop().replace(%22s%22,%22%22);if(window.location.hostname==%22archiveofourown.org%22&&(page==%22work%22||page==%22bookmark%22)){const%20filters=new%20URLSearchParams(window.location.search);for(let[key,value]of%20filterParams){if(value.length){if(!key.includes(page)&&(key.includes(%22clude_%22)||key.includes(%22lang%22)||(key.includes(%22sort_%22)&&(value==%22revised_at%22||value==%22bookmarkable_date%22))||(key.includes(%22_tag%22)&&!key.includes(%22mark_tag%22))||(key.includes(%22query%22)&&!key.includes(%22mark_query%22)))){key=key.replace(/(work_search|bookmark_search)/,page+%22_search%22);key=key.includes(%22bookmarkable_query%22)?key.replace(%22bookmarkable_%22,%22%22):key.replace(%22query%22,%22bookmarkable_query%22);value=value==%22revised_at%22?%22bookmarkable_date%22:value.replace(%22bookmarkable_date%22,%22revised_at%22);}if(!filters.getAll(key).includes(value)&&key.includes(page+%22_search%22)){if(filters.get(key)==null||filters.get(key)==%22%22||((key.includes(%22rec%22)||key.includes(%22_notes%22))&&filters.get(key)==0)||(key.includes(%22sort_%22)&&(filters.get(key)==%22revised_at%22||(key.includes(%22mark_%22)&&filters.get(key)==%22created_at%22)))){filters.set(key,value);}else%20if(!(key.startsWith(page)||(key.startsWith(%22include_%22)&&key.includes(%22rating_ids%22)))){filters.append(key,value);}else%20if(key.includes(%22_tag_names%22)){filters.set(key,filters.get(key)+%22,%22+value);}else%20if(key.includes(%22query%22)){filters.set(key,filters.get(key)+%22%20%22+value);}}}}if(%22?%22+filters.toString()!=window.location.search){window.location.search=filters.toString();}}}})();
(This is my personal use of the last one listed! this is not an exhaustive filtering out but it's that many more that you won't have to type out next time. COPY AND PASTE THE TEXT ABOVE INTO AN EMPTY BOOKMARK'S URL TO USE!)
User Scripts!
What are they?
User scripts are where it gets spicy. They're outside the site, so can modify it beyond appearance, add new features and generally do stuff the other options can't.
To use a user script, you need a script manager extension, and some browsers don't support extensions (cough CHROME cough). Fear not, though! It's easy to download other browsers and find compatible script managers.
Resources
A good basic guide to scripts! Greasy Fork
A good, fairly universal script manager! Tampermonkey (search for downloading on your current browser)
A list of AO3-specific user scripts! Greasy Fork
The List
- adds Marked for Later button to work blurbs while browsing and on the home page/top of the screen
- recommends fics based on certain tag combos in a work
- adds download button to work blurbs while browsing
- allows filtering bookmarks by length
- assigns length to works and compares them to a list of published novels' lengths
- removes kudos button when you've already left kudos
- floaty reviewer box! for writing comments as you read
- when browsing, collapses blurbs of works that are later than part 1 in a series
- rearrange the tag order when editing works and bookmarks
- puts a badge in the menu when you have unread inbox stuff
- easy interface for formatting comments with HTML
- style editor, blacklist, bookmarks that mark your exact place, good all-in-one
(you can disable functions you don't want/need for this one ↑)
- score calculators based on kudos/hits ratio and chapters and a more complicated "engagement score"
(I more use these scores out of curiosity than anything)
Enfin!
Thank you for reading my guide! I don't usually do stuff like this but I suspect I'm hyperfixated. I'm very tired, worked pretty hard on this and it's currently past midnight for me so if this was helpful please share it!!!! All credit due to the respective creators in here.