@thel1ghtningthief was wondering how I was able to put an image beside the favourited tags on the homepage. This is how I did it.
So, the first thing that you need to know is that any website is just a bunch of containers stacked on top of and inside each other. Here's a simplified version of what I mean for AO3
Each of the boxes on this page can be individually styled. I can make each one of them bigger or smaller. I can change their backgrounds. I can make them entirely disappear. The key is in being able to identify where the rectangles are and what they're called.
That's where your browser's Inspect feature comes in.
On a computer browser* right-click on the page you want to look at and choose Inspect from the menu that appears. Here's a video to show you more, if you want to learn how to do it yourself.
*This is also possible on mobile, but I can never remember how because I just can't handle coding on a phone
Inspecting AO3's homepage tells me that the box around the favourites is a div (which is a kind of HTML container) and that div is called .favorite.module.odd
(insert obligatory complaint from me that Americans don't put a u in favourite or colour and they also spell centre with an er and that I inevitably typo a half dozen times at least any time I build a skin)
Now that I know the name of the box, I can add styles to it. Styles are written in CSS, not in HTML. To style something in CSS, you first name the thing you want to style and then you put a { and then you enter all of the ways you want to style it and then you finish with } So my code is going to look like this:
favorite.module.odd {
stuff I want to do goes in here
}
Since I want to use an image in the background, I first need to host that image somewhere on the internet. I can't just upload the file directly into my skin. These days, I host my images on tumblr but you can choose whatever location works for you.
Once I have the file hosted, I can now insert it into my div container as the background. To do that, I need to tell the code where on the internet that image can be found.
favorite.module.odd {
background-image: url("https://64.media.tumblr.com/25479c3a33679580f8c278d08050f198/2ff582fea26b7b91-b8/s400x600/2a2e87b54e570b1d66e881af098597af96e97cfd.png");
}
Since the image is hosted on tumblr, I need to point the CSS to that exact image url. I also need to tell the CSS that it is url, which I do by indicating url(" ")
Another sidenote here to say that tumblr and other sites sometimes save images as .gifv or .pnj etc for reasons of their own, but AO3 site skins need to end in .gif or .png or .jpg. Just rewrite the end of the url and it works fine 👍
The default when you set an image background is to have a background that repeats itself over and over to cover the full size of the box. Since I don't want that to happen in this case, I need to add more code to tell it what I want it to do. I want it to:
be smaller than the actual image is (which is bigger than the container I'm putting it in)
appear at the bottom right corner of the box
I have a few ways to do the sizing, but what I opted for in this skin was
.favorite.module.odd {
background: url("https://64.media.tumblr.com/25479c3a33679580f8c278d08050f198/2ff582fea26b7b91-b8/s400x600/2a2e87b54e570b1d66e881af098597af96e97cfd.png");
background-repeat: no-repeat;
background-size: 40%;
background-position-x: right;
background-position-y: bottom;
}
A better way to do the size would probably be something more like
background-size: auto 30%;
That would make the height of the image 30% of the height of the container and the width would be automatically calculated to keep the aspect ratio the same.
So there you go. A long, detailed explanation of how I put an image in the lower right corner of the favourite tags on the homepage. And now you have a better idea of what I do for all of the various boxes on AO3 when I'm making a new site skin.
If you think this is as cool as I do, feel free to hit me up. I'm a nerd for AO3 skin coding, and I love to overshare.
