#css code

[bugaddict]

Low Contrast Dark Mode skin for Ao3 with Serif fonts

Code here • How to Install

[inegenly]

An Archive of Our Own, a project of the Organization for Transformative Works

Did you ever think to yourself, "I wish AO3 looked as pretty as Ellipsus, with the same themes to choose from?"

Well, now you can!

I've created a series of site skins based on Ellipsus themes. Just follow the instructions and copy the code! TRUE VALENTINE

A light mode theme that's described by @ellipsus-writes as "we’re pretending it’s platonic (it's not)."

[divinitasephiroth]

"How curious," Sephiroth murmurs, his voice dropping to a velvet whisper that brushes against the shell of Cloud's ear. "You attempt to hide your true self beneath layers of lace and this gown, yet the masquerade only makes your spirit burn brighter. You seek to deceive the world, but you cannot deceive the blood we share."

He reaches out, his gloved fingers hovering just inches from his chin, tracing the air as if feeling the vibration of Cloud’s mounting indignation. There is no mockery in his eyes—only a terrifying, singular focus with a smile.

[monolynn]

@roseyvern brought up a good question:

I know this post is a tad old, but I've been going crazy trying to figure out how to even LEARN the CSS stuff and all I'm getting is recourses for HTML. How did you go about learning??

So, here is a super quick and short guide to using and learning CSS code!

There are three things that I use when I'm writing my CSS code:

The 'Inspect' tool!

This is literally your best best friend, bro. I'm unsure if you can access this on iphone/android, but on desktop if you right click anywhere on your screen and go all the way down to 'Inspect' OR just click F12 on your keyboard, a side bar will pop up. It should look like this:

Now, it looks like a hot mess of code that can confuse you, but we're only using this for one specific thing! When writing CSS code, you need to know the name of whatever you're trying to change and this Inspect tool will show you the name of the specific area!

For example, let's say you want to change the little banner at the top to another image! Or, maybe you want to get rid of it altogether! Right click on the banner area, click Inspect, and the area that is being highlighted will show up in code. It should look like the image below:

[Hint: if you hover your mouse over the code, the area it's talking about with highlight just as in the picture below. It doesn't show my cursor, but my cursor is currently hovering on the code, and as you can see, the banner is being highlighted in a blue box]

As you can see from the image, the banner itself is called 'banner' in code. Along with that, you can see that the image background is being controlled by another code 'background-image: url(INSERT IMAGE ADDRESS URL)'. These are the two codes you need to know if you wanna change the background!

ALL CSS CODE IS FORMATTED LIKE THIS!!!

.example {   property: value }

Thus, with that in mind. If you wanted to change the banner to a different image, the code would look like this:

.banner {   background-image: url(https://i.pinimg.com/1200x/29/d0/03/29d003d3a371a7780cf875ab8c0acd04.jpg) !important }

[Hint: if you look at the code, the properties are within a brace/bracket {}, this allows the properties to work for a specific item + helps to keep different properties of different items from interferring.]

Now, as you can see, there was something I ended up adding for this code to work. This is the !important keyword. DO NOT OVERUSE THIS KEYWORD NOR USE IT FOR EVERYTHING! This is something you'd use if there is any conflicting code and you want to override it. There are some cases where a code will not work unless the !important keyword is in place. The banner is just one of those cases.

Not only this, but multiple properties can be used at once for an item.

.banner { background-image: url(https://i.pinimg.com/1200x/29/d0/03/29d003d3a371a7780cf875ab8c0acd04.jpg) !important; background-size: cover !important; background-position: center !important; height: 300px }

[Hint: properties and values can be found within the Inspect tool and shows you what you can change. I showcased this in the image below in the red box]

Like I said before, the Inspect tool is legit your best friend. If you love the way someone's ArtFight CSS code looks like, you can always go to their profile and learn the different values and properties they used to change their code!

2. Use pre-made CSS codes to learn!!! There are many examples of code snippits that people make and they are all so so good to use and learn from. Here are some links to themes and code snippits that are very useful! These are only few of the many out there:

https://toyhou.se/~world/182526.art-fight-assets/characters/folder:5716859/tags:1/order:group_age_desc

https://toyhou.se/~forums/16.htmlcss-graphics/663153.battalias-ftu-artfight-css-templates

3. The ONLY CSS guide I ever used while learning all of this slowly was: https://www.w3schools.com/cssref/pr_background-position.php. This Guide has a TON of properties and examples of how to use them within code. Just remember that not everything can be used. ArtFight restricts a lot of the code so you struggle to try and move some items around. If a code doesn't seem to work (esepcially if you're trying to move your profile image or something of the sort) then it is most likely being restricted by ArtFight itself. Sadly, you can't fight it ߹𖥦߹

The best way to use this guide is to try and see all the types of values you can change for a specific property. For example, the banner image again. There are different types of values for different types of properties

For the background-size property, the different kinds of values are (I used the 'cover' value for my banner example):

That's all that I can think of at the top of my head! Again, this is a SUPER DUPER SHORT GUIDE!!! There is still so much out there that you can do, just have fun and try things out! Coding is always trial and error.

I'm not much of a coder myself nor do I know all of the properties and values that I can use, but so far this is what I know!

If there's anything I missed or said incorrectly, please feel free to correct me! 𐔌՞ ܸ.ˬ.ܸ՞𐦯

[catras-breakup-song]

heyyyyy fellow AO3 users... could i ask for a favor if you know how to edit the CSS code of an existing site skin and what all the parts do? as in, could i send it to you and have you change a detail? it seems easy but i'm very sure i'll get confused and mess something up 😅

currently, i use this skin since it's my favorite and really easy to navigate/read with, and i simply just want to change the color theme from teal to purple (any shade/tone/etc. that works well!):

Reblog by @tealtiam · 4 images

💬 5  🔁 77  ❤️ 434 · I updated the skin and fixed most bugs. check it out if you're interested. relationship and characters tags have differ

(it's funny that i say this considering my blog theme is green, but that's not my best color elsewhere lol + i use a purple icon on AO3 anyway)

[randygrim]

Retro Computer Css & Html Bundle!!

This is a customizable toyhouse code meant to make your page look like a retro computer. If you are interested, consider purchasing on kofi!!

Retro Computer Bundle - randygrim's Ko-fi Shop

This Css customizes your Toyhouse to look like a retro computer! This bundle includes the customizable Css, plus the font and main backgroun

[crownjpg]

I may make a green version of this theme but idk yet 🫣 it takes min to get everything switched.

I do however plan to have a green color scheme/color way on the next theme. The next theme will have a left side sidebar and be 1-2 columns. The one live on my blog right now can be 1-3 columns. I did away with masonry so it loads a bit funky now but overall it seems much faster & infinite scroll crashes less thus far. It’s more stable because it utilizes a grid theme in the .css 🫶🏻.

[pirate-redhead]

Pride Flag AO3 Skins

An Archive of Our Own, a project of the Organization for Transformative Works

Here are some CSS pride skins for AO3. Instructions on how to use these are on chapter 1. Even though the fic is complete, requests for new and altered versions are welcome. All current flags are below the cut.

Pride Flag (the current rainbow flag with the triangle)

Lesbian

Gay

Bi

Trans

Queer

Intersex

Aspec

Sapphic