Archive of Our Own ^beta

AO3_Support (Official) Thu 12 Jun 2014 11:36PM UTC

Hi, salty_catfish!

It is possible to to create mobile-friendly functions in an Archive skin, but it’s definitely not as obvious as it could be. It’s a multi-step process and will require you to make three different site skins before you’re done.

A1. You should already have a site skin created that you won’t need to make changes to. Go to ao3.org/skins.

B1. Create a new site skin.
B2. Name it similar to the first skin, but add the word “Mobile” to the name.
B3. Make it pretty, adding whatever CSS changes you’d like for mobile.
B4. Go to the bottom of the page and select “Show” for the Advanced options.
B5. In the Media section, select “only screen and (max-width: 640px)” (it’s at the bottom of the list).
B5. Select “Submit”.

And now, the magic:

C1. Create a new site skin.
C2. Name it similar to the first skin, but add the word “Composite” to the name.
C3. Go to the bottom of the page and select “Show” for the Advanced options.
C4. In the Parent Skins section, select “Add parent skin”.
C5. In the text field for Parent #1, type the name of your original skin from the A section. The autocomplete should suggest a name.
C6. In the Parent Skins section, select “Add parent skin”.
C7. In the text field for Parent #1, type the name of your mobile skin from the B section. The autocomplete should suggest a name.
C8. Select “Submit”.
C9. Select “Use this Skin”.

The site should now display the A skin on any screen that’s more than 640 pixels wide, and the B skin on any screen that’s 640 pixels or less. If you have any questions, let us know!

Best,
Sam J.
AO3 Support

Comment Actions

• Thread
• Parent Thread