sarken: anderson cooper in oscar the grouch's trash can ([pundits] ac for gnn)
[personal profile] sarken posting in [community profile] ao3_skins
This is a simple add-on skin that recreates my previous skin for the archive's updated skin system. It was made rather quickly and thus doesn't contain the detailed comments that gave the original its name. It uses the show all of a user's fandoms tweak, inspired by [personal profile] mumblemutter.

On my Mac, it works equally well in Firefox 8 and Safari 5 (and thus likely works on Chrome as well). A few tweaks will get it looking good in Opera 11. If you follow the directions and use the handheld sheet, it's also ready for the mobile version of Safari, and possibly other mobile browsers.

Preview images of the dashboard and work views are under the cut, and you can click them for the full-sized versions.



Preview of Describe skin in dashboard view

Preview of Describe skin in work view

Describe - All


Describe - Handheld


Disclaimer: This might not be the fastest or best way to create a skin like this, but it was the first way that worked after multiple attempts, so I decided to leave it here. You might be able to make it work just by setting the all media skin as the parent of the handheld skin, but with how finicky the latter was about updating, I couldn't be certain.

1. On the My Site Skins page, click Create Skin.

2. On the Create New Archive Skin page, make sure "Type" is set to "Site Skin."

3. Enter a title, like "Describe - All Media." You might also want to include a description such as "All media overrides for Describe skin."

4. Paste the Describe - All Media code from above into the field named CSS.

5. Click the "Show" button next to "Advanced." You shouldn't have to change anything here, but the "What it does" settings should be "add on to archive skin" and the "Media" settings should be "all."

6. Click Submit.

7. If all goes well, you will be taken to a page with a "Skin was successfully created" message above the title, description, and code. You will still be seeing the site in its regular skin.

8. Now click the Create Skin button that's on that page.

9. On the Create New Archive Skin page, again make sure "Type" is "Site Skin."

10. Enter a title for this skin, like "Describe - Handheld." You might also want to include a description such as "Handheld overrides for Describe skin."

11. Paste the Describe - Handheld code from above into the field named CSS.

12. Click the "Show" button next to "Advanced." This time, the "What it does" settings should still be "add on to archive skin," but the "Media" settings should be "only screen and (max-width: 480px)."

13. Click Submit.

14. If all goes well, you will again be taken to a page with a "Skin was successfully created" message above the title, description, and code. You will still be seeing the site in its regular skin.

15. Click on the Create Skin button that's on that page.

16. On the Create New Archive Skin page, make sure "Type" is set to "Site Skin."

17. Enter a title, like "Describe." You might also want to include a description such as "Combines screen and handheld."

18. Don't paste anything into the CSS.

19. Click the "Show" button next to "Advanced." The "What it does" settings should still be "add on to archive skin," and the "Media" settings should be "all."

20. Now click "Add parent skin."

21. For "Parent #1," start typing the title of your first skin -- "Describe - All Media" -- and then select if from the autocomplete menu that shows up.

22. Click "Add parent skin" again.

23. For "Parent #2," start typing the title of your second skin -- "Describe - Handheld" -- and select it from the autocomplete menu.

24. Click Submit.

25. If all goes well, you will again be taken to a page with a "Skin was successfully created" message above the title, description, and list of the two parent skins. You will still be seeing the site in its regular skin.

26. Click Use, which is in the lower navigation menu.

27. The site skin will change and the blue box at the top will now say "Your preferences were successfully updated."

Feel free to modify this skin however you like. If you do something cool with it, even just another color scheme, I'd love to see it. I will endeavor to keep this updated as changes are made to the archive. If you notice something broken, just holler. (The child selectors on h3.heading links are broken, but should work fine once the parser is fixed.)

Updated 28 March 2012: Overrode link hover color in footer, made user name link in header visible, added background color to indexes on edit multiple works page.

Updated 8 February 2016: Updated to make the main navigation more closely resemble the image, and to fix some default colors that were showing through.

Updated 26 March 2016: Updated to restore the link styling in some places.

Date: 2013-01-01 08:27 am (UTC)
sapphoatsunset: (Lizzie Bennet Diaries - Heyyyy~)
From: [personal profile] sapphoatsunset
Thank you for this :)

I updated the following colors:
#E0AE1A - Navigation
#F5C947 - Navigation Hover/Visited Link/Work Link

and in
#header .primary input[type="text"] {
font-weight: 400;
background-color: #F5DA8B;

so, now it looks like (and please forgive aspect ratio in advance... rough guestimating this):





Thank you!

Date: 2013-01-03 07:33 am (UTC)
sapphoatsunset: (Default)
From: [personal profile] sapphoatsunset
No, thank you~~ ^^

Profile

ao3_skins: OTW logo with text "Emerging" (Default)
AO3 Skins

August 2017

S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Oct. 23rd, 2017 10:23 pm
Powered by Dreamwidth Studios