Skins: A Love Story (by lim)
Published: 2011-11-11 19:42:03 -0500
This reference list of new skins was compiled by front-end coder lim. Lots of modular skins have been created to modify different aspects of the Archive. You can combine different skins to get exactly the look you want. More info coming soon on how to get the most out of the new skins!
Reference and Teaching List of Completed Skins
I've tried to comment quite extensively inside the skins.
Shows, hides, and rearranges the blurb. You can chain these together to perfect your metadata display.
- Hide warnings
- Hide stats
- Hide summaries
- Hide tags
- Hide fandom
- Hide datetime
- Hide freeform tags
- Hide relationships
- Hide characters
- Hide nearly everything (except the title, author, fandom)
- Hide everything except the header
- Show the landmarks (landmark headings on tags, summary, etc)>
- Blurb drop drops the blurb group entirely (makes a plain text blurb)
- Shipper emphasises the relationship tags
- Faint Warning de-emphasises the warnings
- Chain Example demonstrates chaining.
- Byline Breaks the tags out into blocks by type (updated version of a skin by Branch so doesn't use the blurblings nomenclature).
Similar to blurblings, but modding the work view
Typeset In My Ways
This series is tarted up code from our very first Accessibility, Design and Technology meetings in 2007. Very stark, very simple text styles.
- Typeset In My Ways Uses the Archive typography and layout, with plain text blurb and a limited width work view.
- Typeset In My Ways Erasure drops all archive parents except core and loads a simple typographical style.
- Typeset In My Ways Sans simple sans serif text.
- Typeset In My Ways Serif simple serif text.
- Typeset In My Ways Negativity light on dark
- Typeset In My Ways Terminal simple console/terminal style
- Typeset In My Ways Scully simple Word Perfect style
- Typeset In My Ways 2.0 uses Archive 2.0 style but plain text blurb and big margins.
- Typeset In My Ways Landmarks shows the landmarks and lays them out
- Typeset In My Ways Textura adds a (subtle) textured background
various screenreader optimisations
- Screeny Exposure! exposes all landmark headings to the readers that can't read them.
- Screeny Oppression! suppresses all landmark text.
- Screeny Drop It drops all archive parents except core
- Screeny She's Got Form drops all archive parents except core and interactions.
- Screeny Shut It Any component you don't care to read, add to the beginning of this code, or remove ones you do want. Remember to separate with a comma!
- Colour Flip Combos a reference skin grouping the archive into a 5 level colour and contrast palette.
- Key Colour Reference this lists everything that is red.
- Exploded Worker this is an advanced parenting reference parent. *g* It explodes the archive 2.0 cascade into all its component parents, so you can live edit the CSS in tabs with a plugin like Firefox Web Developer. Only use this for reference, because it will slow down your page load.
- Trouble O'Head zeroes out the default background, borders, and shadows on the header navigation. This is useful to just parent in when you don't want to drop the whole AO3 header region style.
- Region Drop this is an advanced parenting parent for replacer layouts. It drops header, dash, footer, and main from AO3 default. In most cases you're better off overriding instead. Check out Trouble O'Head for fast header overrides and the Tile Puzzle series to move the dashboard around with overrides.
I've uploaded a ton of tiling textures you can call to decorate your layouts. There are loads more graphical styles to come but this is what I could do with two days notice!
- Simply Twilling introducing textures - this is a simple override CSS3 skin that demonstrates how you can leverage region and group transparency to build dramatically different styles quickly.
- Threw Twill Out an introduction to parenting.
- Desk Job a template "desk top" layout you can adapt to your own design. [needs a bit of testing so have not preloaded sorry]
- Panda Madness this is like, pink and round and it has pandas on it
- The Hustings a stripped down version of a more complex theme made ready quickly for deploy
Here I'm demonstrating breaking a css3 theme apart into components so each piece can be used in other skins. There are brill free fonts to download linked in. CSS3.
- Chained Buttons
- Chained Head hover the icon
- Chained Groups
- Chained Quotes
- Chained Icons
- Chained Key (colours, fonts, background)
- Chained Melody the whole lot chained together
A fixed region layout, again with components you can use in other skins pretty easily, but this one drops components of the site style: it doesn't just override them, it replaces them. Free fonts to download linked . IE7 and up
- Fixie Fix explodes the site layout and takes out portions of it, then fixes the regions: header, dashboard, footer, and scrolls the main region. This is "parent only" meaning you have to chain it in to a style - it doesn't work on its own as a layout.
- Fixie Buttons makes scribbly buttons with Mido font
- Fixie Icons make scribbly backed icons
- Fixie Groups this makes some swooshy CSS3 rounded boxes
- Fixie this chains everything together to make a layout!
- Fixie Free Wheel (coming soon) this spoofs the basic look of Fixie, but as an override skin, and with normal scrolling regions.
Colour changes, some based on the most popular colour changes in the old skins system
- Mono black and white where red all over
- Zebra Mono black and white where red all over, with zebra fur detail
- Reversi light on dark, with blue key
- Dusted off based on Dusty Rose by sistabro
- For the trees based on Sunny Forest by enigel
- The Blues based on Medium Blues by Arduinna
- Snow makes everything that is very light lavender pure white. Useful to chain in.
- Snow Blue
- Get the Backers makes all the group backgrounds white.
- Wide Horizon Horizontal dash in blocks
- Dash Line Horizontal dash, inline
- Eyes to the right Right side dash
- 100% width filters
- Stick It sticks the secondary (page specific) navigation to the left and fixes it there
- Mark My Words Shows all landmarks and gives some minimal visual style
- Slim Shaded makes a slimmer, texty header, with a shaded strip, snow body, and lowercase buttons
- One Point Faux spoofs the old style on top of the new style. Might look slightly different to the original old style, but broadly the same.
- 2 Point No takes off all the box shadows, text-shadows, and rounded corners
- Look and Read swaps the logo for a text title: "Archive Of Our Own
- Imago swaps your header icon for a text greeting: "Hi, username!"
- Incommodious takes off the commas we add into long lists of inline tags, if you find them odious!
Some pure CSS3 mods. Modern browsers only.
So you can just stick on different buttons.
- Aqua Buttons You can just swap the buttons, or use them in a more complicated layout.
- Gel Buttons showing how you can change the colours for a different effect.
- Scribble Buttons pencil scribble buttons good for paper styles.
- Massive Buttons they're really big and bold.
- Don't Care A Button makes the buttons just plain text.
- Dusted Buttons chain in Dusted Rose