A few example skins

[cesy]

To use these, just paste the relevant code below into the "Custom CSS" box. I've tested them all in Firefox 3.6, but not in any other browsers - please let me know if they don't work for you.

Subtle-for-work:

.logo {display: none;}
body {background: white;}
#header {background: none white;}
#greeting, #login {background: none black;}
.icon {display: none;}
h2 {font-size: 1em;}
h1 {font-size: 1em;}

Larger greeting: (Enigel has an alternative version of this.)

#greeting, #login-block {font-size: 1em;}

Sidebar-to-topbar:

#dashboard ul {float: none; width: auto;}
#dashboard ul li {display: inline; border-right: 1px solid black; border-left: 1px solid black;}
#dashboard a, #dashboard span {display: inline;}
#main.sidebar {margin-left: 1em;}

White-on-black: (Amy has a better version in the comments.)

body {background: black; color: white;}
.navigation a, a:link {color: #666666;}
a, a:link {color: #666666;}

Narrow margins:
(To edit this to a different width, change either "1%" to something different - they add together to give the total gap.)

#chapters {
margin: auto 1% 2.5em;
padding: 0.5em 1% 0;
}

Font change:
(Just copy and edit this to make it whatever font you want to use.)

{ font-family: "Helvetica" !important; }

Background colour change:
(For common colours, you can just type the name; for in between colours, you can use hex codes, e.g. #ccccff will give a pale blue.)

body {background-color: red;}

Font size change:
(If you want to make it just apply to the stories, not the headings, use "#chapters" instead of "body".)

body {font-size: 150%;}

Spread out works blurb:
(This makes it look slightly more like the old style, for people who didn't like the new style of story details.)

#main ul.tags li.relationships, .blurb ul li.relationships, 
#main ul.tags li.characters, .blurb ul li.characters, 
#main ul.tags li.freeforms, .blurb ul li.freeforms {display: block;}

Comments

White on Black theme.

[onceamy]

I think I've made it nice and accessible:



#header {background: black; colour: black; }

body {background: black; color: white;}
.open-beta-box h1, h2, p, a {color: white; }
.navigation a, a:link {color: #666666;}
a, a:link {color: #666666;}
.notice, .comment-notice { color: #df683f;}
.byline {color: #666666; }
#main dl.meta {color: #666666; background: black; }
.stats dt, dd {color: #666666; }
.navigation {background: black; }
.filters legend {color: #666666; }
#work-form fieldset.meta {background: black;}
#work-form fieldset {background: black;}
form.filters {background: black; }
form.filters dt {background: black; }
.own {background: black; }

[jeshyr]

Thanks for these examples, Cesy, they really helped me to figure out where to start.

Where should I make a feature request for the skins? I see you have a limited range of fonts allowed, I'm not sure why (for private skins, should it matter at all?) but there's a font specifically designed for low-vision use that I use myself it's called APHont and is available free for low-vision users. It's not by default installed on either PC or Mac (although I think it should be!) but it's WAY easier to read than other sans-serif fonts for me as all the hard-to-see bits are exaggerated. Info is here: http://www.aph.org/products/aphont.html

So I'd like to have APHont added to the range of available fonts - if I put it in a font family it'll just get skipped if the person doesn't have it so nobody gets hurt.

Am having fun with this - I'll apply to make my own low-vision-friendly AO3 skin made public when I'm done with it :)

[cesy]

Just put it in a Support request.

The range of fonts was for security - to allow all fonts would need more sophisticated sanitising than we had time to do. We're planning to open it up in the future, but it may take a while. In the meantime, I'm sure we can add APHont.