ao3 css

My own fiddling has come to nought, so I'd be grateful for any help you can provide! Thank you.

1. your blog is so cool, literally a life saver for me <33

2. do you know how to change the text on the "Hi, user!" greeting? I'm getting so close to figuring it out but I can only figure out how to change everything BUT the text lol

Hello! you unfortunately cannot truly change text though css. the only workaround i know of is through the usage of :after/:before elements and it's not a neat or clean solution, but it can work okay.

.dropdown-toggle[href="/users/YOUR_USERNAME"]{ font-size:0!important; position: absolute; top:-6px; } .dropdown-toggle[href="/users/YOUR_USERNAME"]:before { content:"CUSTOM TEXT"; font-size:17.5px!important; }

Values in red might need to be tweaked, I recommend doing so through inspect element

I want to strikethrough some words within the title of a story but 1. Don't know and 2.am unable to experiment currently.

Hello, this should do the trick!

work-filters fieldset *{ color:blue; border-color:blue; } work-filters fieldset, #work-filters fieldset input, #work-filters fieldset select{ background:red!important; }

the line in cyan is optional, it is to color the separators, which I deemed relevant.

Mentioned ask here to only change the colors you will need to remove the css attribute responsible for rounding, which happens to be "border-radius", I removed it in the snippet below.

.actions a, .actions a:link, .action, .action:link, input[type=submit], button, .current, .actions label { background:rgb(255, 157, 174);}

I have images typically off in fics, but sometimes I want to read fan comics that have been posted onto ao3 and it's been a bit annoying to constantly have to switch skins to see images in works.

I was wondering if there is an option to do this in a skin. I considered doing a hover option but because I often read fics on mobile I wasn't sure it would still even work like that.

What I want is to include copyright/licensed songs within a fic. Imagine listening to "Smooth Criminal" by Michael Jackson during a heist scene.

You can! Spotify has a feature for this purpose as shown below.

After you copied the embed code, simply paste it into your work. However, Spotify might not be ideal here. Listening to tracks though it beyond a preview requires opening Spotify and having a Spotify account. I believe that embedding the song though YouTube could make it more versatile and accessible as long as the video doesn't restrict external play.

To embed a song through YouTube do as shown below and paste the code into your work.

I'm very much a noob when it comes to coding anything, I usually just grab something from a tutorial like the above HTML code, but the CSS tutorials I came across might not work with AO3's skins? Is what I'm trying to do even possible?

Thank you in advance for your advice!

For this you will need to make a work skin that contains:

.OverlayedText { line-height: 0%; }

(you don't have to call it "OverlayedText", feel free to chose whatever class name you find most convenient)

And in your work (which must have the work skin you made in use), you will need to format the text you wish to overlay as follows:

(Each line is to be separated with "<br/>".)

It will look like this:

As a side note: if you'd like for the lines of dialogue to be overlapped and legible enough to be read, you can also set the line-height value to 30%~50%. It will reduce the overlapping, but should still give the impression that both lines are spoken at the same time.

this should do the trick!

sure thing!:

.actions a, .actions a:link, .action, .action:link, input[type=submit], button, .current, .actions label { background:rgb(255, 157, 174); border-radius: 1em; }

I wanted to ask you how to change the shape of the profile picture, like a heart for example? In general it is square and I saw that in some skins it is circular

This is so cute! here's what you can do:

.icon { mask-image: url(https://64.media.tumblr.com/9ba116de84c2a4025308efe00c868ba9/34dd23f1e72d362f-9b/s250x400/37485c4039f765ab39f104b464dfec3c6dfda3fd.pnj); mask-repeat: no-repeat; mask-size: 100%; }

or:

.icon{ -webkit-mask-image: url(https://64.media.tumblr.com/9ba116de84c2a4025308efe00c868ba9/34dd23f1e72d362f-9b/s250x400/37485c4039f765ab39f104b464dfec3c6dfda3fd.pnj); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; }

(Both do the exact same thing, but some browsers need the -webkit- version)

Any transparent image (the one below is the one used in the code above) can be used as a mask. (Rounded corners can be done with the border-radius property)

you can make a work skin that contains:

p {text-indent: 3ch;}

Hello, I would use the following:

.work.blurb:has(.category-slash){border-color:blue;} .work.blurb:has(.category-gen){border-color:green;} .work.blurb:has(.category-femslash){bordercolor:pink;} .work.blurb:has(.category-het){border-color:purple;}

I would also add:

.work.blurb{border-width: 5px}

or

.work.blurb{border-top-width: 5px}