A few example skins
Aug. 23rd, 2010 08:44 am![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
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:
Larger greeting: (Enigel has an alternative version of this.)
Sidebar-to-topbar:
White-on-black: (Amy has a better version in the comments.)
Narrow margins:
(To edit this to a different width, change either "1%" to something different - they add together to give the total gap.)
Font change:
(Just copy and edit this to make it whatever font you want to use.)
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.)
Font size change:
(If you want to make it just apply to the stories, not the headings, use "#chapters" instead of "body".)
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.)
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;}
White on Black theme.
Date: 2010-08-24 10:34 am (UTC)#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; }
no subject
Date: 2010-09-13 05:23 am (UTC)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 :)
no subject
Date: 2010-09-13 08:43 am (UTC)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.