ao3css
ao3 css
creating CSS skins to improve AO3's user experience
33 posts
Don't wanna be here? Send us removal request.
Last Seen Blogs
rockin-r
you may say i'm a dreamer...
novirinuno
Без названия
wiingna
.dreamer at best.
novirinuno
Без названия
radio-sex
K.
Note
hello, Is there a way I can hide follow us on my home feed?
Yes! With this:
.social.module.odd {
display: none;
}
2 notes
·
View notes
Text
Slightly off topic for my blog but I was wondering if many of you used or even knew of these tabs on AO3 as I never see them or their associated features mentioned much.
reblogs on this are appreciated to get grow it's sample size
4 notes
·
View notes
Note
Hi,
I don't know if you can help but
I'm trying to use a skin to hide the buttons I don't use on ao3 as the dashboard looks really busy to me and I struggle with it
I've managed to use some bits of css to tweak some of it but not others and I can not figure out why it's working sometimes and not the rest of the time???
#dashboard a[href$="/assignments"] {
display: none !important;
}
I tried this to remove assignments and it worked!
But then
#dashboard a[href$="/sign-ups"] {
display: none !important;
}
Didn't? Is it the hyphen?
The main ones I really want to get rid of are the subscription and invitation buttons on the navigation bar. But I can not figure it out.
I've tried
.user.home .primary.header .navigation.actions li:nth-of-type(4) form[id="invitations"] {
display: none;
}
And
.user.home.primary.header .navigation.actions li:nth-of-type(3) form[id="new_subscription"] {
display: none;
}
At first I thought it wasn't working because it needed to be in its own skin, with the other one as a parent. But that didn't work. Then I thought it might be the spaces? As I think ao3 added them when I pasted it in. But that didn't seem to make a difference. I've seen some ppl talking about something needing to be enabled in Firefox. Is that it? I'm using duckduckgo mobile (I mainly want the skin to work on my mobile) so I don't think I CAN enable that on my browser.
I'm a bit stuck and I think it's because largely I don't really understand this lol. The bits of code that did work are much simpler than the ones I'm trying for the navigation bar. Is there a simpler way I can do it with the navigation bar? Something similar?
Is there an entire other way to do this that's simpler? I did try looking for a hidden buttons or simple skin that focused on all it buttons but couldn't find anything
-thank you
I figured it out for you and tested it on mobile to be sure it worked!
I used the :has() selector here to ensure that you wouldn't end up with empty elements that could leave you with uneven spacing (difference below)
Your code would be this! V
dashboard li:has(a[href$="/assignments"]),
dashboard li:has(a[href$="/signups"]),
ul.navigation.actions li:has(form[action$="/subscriptions"]),
ul.navigation.actions li:has(a[href$="/invitations"]){
display:none;
}
8 notes
·
View notes
Note
Hello! I've been trying to do an Ao3 skin by myself with my limited coding skills and erasing the underlines on titles, tags, etc has been really frustrating.
I've tried with h1, h2, h3, h4,
.heading { border-bottom: none;}
but didn´t get to anything, got any tips?
Please T_T
a.tag {
border-bottom: none !important;
}
.header.module a {
border-bottom: none !important;
}
.warning.tags a {
border-bottom: none !important;
}
.series a {
border-bottom: none !important;
}
.jump a {
border-bottom: none !important;
}
this should do the trick for you!
I color coded each change below so you can know what each line targets as well
2 notes
·
View notes
Note
Would you happen to know if it's possible to use css to change the formate of ao3s blockquote?
Standard blockquote is an indented portion of text with a left border
I wanna know if (maybe keep the indentation if that's unchangeable) I can specifically change the blockquote style (ex. Text color, font, background image, border decoration, ect.) Or if I can't
I use blockquote to show flashback scenes. I understand if I can't change blockquote and would just need to use <div class> but might as well check for possibility
This is absolutely possible, just create a workskin that targets blockquote elements
rather than having workskin css that looks like
div.classname{
...
}
you can should use
blockquote{
...
}
The indentation can be removed with "margin-inline-start: 0;"
2 notes
·
View notes
Note
Hello! So I could *swear* that I've seen this before but I can't find the 'how to'
Is there a way for an image to be immediately resized to fit the screen? So instead of having to input width and height, it'll always fit the screen because inputting specific numbers in width and height doesn't help when using landscape and portrait images.
Thank you so much for any help you may provide!
Hello! to do so you will need to use percentage dimension properties!
the red here is to illustrate the size of the page. And your code would be:
<img src="image.png" height="100%" width="100%"/>
6 notes
·
View notes
Note
Hi, how are you supposed to type "layout.css.has-selector.enabled" and set it to "True"? I tried but it just ended up merging with the next thing on the code (an li.blurb)
Also I think that's why I cant use "li:has(a.tag[href*="/THE TAG/" i ]){display:none !important;}" in my site skin?
Please and thank you <3
The has() selector is disabled by default browser wide if you use firefox, info on how to enable it can be found here
3 notes
·
View notes
Text
the code for these has been optimized and updated. no major functionality change has been made, it was simply shortened.
HD AO3 Icon skin
I thought they needed a little revamp ^^'
includes these icons and the others. CSS skin for 25x25, 50x50 and 100x100 versions below!
25x25 50x50 100x100
as a side note, I am not 100% sure that my css replaces all of these icons, some of them IDEK what they are for (the hand ones by example) but I did search for and replace every instance of the original icon sheet being used so hopefully that got them all, otherwise it will show the original icons so it shouldn't cause any problems. But please let me know if you do find some that are missing.
*I included a 100x100 version, but please keep in mind that this loads a larger file, it could affect your data/WIFI usage so I would not recommend using that resolution if you have low internet speeds/limited internet, use 50x50 or even 25x25.
enjoy!
105 notes
·
View notes
Note
hey lovely, so I've changed my siteskin with the wizard tool and up in the navigation panel all the writing is white as I've set it to, however just the fandoms heading is still in black and it's been driving me nuts lol any idea what to put in the css to fix it?
could you please send me a screenshot, I do not know what you are referring to.
0 notes
Note
I'd like some help please! When I open ao3 onto my homepage there's the "Find your Favorites!" Listing of favorites tags. New siteskin has kept the default "even-listing has different color block from odd-listing transparent block" where the even-listing is a white color. Would you happen to know how to change the color? Thank you do much for any help you can provide!
Absolutely. Ao3 uses this (below) to set odd favourite blocks grey in their default skin, they do not have a line of code to specifically set even blocks as white, but this is solvable.
to change the color of even favourite blocks, use the code below:
.splash .favorite li:nth-of-type(even) a {background:(color here);}
With this you're going to want to add the following to your code as well
.splash .favorite li:nth-of-type(even) a:hover,
.splash .favorite li:nth-of-type(even) a:focus {
background:#900
}
This will define what color your even favourite block's background should turn to when interacted with, the default is ao3's default dark red color. Not setting this will (by default) turn your text white while keeping the background unchanged when interacting with even favourite blocks.
Hopefully this works for you!
3 notes
·
View notes
Note
Hello! Thank you so much for making this blog. Like an angel in my time of great need~
Is there a way to add a block behind the story text? A continuous block (I messed around and found out that manipulating the [p {}] isn't a good idea)
Firstly, you're welcome!
Second, I am not sure what you have in mind here, in general, I suggest for requests to come with a mock-up image demonstrating what you're wishing to accomplish, imgur links should do if you prefer to stay anonymous while attaching an image. otherwise if you send an image through my ask box saying "hey keep me anonymous", I will do as such.
However, I am guessing that you're trying to do something like this?
if you wish to edit the style of paragraph block on fanfictions, you're going to want to use
.userstuff p {
}
(the userstuff class is what contains the paragraphs of a fic posted on ao3)
1 note
·
View note
Text
Are the public work skins listed on ao3 really the only public skins out there? If so, that's crazy, But I will change that.
although this one will need a whole lot of changes, ao3 limits many css styling rules (might document those eventually)
3 notes
·
View notes
Text
a prototype of something that I'd love to make possible for fanfiction and other written works
5 notes
·
View notes
Note
hey, same anon from latest post. That makes sense, I guess the problem was that I was on mobile so I wouldn’t have been able to do that. Good to know for next time though, I’ll just go on my computer if I need to figure out more code lol
Oh yeah, you definitely want to be on your computer for that.
#I'd love to see inspect element on mobile one day but i don't think that it could be manageable#Gotta say tho#You've got some patience anon 👌#Ask
0 notes
Note
Do you happen to know the CSS code to change the colour of the box as well as the text inside the box that warns you before you open a fic that could contain adult content? Every public skin I’ve tried keeps it as bright yellow and in my dark mode custom skin I somehow changed it to black along with the regular background without me doing that intentionally but the text is also black, so it blends into the background and I can’t read it at all. I made that skin in 2020 and I've just been putting up with it being invisible for 3 years but today I decided I wanted to search for how to change it. However I've searched all over the Internet and no one has talked about changing the colour of this box. Can you help?
.caution {
text-color:
background:
border-color:
}
Hey, congratulations on figuring it out!
I would like to note that it is much easier to find elements though inspect element. on most browsers, right click an element you wish to edit and select "inspect"
and it will usually give you the style elements of what you clicked on right away!
3 notes
·
View notes
Note
hi! how did you create your custom icon skin? i've been using your code as a base to try to create my own icons but when I replaced your URLs with mine it woudn't work, any ideas?
Are your icons all layed out and compiled into the same image? The code (and ao3's original code) utilize a single image. I suggest referencing my original images.
#otherwise sending a portion of your code over might help me figure out why it's not working#I just realized that there's a way for me to make that code more user friendly#will do and document later#ao3 css#ao3 skins#ask
1 note
·
View note