ao3skin

[ao3skin]

I made an AO3 work skin! This is a modified version of a skin by @electricalice / @ao3skin, which can be found here. The example I created for the skin can be found here. I don't care if you credit me but it would be very nice if you could credit ElectricAlice!

#i love it! #workskins

[ao3skin]

i keep trying to find a way to do this but i am very new to any sort of css-ing to know wtf is going on. so, do you know how to make the textbox black on other themes just like how it is in reversi? sorry if this has been answered before i tried poking around your blog but nothing related came up :(

this should change the vast majority of it:

textarea, input, textarea:focus, input:focus, select, select:focus {    background: #1f1f1f;    color: #ebebeb; }

I haven’t betatested it for all cases tho...

#form #asks

[ao3skin]

hi! your tide skin is amazing!!! i was wondering if there was any CSS coding that could be done to make the text of all fics left aligned as justified text is hard for me to process

thank you!!!

yes! add this:

#chapters .userstuff p[align="justify"] {   text-align: left; }

#asks

[ao3skin]

hi there! is there a way to remove the "add to collection" button in your bookmarks? i want my dasboard to be as minimalistic as possible and i just don't use collections at all :c thank u in advance!!

yes!

#bookmark-form fieldset dt:nth-of-type(3) {    border-bottom: none; } #bookmark-form fieldset dt label[for="bookmark_collection_names_autocomplete"], input[id="bookmark_collection_names_autocomplete"] {    display: none; }

#asks

[ao3skin]

hey! is there a way to make the bookmarker's tags bold?

yesss!

.bookmark li .meta.tags {    font-weight: bold; }

#asks #bookmarks

[ao3skin]

Permanently Block tags on AO3 - Site Skin

Tutorial on how to do it: https://archiveofourown.org/works/41214669

#I stand corrected

[ao3skin]

for the last few months I’ve used this bookmarklet here by reisling: https://archiveofourown.org/works/33825019

it allows me to save all the filters I want and then apply them with a click to any tag page I’m onto. And it works on mobile. Really really recommended.

possibly adding "always exclude this warning tag" on ao3 wouldn't be as time-intensive as the blocking features? Since it'd reuse whatever code they've got for the "Show me adult content without checking" preference and just apply up to five filter tags. If they wanted to make it more complex than just the archive warnings it'd get heavy pretty fast though, and I don't know enough about the search function to know how many other things it'd affect bc touching code on big projects is always hell

--

Would that actually be the same code?

But yes, perma-exclude would be nice.

#filters bookmarklet

[ao3skin]

hi!! i'm trying to do two things with site skins, and i was wondering if you could help with that? c:

is it possible to (and if so, how to)

1. force left alignment Only If the text is justified? i'd like to keep center aligned scene dividers if i can

2. switch certain words to other ones in fics? hopefully while taking capitals and accents into consideration

thank you!

oh, I was about to say 1 is not doable but you can definitely do it:

#chapters .userstuff p[align="justify"] {    text-align: left; }

(I’ll probably update the dyslexia skin with this when I have the time)

2 is not really doable on someone else’s fics, but you can do it on your own with a workskin...? https://archiveofourown.org/works/39385251 

#ao3 userscripts

[ao3skin]

Hi! Good day. Sorry for intruding! I'm not good with CSS but I just want to know if it's possible to be able to use a bootstrap panel or bootstrap collapse on ao3 work skin?

a collapse is doable, some genius managed to use javascript from ao3 itself for personal skins: https://ao3skin.tumblr.com/post/679704460883329024/hi-kind-css-skin-creator-i-have-a-question-and-a

you need the bootstrap panel you can probably go ahead and take the code from bootstrap itself (it’s free...)

this should be it:

.panel {    margin-bottom: 20px;    background-color: #fff;    border: 1px solid transparent;    border-radius: 4px;    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);    box-shadow: 0 1px 1px rgb(0 0 0 / 5%); }

and then they add a border color:

.panel-default {    border-color: #ddd; }

the heading is done like this:

.panel-default>.panel-heading {    color: #333;    background-color: #f5f5f5;    border-color: #ddd; } .panel-heading {    padding: 10px 15px;    border-bottom: 1px solid transparent;    border-top-left-radius: 3px;    border-top-right-radius: 3px; }

but you’ll have to add the .collapsed and .hidden (like I explain in the link) to make the collaps work

#ao3 tips #workskins #asks

[ao3skin]

the ao3 comment skin is the raddest thing ever omg, thank you so much for sharing!!!

:D thank you!

[ao3skin]

Do you have any skins that either put more space between tags or alternate the text/background colour so they’re easier to tell apart? thank you

yes, I have this one: https://archiveofourown.org/works/34928095

you can change the colors of the tags the way you want (the changes in my example are subtle but you can use bolder colors)

if you want more space than the example you can add this code at the end:

.commas li:after {  margin-right: 5px; }

you can change the 5px to any other number

#skins for tags #asks

[ao3skin]

Is there a skin that hides stats and, once youre inside a work, also hides comments and the list of people who left kudos?

This should do it:

.blurb dl.stats, .meta .stats, #kudos, #comments_placeholder, #show_comments_link, #show_comments_link_top {  display: none; }

It also removes the buttons to see the comments. But it doesn’t remove the box to leave a comment or to leave kudos!

#ao3 stats #asks

[ao3skin]

hi there! how do you make the tag background a light gray (without the underline at the bottom?) i can't seem to figure it out :(

This should do it:

a.tag {    border-bottom: none;    background-color: #ededed; }

the underline at the bottom is tricky because it is not an underline but a border. which is probably why you were having problems!

#skins for tags #asks

[ao3skin]

hi!! i'm trying to do two things with site skins, and i was wondering if you could help with that? c:

is it possible to (and if so, how to)

1. force left alignment Only If the text is justified? i'd like to keep center aligned scene dividers if i can

2. switch certain words to other ones in fics? hopefully while taking capitals and accents into consideration

thank you!

oh, I was about to say 1 is not doable but you can definitely do it:

#chapters .userstuff p[align="justify"] {    text-align: left; }

(I’ll probably update the dyslexia skin with this when I have the time)

2 is not really doable on someone else’s fics, but you can do it on your own with a workskin...? https://archiveofourown.org/works/39385251 

#asks

[ao3skin]

update on how it works on various browsers as of august 2022:

Desktop browsers:

it works fine on safari both on mac and on iphone

on chrome it works in the beta pre-release version. They are going to be shipping it in the next version (105, which should go out at the end of the month.) but you can also enable it by going here: chrome://flags/#enable-experimental-web-platform-features and select ‘enabled’ to the Experimental Web Platform features

on edge and opera it is scheduled in the pre-release version. still in development. it will come eventually.

on Firefox you’ll need to go in the advanced config and enable the flag

layout.css.has-selector.enabled

Mobile Browsers:

according to canIuse only safari on iphone has it fully functioning.

And Chrome for Android has it in the pre-release version which should be out soon.

I can’t find infos on firefox for android (but that one allows extensions, so you can use userscripts to hide tags)

Additional stuff to remember

the class selector a[href*=“whatever”] looks at the url of the link. so if you have two words you’ll need to add %20 where the space should be and *s* where the / should be (for ships). so like: a[href*=“Colin%20Bridgerton*s*Penelope%20Featherington”] (the simplest way is to go to the page of the tag you want to block and copy the text)

a “i” at the end will make it non case-sensitive (which helps btw) a[href*=“whatever” i]

tumblr always changes “” in the curly ones. but you’ll need to use the straight ones in css if you want them to work properly

it will search even part of the word. so “tick” will catch “ticket” “ticking” “tickling” “ticks” 

this won’t catch all the syns of the tags unfortunately. if you want a clean exlusion of a particular tag you still should use the filters

Permanently Block tags on AO3 - Site Skin

Tutorial on how to do it: https://archiveofourown.org/works/41214669

#skins for tags #skin tips

[ao3skin]

is there a way to add the “Mark for Later” button to the results page so I don’t have to click through a fic to mark it for later?

Not with skins, you’ll have to use userscripts:

https://greasyfork.org/en/scripts/432319-add-ao3-mark-for-later-button-to-works-list

#ao3 userscripts

[ao3skin]

Hello! Is there a way to make it so certain tags (MCD) does not appear on the fic? (basically make tagged MCD Untagged MCD for you)

yes! I hav e all the codes for the various warnings here: https://ao3skin.tumblr.com/post/665736822399320064/hi-thank-you-for-your-help-on-skins-your-guides

the one for MCD is this one:

li.warnings a.tag[href*=Death] { display: none !important; }

I’ve absolutely done this for myself. hidden the warnings I do not care about and leaving the ones I do.

I also deleted the No Archive Warnings Apply, because I definitely don’t need it. 😂. Like, nothing applies. good.

li.warnings a.tag[href*=Apply] { display: none !important; }

#asks #warning tags