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: 2011-11-24 06:35 pm (UTC)
turlough: The Girl & Party Poison (Grace Jeanette & Gerard Way) high-fiveing, on the set of Na Na Na, Sept 2011 ((mcr) yeah!)
From: [personal profile] turlough
Yay!!!

Thank you so much!!

Date: 2011-11-24 07:36 pm (UTC)
vangirl: (Default)
From: [personal profile] vangirl
Oh this is lovely. Thank you for sharing! :)

Date: 2011-11-28 07:58 pm (UTC)
turlough: art of Frank Iero asking a question ((mcr art) excuse me?)
From: [personal profile] turlough
I've got a question if you don't mind?

In the old version of this skin the date and time a comment was posted appeared at top-right (like this) but in the new version it's at bottom-left (like this). Is there any way of getting it back the way it was?

I've tried fiddling around with CSS without success and I've a horrible feeling moving it will have to involve making a Greasemonkey script. Tell me it isn't so?! :-)

Date: 2011-12-24 05:37 am (UTC)
tree: a figure clothed in or emerging from bark (Default)
From: [personal profile] tree
i have had this open for a month now and finally forced myself to sit down and follow all the steps. so firstly, thank you for making it and also for writing down all the steps. secondly, i have two questions. the first is, is it possible to keep the list of fandoms inline but not have it centred? because i like the way you have them in a sort of cloud like that, but i'd prefer them to be left-aligned.

the second question is, why is this happening?:



it looks as though the boxes for the link text are slightly larger than the bar they're sitting in and they hang over a bit. this only happens in FF (i'm using 8). it looks fine in safari. which leads me to believe it must be something to do with my firefox settings. so, that's odd.

anyway, thank you. :)

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: 2016-02-08 12:03 pm (UTC)
meicdon13: (Default)
From: [personal profile] meicdon13
Thanks for this! I'm using it as-is right now, but I'll probably fiddle around with the colors and or font sizes at some point.

Edit: Here's a screenshot of what I ended up with. I tweaked the font sizes, added a bit of code to make the content/space taken up by the actual fic a bit narrower.

Still a bit unhappy at the colors that appear when I hover over the navigation and greeting tabs and I when you hover over the fandom name it's going with the AO3 default of maroon background + white text but I can't figure out what parts of the code to change. Oh well.
Edited Date: 2016-02-08 04:15 pm (UTC)

Profile

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

May 2017

S M T W T F S
 123456
78910111213
14151617181920
2122 2324252627
28293031   

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Jun. 25th, 2017 08:53 pm
Powered by Dreamwidth Studios