Chapter Text
In this chapter, learn to create a custom site skin that includes a custom banner at the top of the page. It's easier than you think.
You need to be able to:
- Copy and paste.
- Follow a few directions.
- Be able to create an image for the banner (with Photoshop or some other photo editing software).
PLEASE NOTE
While you can do this on your phone or tablet, I highly recommend that you do this on a PC. When doing it on a phone or tablet it's very easy to accidentally not copy the entire code. If things aren't working for you after following this tutorial, there's a 99.9% chance that not all of the code was copied and then pasted.
Step 1 - Create a JPEG image that is 1800 pixels wide x 500 pixels tall. You can do this in Photoshop and in various other software. GIMP is a free software you can use.
This image is going to be your banner image.
If you plan on reading on your phone or tablet, be sure that whatever the most interesting element of your banner image is right in the center of the image. Below is an example of a banner image I made:
Step 2 - Upload your banner image to a website like IMGUR (as a photo, not as a post). In a few steps you're going to need the direct link to the image you posted.
Step 3 - Go to your dashboard on AO3, then to 'Skins', which should be located under 'preferences.' At the top right of the Skins page, click the button that says 'Create Site Skin'.
Step 4 - Give your site skin a title and description.
Ok, now we need to add some code that will add a banner. It's easier than it looks, I promise.
Step 5 - On that same page as above is a big blank space that says 'CSS.' Copy and paste the code below this line in it's entirety, then paste it into the 'CSS' section. Then click 'Submit.' Then continue on to the next chapter of this tutorial.
#header h1 sup,
#header .button,
#header .landmark,
#header .logo {
display: none;
}
#inner.wrapper {
margin: 0em 4%;
}
#header .heading {
height: 20em;
}
#header {
background-color: #ffffff;
background-image: url("https://i.imgur.com/5fJKQZb.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-bottom: 2px solid #fff;
}
#header .heading a {
color: #fff;
padding-left: 1em;
}
#header .primary {
background: none;
box-shadow: none;
}
#greeting {
background: none;
margin-right: 0em;
position: absolute;
right: 0em;
top: 18.5em;
}
#header .primary li:not(.search),
#header .primary li a,
#greeting li,
#greeting li a {
color: #FFF !important;
background: #263032;
border-top-left-radius: 2%;
}
#header .primary li:not(.search),
#greeting li {
border: 1px solid #303c4c;
}