enigel: Sheppard playing a video game (SGA Shep geeky)
[personal profile] enigel posting in [community profile] ao3_skins
I've been working on this since skins were in development - it proved pretty handy for testing, incidentally *g* - and getting to know various parts of the Archive CSS needed to change what I wanted.

I wanted to green-tint the Archive, and get rid of the greys in some areas, while keeping it pleasant and not strident. A dash of intense yellow here and there enlivens the look, hence the name.

I thought it might be useful for others, so while it's not quite ready for public sharing on AO3, I'm sharing it here. Feel free to improve, derive, inspire yourself and so on. It would be lovely if you shared the results with the community, so we can all have more pretty. :)


Homepage view:
AO3 skin Sunny Forest

Works index view:
AO3 skin Sunny Forest


(The greeting block is bigger because I combined it with my accessibility skin Big Greeting Everywhere - the last block of CSS.)


#header {
  background: #003D00;
  color: #FFFFF0;
}

.navigation a,
.navigation a:link,
#home-header .navigation a,
#home-header .navigation a:link {
  color: #246B24;
}

.navigation a:visited {
  color: #99CC99;
}

.navigation a:hover,
#home-header .navigation a:hover {
  background: #246B24 !important;
  color: #FFFFB8;
}

#main .navigation a:visited {
  color: #003D00;
}


/* LINKS */
a,
a:link {
  color: #246B24;
}

a:visited {
  color: #99CC99;
}

a:hover {
  background: #246B24;
  color: #FFFFB8;
}


/* BASIC */
.own {
  background: #EBFFC2;
  color: #003D00;
}

h3 {
  background-color: #196619 !important;
  color: #FFFFE6 !important;
}

#main .preface h3 {
  background-color: white !important;
  color: #196619 !important;
}

.notice,
.comment-notice {
  background-color: #F0FFE0;
  color: #003D00;
  border: 1px solid #E0FFC2;
}

.comment-error {
  background-color: #F5D6CC;
  color: #7A1F00;
  border: 1px solid #EBAD99;
}

.byline {
  color: #668033;
}

#main dl.meta {
  color: #003D00;
  background: #FFFFE6;
}

.stats dt,
dd {
  color: #295200;
}


/* TAGS */
a.tag,
a.tag:link {
  color: black;
}

a.tag:visited {
  color: #111;
}

a.tag:hover {
  background: #246B24;
  color: #FFFFB8;
}


/* COMMENTS */
.comment .odd,
.thread .odd {
  background: #FFFFE6;
}

.comment .even,
.thread .even {
  background: #F0FFE0;
}


/* FILTERS */
.filters,
.filters dt {
  background-color: #FFFFAD !important;
}

form.filters {
  border: 1px solid #FFFF75;
}

.filters legend {
  color: #295200;
}

.filters dt:hover {
  background-color: #B2B26B !important;
}


/* FORMS */
#work-form fieldset,
#work-form fieldset.meta,
.draft,
.draft .wrapper {
  background: #F5FFE0;
}

.draft {
  border: 2px dashed #F5FFE0;
}

div.auto_complete ul li.selected {
  background: #FFD119;
  color: #364712;
}


/* DASHBOARD */
#dashboard ul {
  border: 0;
}

#dashboard a,
#dashboard span {
  color: #196619;
}

#dashboard span.current {
  background-color: #EBFFC2 !important;
  color: #196619 !important;
}

#dashboard a:hover,
#dashboard li:hover,
#dashboard.admin-posts a:hover {
  background: #FFD119;
  color: #364712;
}


/* BLURBS */
.blurb dl.stats {
  background-color: #EBFFC2;
  color: #003D00;
}

.own dl.stats {
  background-color: white;
}

.works-own .own dl.stats {
  background-color: #EBFFC2;
}

.blurb .relationships {
  background: #EBFFC2;
  color: #8F2400;
}

.blurb h4 a:link {
  color: #246B24;
}

.blurb h4 a:visited {
  color: #99CC99;
}

.blurb h4 a:hover {
  background: #FFD119;
  color: #364712;
}

.navigation a:hover,
.submit a:hover,
.submit input:hover,
.navigation input:hover {
  background: #FFD119 !important;
  color: #364712;
}

.navigation input {
  color: #003D00;
}

#header a:hover {
  color: #FFFFB8;
  background: #003D00;
}

#header h1 a:hover {
  color: #FFD119;
  background: #003D00;
}

.current,
.current a:visited {
  color: #FFFFB8 !important;
  background: #003D00 !important;
}

.current a:hover {
  color: #FFFFB8 !important;
  background: #246B24 !important;
}

#header #login a:hover,
#header #greeting a:hover {
  color: #FFD119;
}

table {
  background: #E6FFCC;
}


/* HOME PAGE */
#home-header h1 {
  color: #ffd119;
}

#home-header .navigation a,
#home-header .navigation .current {
  background-color: #FFE680;
  border: 1px solid #FFDB4D;
}

.open-beta-box {
  background: white;
}

.open-beta-box h1,
.open-beta-box h2,
.open-beta-box p {
  color: #D17519;
}

.sidebar-box {
  background-color: #004700;
}

.sidebar-box h3 {
  background-color: #004700 !important;
  color: #FFD119 !important;
}

.sidebar-box a,
.sidebar-box a:link {
  color: #FFFFE6;
}

.sidebar-box a:hover {
  color: #FFFFB8;
}


/* GREETING SIZE */
#greeting .login {
  font-size: 2em;
}

#login a {
  font-size: 1.2em;
}

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

#home-header #greeting .login {
  font-size: 1.8em;
}

#home-header #login a {
  font-size: 1em;
}

From:
Anonymous( )Anonymous This account has disabled anonymous posting.
OpenID( )OpenID You can comment on this post while signed in with an account from many other sites, once you have confirmed your email address. Sign in using OpenID.
User
Account name:
Password:
If you don't have an account you can create one now.
Subject:
HTML doesn't work in the subject.

Message:

 
Notice: This account is set to log the IP addresses of everyone who comments.
Links will be displayed as unclickable URLs to help prevent spam.

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:52 pm
Powered by Dreamwidth Studios