AO3 Skins

question about making a site skin

Mon, 23 Dec 2024 17:57:56 GMT

Posted by: mythity

I am having trouble figuring out how to change the color of the red on AO3. I managed to change some of it to the turquoise I wanted but things like fic titles and some banners remain red. What part do I need to change?

example:
https://imgur.com/a/kBG3BJz

here's the skin:
body,
.toggled form,
.dynamic form,
.secondary,
.dropdown {
background: #1d1e29;
color: #b3b5c9;
}

.heading {
font-family: Georgia Pro;
}

a,
a:link {
color: #b3b5c9;
}

a,
a:link,
a:visited:hover {
color: #b3b5c9;
}

a:visited {
color: #b3b5c9;
}

h4 {
font-size: 1.200em;
}

#header a,
#header a:visited,
#header .current,
#header .primary .open a,
#header .primary .dropdown:hover a,
#header .primary .dropdown a:focus {
color: #b3b5c9;
}

#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a {
background: #41435c;
}

#header .menu,
#small_login,
#header .dropdown:hover .current+.menu {
background: #41435c;
background-image: -o-linear-gradient(top,rgba(221,221,221,.98) 0%,rgba(204,204,204,.98) 100%);
}

#header .primary {
background: #41435c;
background-image: linear-gradient(#17171f 2%,#15151c 95%,#282836 100%);
}

#header .search {
color: #1d1e29;
}

#footer {
background: linear-gradient(#17171f 2%,#15151c 95%,#282836 100%);
border-top: 1px solid;
color: #676a91;
}

fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff {
background: #1d1e29;
border: 2px solid #555878;
box-shadow: unset;
}

input,
textarea {
box-shadow: unset;
}

form p {
padding: inherit;
}

.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
input[type="submit"],
button,
.current,
.actions label {
color: #1d1e29;
border: 1px solid;
border-bottom: unset;
box-shadow: unset;
}

.actions a:visited,
.action:visited,
.action a:link,
.action a:visited {
color: #b3b5c9;
}

a.tag {
color: #b3b5c9;
}

.wrapper {
box-shadow: unset;
}

dl.meta {
border: 2px solid #15151c;
}

.preface h3 {
border-color: #676a91;
}

div.comment,
li.comment {
border: unset;
}

.search [role="tooltip"] {
background: #41435c;
border: 1px solid #676a91;
color: #b3b5c9;
}

.actions a:visited,
.action:visited,
.action a:link,
.action a:visited {
color: #1d1e29;
}

li.blurb,
fieldset,
form dl {
border: 1px solid #676a91;
}

form dt {
border-bottom: 1px solid #676a91;
}

li.relationships a {
background: #15151c;
}

.filters .expander {
color: #0c8a7d;
}

.notice,
.comment_notice,
ul.notes,
.caution,
.error,
.comment_error,
.alert.flash {
background: #15151c;
border: 1px solid #676a91;
box-shadow: unset;
}

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

.current {
background: #0c8a7d;
}

#dashboard.own {
background: #15151c;
}

#dashboard .current {
background: #0c8a7d;
}

.listbox,
fieldset fieldset.listbox {
background: #15151c;
border: 2px solid #15151c;
box-shadow: unset;
}

.listbox>.heading,
.listbox .heading a:visited {
color: #0c8a7d;
}

.listbox .index {
background: #15151c;
box-shadow: inset 1px 1px 1px #676a91;
}

form.verbose legend,
.verbose form legend {
background: #141414;
border: 2px solid #15151c;
box-shadow: unset;
}

fieldset fieldset,
fieldset dl dl,
form blockquote.userstuff {
background: #1d1e29;
}

form .notice,
form ul.notes {
box-shadow: unset;
}

form dd.required {
color: #b3b5c9;
}

.reading h4.viewed {
background: transparent;
}

.splash .favorite li:nth-of-type(odd) a {
background: #080808;
}

body,
.toggled form,
.dynamic form,
.secondary,
.dropdown {
background: #1d1e29;
}

.bookmark .user {
border: 1px solid #676a91;
}

.caution {
color: #0c8a7d;
}

.required {
color: #b3b5c9;
}

a:visited {
color: #15151c;
}

.required .autocomplete,
.autocomplete .notice {
color: #b3b5c9;
}

.post .required .warnings,
dd.required {
color: #b3b5c9;
}

body,
.toggled form,
.dynamic form,
.secondary,
.dropdown {
background: #1d1e29;
}

.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed {
background: #1d1e29;
}

.draft {
border: 2px dashed #0c8a7d;
}

a:visited {
color: #b3b5c9;
}

#outer {
background: #1d1e29;
}

.javascript {
background: #1d1e29;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
font-family: Georgia, sans-serif;
}

[role] .tags:nth-child(10) .tag {
background: #3e4057;
}

::-webkit-scrollbar-webkit-overflow-scrolling: auto {
color: #15151c;
}

dl.index dd {
background: #1d1e29;
}

.comment h4.byline {
background: #41435c;
}

#modal {
background: #1d1e29;
border: 10px solid #41435c;
display: inline-block;
}

#symbols-key dl {
border: 1px solid #676a91;
}

.thread .even {
background: #1d1e29;
}

.statistics .index li:nth-of-type(even) {
background: #242430;
}

#header .primary .menu a,
#header .primary .menu .current {
color: #0c8a7d;
}

comments

Highlighting Favorite Tags

Thu, 12 Sep 2024 19:21:58 GMT

Posted by: dustysoul

Hello!

I am an absolute novice to skins, HTML, CSS, all of it.
When I'm searching on Ao3, I want preselected canonical tags to be highlighted.
It took me 20 minutes to use the "inspect" tool in my web browser to find

( Error: Irreparable invalid markup in entry. Raw contents behind the cut. )

comments

Adjustment to Mobile Issues

Thu, 20 Jul 2023 03:34:34 GMT

Posted by: ema_k

Wow, It's been a while. Long story short, I've been fiddling with a skin I found (adding tumblr stuff and using code from other sources. Very few amounts of this CSS are actually mine, and I'm not taking credit.)

Here's the skin:
docs.google.com/document/d/1EUgKGeIZtHl7WqgkgklFrlD4Kla1cU7k6kMApahRbgI/edit

I've been having so much trouble trying to translate this to mobile. I'm pretty sure there's no way to specify when it's mobile in the CSS of the skin, and I no matter how hard I try, I can't understand the whole parent situation. I've been looking for ages and tutorials always use examples using public skins and I just don't know how to apply it to my custom skin. The minor attempt I made using the advanced settings on a new skin didn't work (the custom font I installed on my computer wouldn't appear because, obviously, it's custom, so I ctrl + c ctrl + v:

h1,

h2,

h3,

h4,

h5,

h6,

.heading {

font-family: Halloween Kliwones, "Bookman Old Style", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;

border-bottom: none;

font-weight: normal;

}

and changed Halloween Kliwones to Gothic Bold (installed on my phone), nothing. If anyone could give a direct play-by-play on how to change the mobile look with this frankenstein meshed skin, that would be deeply appreciated.

comments

variable work margins

Sat, 27 Feb 2021 11:13:42 GMT

Posted by: queerty

I currently have my custom site skin (using the wizard) set to 25% for work margin width. this is perfect when I am reading on the computer seeing as it sets it on par with the reader mode, but allows me to use the color scheme I want. it's absolutely awful when I read on mobile, however, as it cuts each line down to 2-6 words. is there some CSS I could stick on the skin so that the margins are 25% on my computer, but use the default 0% margin settings while on mobile?

comments

My Skin.

Mon, 06 Jan 2020 16:12:17 GMT

Posted by: ema_k

Well, here's the skin I have. You can use it if you want, and if you can tell me if I can fix anything, then please do. I know a few things that need to be fixed, but I don't know how to fix it, like the inbox and bookmark tabs on the dashboard. Those are just a mess. Hopefully, someone enjoys it.

#header ul.primary,
#footer,
.autocomplete .dropdown ul li:hover,
li.selected,
a.tag:hover {
background: #000;
background-size: 500px;
}

#footer ul,
#header .primary a {
background: #000;
}

#header .primary a:hover {
background: #ddd;
}

#header .heading a,
#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
#header fieldset,
#header form,
#header p,
#dashboard a:hover,
.actions a:hover,
.actions input:hover,
.delete a,
span.delete,
span.unread,
.replied,
span.claimed,
.draggable,
.droppable,
span.requested,
a.work,
.blurb h4 a:link,
.blurb h4 img,
.system .latest h3,
.system div.news h3,
.system .tweets h3,
.required,
.error,
a.cloud7,
a.cloud8 {
color: #000;
}

#outer #header #greeting .icon,
#dashboard.own,
.error,
.comment_error,
#header ul.primary,
.LV_invalid,
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active,
#header .primary a,
#header .primary .current,
#header .primary input,
#header .search input {
border-color: #000 !important;
}

#dashboard {
float: right;
}

#outer #main.dashboard {
margin: auto 15em 1em auto;
}

#main.dashboard * {
clear: left;
}

#outer {
background: url("https://i.postimg.cc/xdN13ytm/what-the-hex.png");
}

#footer a:hover,
#footer a:focus,
.autocomplete .dropdown ul li:hover,
li.selected,
a.tag:hover,
.listbox .heading a.tag:visited:hover,
.symbol .question,
.qtip-content {
background: #000;
color: #eee;
}

.splash .favorite li:nth-of-type(odd) a:hover,
.splash .favorite li:nth-of-type(odd) a:focus {
background: #000;
color: #eee;
}

#header #greeting img,
#header .heading a,
#header .heading a:visited,
#header .user a:hover,
#header .user a:focus,
#header .user .current,
#header fieldset,
#header form,
#header p,
#dashboard a:hover,
.actions a:hover,
.actions input:hover,
.delete a,
span.delete,
span.unread,
.replied,
span.claimed,
.draggable,
.droppable,
span.requested,
a.work,
.blurb h4 a:link,
.blurb h4 img,
.splash .module h3,
.splash .browse li a:before,
.required,
.error,
.comment_error,
a.cloud7,
a.cloud8,
#footer .actions .secondary a,
#tos_prompt .heading {
color: #000;
}

.actions a,
.actions a:link,
.action,
.actions input,
input[type="submit"],
button,
.current,
.actions label {
background: #eee;
border-color: #eee;
border-radius: 0;
color: #000;
text-shadow: none;
}

.splash .module h3 {
background: #eee;
border-color: #eee;
border-radius: 0;
color: #000;
text-shadow: none;
}

.filters fieldset {
background: transparent;
box-shadow: none;
size: 100px;
border-color: #000;
border: 1px solid;
}

#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
#header .menu,
#small_login,
#header .dropdown:hover .current + .menu,
.group.listbox,
fieldset fieldset.listbox,
form blockquote.userstuff,
input:focus,
textarea:focus,
li.relationships a,
.group.listbox .index,
.dashboard fieldset fieldset.listbox .index,
#dashboard a:hover,
th,
#dashboard .secondary,
.secondary,
.thread .even,
.system .tweet_list li,
.ui-datepicker tr:hover {
background: #f6f6f6;
border-shadow: none;
}

#header .dropdown .menu a:hover,
#header .dropdown .menu a:focus,
.splash .favorite li:nth-of-type(odd) a,
.ui-datepicker td:hover,
#tos_prompt .heading,
#tos_prompt [disabled] {
background-shadow: 1px, #000;
background: #eee;
}

input,
textarea {
box-shadow: inset 0 1px 2px #000;
}

body,
.group,
.group .group,
.region,
.flash,
fieldset,
fieldset fieldset ul,
form dl,
textarea,
#main .verbose legend,
.verbose fieldset,
.notice,
ul.notes,
input,
textarea,
table,
th,
td:hover,
tr:hover,
#modal,
.ui-sortable li,
.required .autocomplete,
.autocomplete .notice,
.system .intro,
.comment_error,
div.dynamic,
.dynamic form,
#ui-datepicker-div,
.ui-datepicker table {
background: none;
color: #000;
border-color: #000;
outline: 0001;
box-shadow: none;
}

#body {
color: transparent;
}

#greeting .icon {
border-bottom: 0;
}

.icon,
#greeting p.icon img {
background: rgba(255,255,255,0.3);
box-shadow: 1px 0 1px #777;
border: 1px solid rgba(255,255,255,0.7);
}

* {
box-shadow: none !important;
border-radius: 0 !important;
text-shadow: none !important;
}

comments

Color Change.

Sat, 04 Jan 2020 02:26:57 GMT

Posted by: ema_k

Well, I don't know if anyone will see this, but I'm really new to this type of thing and I need help.

Basically, I want this grey section to either be clear/invisible so that the patterned background is visible, or change the color of the section to #eee, and I have no idea how to do that. I want to change it because the colors don't fit with the current theme. Also, I don't like the shadow, so if you could help with that, then thanks.

comments

[Site Skin] Flat Buttons

Sat, 30 Jun 2018 09:00:53 GMT

Posted by: fujoku

I hope someone reads this and has a solution. oTL

So, I'm using a custom skin I found years ago (I don't even remember where I got it, I'm sorry) when I started using AO3. I *think* I did some edits to this skin already, but I'm not sure where since it's been a really long time.

Anyway, I really want all the buttons to be flat (just text inside a box). I'm not sure if they were all flat before and an update reverted some buttons back to the default "bubble" style. But I'd really appreciate it if someone can help me with it. :)

Also, if it's possible - can all text (other than the site headers) be justified? As in, the tags, summary, author's notes, work/story area, and comment section? I'm pretty sure I *tried* doing it before with this skin but I'm not exactly a coder, so it didn't work.

Anyhoo. Here's the skin code that I'm currently using:

body,
.toggled form,
.dynamic form,
.secondary,
.dropdown {
  background: #F5F1ED;
  color: #261E1A;
}

a,
a:link {
  color: #3DA6AE;
}

#login-block,
li.blurb,
fieldset,
form dl {
  border: 1px solid #CFCBC8;
}

a,
a:link,
a:visited:hover {
  color: #3DA6AE;
}

a:visited {
  color: #5C7B87;
}

a:hover {
  color: #A63E3F;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
  text-shadow: none;
}

table {
  background: #F5F1ED;
}

#header {
  background: #A63E3F;
  color: #fff;
  min-height: 0;
}

#header #login {
  float: right;
}

#header h1,
#header #greeting {
  position: static;
}

#header h1 {
  font-weight: bold;
  margin-bottom: .05em;
  padding: 0.75em 0.35em 0;
}

#header h1 a,
#header h1 a:visited,
#header h1 .landmark {
  font-size: .875em;
  opacity: 1.0;
  color: #fff;
}

#header h1 img {
  display: none;
}

#header ul.primary {
  background: #7AA4B4 none;
  border: 0;
  border-top: 3px solid #873233;
  box-shadow: none;
  height: 1.929em;
  padding: 0 0 0 3em;
  text-align: left;
}

#header .primary span.actions {
  float: none;
}

#header a,
#header .primary a,
#header .primary input {
  font-weight: bold;
  background: transparent;
  border-color: #7AA4B4;
  color: #fff;
}

#header ul.primary a:hover,
#header .primary input[type="submit"]:hover {
  background: #5C7B87;
  border-color: #5C7B87;
  text-decoration: none;
}

#header .primary .current {
  background: #F5F1ED;
  border-bottom: 1px solid #F5F1ED;
  border-color: #F5F1ED;
  vertical-align: bottom;
}

#header .primary input[type="text"] {
  font-weight: 400;
  background-color: #7097A6;
  border: 1px solid #5C7B87;
  border-radius: 1em;
  text-decoration: none;
}

#greeting {
  position: static;
  font-size: 1em;
  padding: 0.5em 0.875em;
  width: auto;
}

#greeting .icon {
  background: transparent none;
  border: 0;
  float: none;
  height: auto;
  margin: 0;
  text-align: right;
  width: auto;
}

#greeting .icon .landmark,
#header #greeting .icon .landmark a {
  color: #fff;
  font-size: 1em;
  opacity: 1.0;
}

#greeting img {
  display: none;
}

#greeting ul.actions {
  float: none;
  padding: 0 0;
  text-align: right;
}

#greeting ul.actions a {
  border: 0;
}

#header h2 {
  padding: 0 6.5625em;
  border-top: 1px solid;
  text-shadow: none;
}

#dashboard {
  margin-left: 1em;
  width: 11em;
}

#dashboard li {
  text-align: left;
}

#dashboard a,
#dashboard span {
  color: #261E1A;
  font-size: 90%;
}

#dashboard a:hover {
  background: transparent;
  color: #261E1A;
  text-decoration: underline;
}

#dashboard ul {
  border-top: 0;
  padding-top: 0.5em;
}

#dashboard .current {
  background: #C7C3C1;
}

#dashboard .secondary {
  background: transparent;
  border: 0;
}

#dashboard.own {
  background: transparent;
  border: 0;
}

#footer {
  background: transparent none;
  border-top: 1px solid #BFBAB6;
  color: #BFBAB6;
  min-height: 0;
}

#footer ul {
  color: #999;
  margin: 0 0 1.5em;
  padding: 0;
}

#footer ul.navigation a {
  border: 0;
  color: #3DA6AE;
  padding: 0 0.25em;
}

#footer a:hover,
#footer ul.navigation a:hover {
  background: transparent;
  color: #5C7B87;
}

#footer p.beta {
  display: none;
}

#footer .secondary {
  background: transparent;
  box-shadow: none;
}

#footer .secondary li a {
  color: #3DA6AE;
}

fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff {
  background: #E5DFDF;
  border: 1px solid #E5DFDF;
  box-shadow: none;
}

fieldset fieldset,
fieldset dl dl,
form blockquote.userstuff,
fieldset .index fieldset.listbox .index {
  background: #F5F1ED;
}

input,
textarea {
  border: 1px solid #C7C3C1;
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
  background: #FAFAFA;
}

form dt {
  border-bottom: 1px solid #BFBAB6;
}

.autocomplete .dropdown ul li:hover,
li.selected {
  background: #E5DFDF none;
  color: #686665;
}

.ui-sortable li:hover {
  background: #E0DADA;
  border: 2px solid #999;
}

#ibox_wrapper {
  background: #F5F1ED;
  border: 10px solid #F5F1ED;
}

#ibox_content {
  background: #F5F1ED;
  border-bottom: 1px solid #CFCBC8;
}

.actions a,
.action,
.actions input,
input[type="submit"],
button,
.current,
.actions label {
  background: #F5F1ED;
  border-color: #CFCBC8;
  border-radius: 0;
  color: #3DA6AE;
}

.actions a:hover,
.actions input:hover {
  border-color: #CFCBC8;
  box-shadow: none;
  color: #A63E3F;
  text-decoration: underline;
}

.actions a:visited {
  color: #5C7B87;
}

.actions a:active,
.current,
a.current,
.current a:visited {
  background: #C7C3C1;
  border-color: #CFCBC8;
  box-shadow: none;
  color: #261E1A;
}

.delete a,
span.delete {
  border-radius: 0;
  box-shadow: none;
}

.secondary {
  background: #fff;
  border: 2px solid #C7C3C1;
  border-radius: 0;
  box-shadow: none;
}

dl.stats + h6 + .actions {
  float: right;
}

dl.stats + h6 + .actions {
  margin: 0 auto;
}

.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed {
  background: #E5DFDF;
  opacity: 1.0;
}

.draft {
  border: 2px dashed #BFBAB6;
  border-radius: 0;
}

span.unread,
.replied,
span.claimed {
  background: #F5F1ED;
  border-color: #CFCBC8;
  border-radius: 0;
}

.own a.tag:hover,
.own li.relationships a.tag:hover {
  background: #C7C3C1;
}

.own li.relationships a {
  background: #F5F1ED;
}

a.tag,
.tags a {
  color: #686665;
}

a.tag:hover {
  background: #E5DFDF;
  color: #686665;
}

a.tag:visited {
  color: #827F7E;
}

.filters .tags li,
.review .tags {
  border-bottom: 1px dotted #C7C3C1;
}

.wrapper {
  box-shadow: none;
}

dl.index dd {
  background: #E0DADA;
  border: 1px solid #C7C3C1;
}

a.work {
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
  color: #A63E3F;
}

li.relationships,
.dashboard .own li.relationships a {
  background: #E5DFDF;
}

li.relationships a.tag:hover {
  background: #CFCBC8;
}

.mods li,
dl.stats dt,
dl.stats dd {
  font-size: 0.85em;
}

.listbox,
fieldset fieldset.listbox {
  background: transparent;
  border: 1px solid #C7C3C1;
  border-color: transparent;
  outline: none;
}

.listbox .many ul {
  background: #fff;
  border: 1px solid #C7C3C1;
}

.listbox .many li {
  background: #F5F1ED;
}

.listbox .many label.action {
  border: 0;
}

.listbox .heading,
.listbox .heading > a,
.listbox .heading > a:visited {
  color: #261E1A;
}

.listbox h3.heading {
  background: #C7C3C1;
  display: block;
  letter-spacing: 1px;
}

.listbox .index,
.dashboard .listbox .index {
  background: transparent;
  box-shadow: none;
}

.media .listbox {
  background: #E0DADA;
  border: 0;
  box-shadow: 1px 2px 2px #827F7E;
  -moz-box-shadow: 1px 2px 2px #827F7E;
  -webkit-box-shadow: 1px 2px 2px #827F7E;
}

dl.meta {
  border: 1px solid #C7C3C1;
}

li.blurb,
.blurb .blurb {
  border: 0;
  border-bottom: 1px solid #CFCBC8;
  border-radius: 0;
  box-shadow: none;
}

.work li.blurb,
.collection li.blurb,
.history li.blurb,
.series li.blurb,
.tagset li.blurb {
  border-bottom: 0;
}

.blurb h4.heading a:link,
.blurb h4 img {
  color: #A63E3F;
}

.blurb h4.heading a:hover {
  color: #5C7B87;
}

.blurb h4.heading a:visited {
  color: #873233;
}

.blurb h5.heading a:link {
  color: #686665;
}

.blurb h5.heading a:visited {
  color: #827F7E;
}

.blurb dl.stats {
  border-bottom: 1px solid #CFCBC8;
  padding-bottom: 0.5em;
}

.blurb.own dl.stats {
  padding-left: 0;
}

.picture .header {
  border-bottom: 1px dotted #E0DADA;
}

.bookmark .status span {
  border: 1px solid #E5DFDF;
}

.bookmark .user {
  background: #E0DADA;
}

.preface h2.title {
  font-variant: normal;
}

div.comment,
li.comment {
  border: 1px solid #E0DADA;
}

.comment div.icon {
  border-bottom: 5px solid #E0DADA;
}

.comment h4.byline {
  background: #E0DADA;
}

.thread .even {
  background: #E5DFDF;
}

.system .intro,
.system .module h2,
.system .intro a,
.system .intro em {
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
}

.system p#signup {
  text-shadow: none;
}

.system .latest h3,
.system div.news h3 {
  border-bottom: 1px solid #C7C3C1;
  color: #873233;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
}

.admin .header h3 {
  background: #C7C3C1;
  line-height: normal;
  text-align: left;
}

.readings-index h3 {
  background: #E0DADA;
  font-size: 0.875em;
}

.search input[type="text"] {
  border-radius: 0;
  border-color: #999;
}

.search span.tip {
  background: #E0DADA;
  border: 1px solid #BFBAB6;
  color: #261E1A;
}

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

.filters dd {
  font-size: 0.875em;
}

.nomination dt {
  background: #fff;
}

.userstuff h2 {
  color: #333;
}

.userstuff table,
.userstuff td,
.userstuff col,
.userstuff tr,
.userstuff thead,
.userstuff tfoot,
.userstuff tbody,
.userstuff th,
.userstuff thead td,
.userstuff th a,
.userstuff th a:link {
  color: #222;
}

.flash,
div.error {
  border-radius: 0;
}

.notice,
.comment_notice,
ul.notes,
.caution,
.error,
.comment_error {
  border-radius: 0;
  box-shadow: none;
}

.error,
.comment_error {
  box-shadow: none;
}

span.symbol {
  color: #261E1A;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
}

.question a:hover {
  background: #C7C3C1;
  border-color: #827F7E;
  color: #A63E3F;
}

span.question {
  background: #C7C3C1;
  border-color: #827F7E;
  box-shadow: none;
}

#symbols-key dl {
  border: 1px solid #827F7E;
}

#user-fandoms ol.index {
  padding-bottom: 0;
  text-align: center;
}

#user-fandoms ol.index li {
  display: inline;
  margin-right: .5em;
  line-height: 2.15em;
}

#user-fandoms ol#fandom_full_list {
  padding-top: 0;
  padding-bottom: 1.5em;
  display: block !important;
}

#user-fandoms p.actions {
  display: none;
}

.verbose legend {
  background: #F5F1ED !important;
  border: 1px solid #E0DADA !important;
  box-shadow: none !important;
}

comments

Block indent

Sun, 06 Aug 2017 16:47:54 GMT

Posted by: elrhiarhodan

Hi there, don't know if anyone's listening to this comm anymore, but I could use some help with a skin.

AO3 doesn't support the indent [ div style="margin-left: 40px"] tag, insisting that the [blockquote] tag is equivalent, but it isn't, as a [blockquote] tag places a border around the text. I have no experience with skins or how to write one. I've looked at various tutorials but can't figure out how to make one work for the simple task of indenting multiple paragraphs.

Can anyone help?

comments

Work Skin: How to Mimic Letters, Fliers, and Stationery Without Using Images

Thu, 27 Jul 2017 20:52:08 GMT

Posted by: fuck_yeah

This is a tutorial/live example on how to mimic the look of letters, fliers, and stationery (as well as other forms of written media) without using images. For all your epistolary fic needs.

On AO3

comments

Work Skin: How to Make a "Choose Your Adventure" Fic

Mon, 17 Jul 2017 21:55:51 GMT

Posted by: fuck_yeah

I don't know how well this'll go over, but this a tutorial/live example on how to create a "Choose Your Own Adventure" fic. While this has been explained before (see here), this particular tutorial shows you how to use a work skin to hide the next parts from the reader until they click through to get to them.

Live Example/Tutorial

comments

Work Skin Dump

Wed, 24 May 2017 00:44:49 GMT

Posted by: fuck_yeah

- How to Wrap Text around Images (A work skin isn't actually needed to do this, but I show how a skin can help format the look)
- How to Mimic Author's Notes and Kudos/Comment Buttons
- How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile)

comments

Work Skin: Email Windows

Tue, 06 Sep 2016 22:22:06 GMT

Posted by: fuck_yeah

I had a request to create a work skin to mimic an email screenshot, so I've created a simple live example/tutorial here.

comments

Making buttons flat and tweaking headers

Mon, 23 May 2016 06:42:21 GMT

Posted by: tropicsbear

After AO3 updated their code, the most of the action buttons on my layout (which used to be flat, basically just the text inside a box) reverted back to their default site skin appearance. The headers ("Find your favorites," "News," etc.) on the homepage are wonky too—they're either the default site color (maroon) or the wrong font (Lucida Grande when they should be Calisto MT).

I can't figure out the part of my CSS I need to tweak and was hoping someone could point me in the right direction x__x

Here's the CSS I'm using:

body,
.toggled form,
.dynamic form,
.secondary,
.dropdown {
  background: #fffff1;
  color: #1a1c26;
  font-size: 0.85em;
}

code {
  font-size: 1em;
}

a,
a:link {
  color: #ae9581;
}

#login-block,
li.blurb,
fieldset,
form dl {
  border: 1px solid #bcdada;
}

a,
a:link,
a:visited:hover {
  color: #ae9581;
}

a:visited {
  color: #038b97;
}

a:hover {
  color: #81aeab;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  font-family: 'Calisto MT', 'Chaparral Pro', 'Berylium', 'Minion Pro Med', serif;
  text-shadow: none;
  font-style: italic;
}

table {
  background: #fffff1;
}

#header {
  background: #81aeab;
  color: #fff;
}

#header a,
#header a:visited,
#header .current,
#header .actions .open a,
#header .actions .dropdown:hover a,
#header .actions .dropdown a:focus,
#header .actions .current,
#header .user a:hover,
#header .user a:focus,
#header .user .current,
#header .actions .menu .current {
  color: #fff;
}

#header .heading {
  font-weight: 900;
  margin-top: 1.5em;
}

#header .heading img,
#greeting .icon {
  display: none;
}

#header .heading a {
  line-height: 1;
}

#header .actions .menu .current {
  font-weight: normal;
}

#greeting {
  margin-bottom: 1.5em;
}

#header .user .menu,
#header .user a:hover,
#header .user a:focus,
#header .user .open a,
#header .user .dropdown:hover a {
  background: #025d65;
}

#header .user .menu li {
  border-color: #81aeab;
}

#header .primary {
  background: #c0d7ce none;
  border-top: 3px solid #025d65;
  box-shadow: none;
}

#header .primary a,
#header .primary input {
  font-weight: bold;
  background: transparent;
  border-color: #c0d7ce;
  color: #fff;
}

#header .primary .menu,
#header .primary a:hover,
#header .primary a:focus,
#header .primary .open a,
#header .primary .dropdown:hover a {
  background: #038b97;
}

#header .primary .menu li {
  border-color: #c0d7ce;
}

#header .actions .menu a:hover,
#header .actions .menu a:focus {
  text-decoration: underline;
}

#header #search input[type="text"],
#header #search input[type="text"]:focus {
  color: #fff;
  font-weight: 400;
  background-color: #025d65;
  box-shadow: inset 0 0 0 1px #038b97;
  text-decoration: none;
}

#header #search input[type="submit"]:focus {
  box-shadow: none;
  color: #fff;
  text-decoration: underline;
}

#header h2 {
  padding: 0 6.5625em;
  border-top: 1px solid;
  text-shadow: none;
}

#dashboard li {
  text-align: left;
}

#dashboard a,
#dashboard span {
  color: #1a1c26;
  font-size: 90%;
}

#dashboard a:hover {
  background: transparent;
  color: #1a1c26;
  text-decoration: underline;
}

#dashboard ul {
  border-top: 0;
  padding-top: 0.5em;
}

#dashboard .current {
  background: #ddddff;
}

#dashboard .secondary {
  background: transparent;
  border: 0;
}

#dashboard.own {
  background: transparent;
  border: 0;
}

#footer {
  background: transparent none;
  border-top: 1px solid #b6b7bf;
  color: #999;
}

#footer .heading {
  color: #999;
}

#footer a {
  border: 0;
  color: #ae9581;
}

#footer a:hover {
  color: #038b97;
}

fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff {
  background: #ddeeff;
  border: 1px solid #ddeeff;
  box-shadow: none;
}

fieldset fieldset,
fieldset dl dl,
form blockquote.userstuff,
fieldset .index fieldset.listb ox .index {
  background: #fffff1;
}

input,
textarea {
  border: 1px solid #ddddff;
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
  background: #FAFAFA;
}

form dt {
  border-bottom: 1px solid #b6b7bf;
}

.autocomplete .dropdown ul li:hover,
li.selected {
  background: #ddeeff none;
  color: #8a6f59;
}

.ui-sortable li:hover {
  background: #aad5ff;
  border: 2px solid #999;
}

#ibox_wrapper {
  background: #fffff1;
  border: 10px solid #fffff1;
}

#ibox_content {
  background: #fffff1;
  border-bottom: 1px solid #bcdada;
}

.actions a,
.action,
.actions input,
input[type="submit"],
button,
.current,
.actions label {
  background: #fffff1;
  border-color: #bcdada;
  border-radius: 0;
  color: #ae9581;
}

.actions a:hover,
.actions input:hover,
.actions a:focus,
.actions input:focus {
  border-color: #bcdada;
  box-shadow: none;
  color: #81aeab;
  text-decoration: underline;
}

.actions a:visited {
  color: #038b97;
}

.actions a:active,
.current,
a.current,
.current a:visited {
  background: #ddddff;
  border-color: #bcdada;
  box-shadow: none;
  color: #1a1c26;
}

.delete a,
span.delete {
  border-radius: 0;
  box-shadow: none;
}

.secondary {
  background: #fff;
  border: 2px solid #ddddff;
  border-radius: 0;
  box-shadow: none;
}

dl.stats + .landmark + .actions {
  float: right;
}

dl.stats + .landmark + .actions {
  margin: 0 auto;
}

.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed {
  background: #ddeeff;
  opacity: 1.0;
}

.draft {
  border: 2px dashed #b6b7bf;
  border-radius: 0;
}

span.unread,
.replied,
span.claimed {
  background: #fffff1;
  border-color: #bcdada;
  border-radius: 0;
}

.own a.tag:hover,
.own li.relationships a.tag:hover {
  background: #ddddff;
}

.own li.relationships a {
  background: #fffff1;
}

a.tag,
.tags a {
  color: #8a6f59;
}

a.tag:hover,
.listbox .heading a.tag:visited:hover {
  background: #ddeeff;
  color: #8a6f59;
}

a.tag:visited {
  color: #9b9ca7;
}

.filters .tags li,
.review .tags {
  border-bottom: 1px dotted #ddddff;
}

.wrapper {
  box-shadow: none;
}

dl.index dd {
  background: #aad5ff;
  border: 1px solid #ddddff;
}

a.work {
  color: #81aeab;
}

li.relationships a,
.dashboard .own li.relationships a {
  background: #ddeeff;
}

li.relationships a.tag:hover {
  background: #bcdada;
}

.mods li,
dl.stats dt,
dl.stats dd {
  font-size: 1em;
}

.listbox,
fieldset fieldset.listbox {
  background: transparent;
  border: 1px solid #ddddff;
  border-color: transparent;
  box-shadow: 0 0 0 1px #fffff1;
  outline: none;
}

.listbox .many ul {
  background: #fff;
  border: 1px solid #ddddff;
}

.listbox .many li {
  background: #fffff1;
}

.listbox .many label.action {
  border: 0;
}

.listbox .heading,
.listbox .heading > a,
.listbox .heading > a:visited {
  color: #1a1c26;
}

.listbox h3.heading {
  background: #ddddff;
  display: block;
  letter-spacing: 1px;
}

.listbox .index,
.dashboard .listbox .index {
  background: transparent;
  box-shadow: none;
}

.media .listbox {
  background: #aad5ff;
  border: 0;
  box-shadow: 1px 2px 2px #9b9ca7;
  -moz-box-shadow: 1px 2px 2px #9b9ca7;
  -webkit-box-shadow: 1px 2px 2px #9b9ca7;
}

dl.meta {
  border: 1px solid #ddddff;
}

li.blurb,
.blurb .blurb {
  border: 0;
  border-bottom: 1px solid #bcdada;
  border-radius: 0;
  box-shadow: none;
}

.work li.blurb,
.collection li.blurb,
.history li.blurb,
.series li.blurb,
.tagset li.blurb {
  border-bottom: 0;
}

.blurb h4.heading a:link,
.blurb h4 img {
  color: #81aeab;
}

.blurb h4.heading a:hover {
  color: #038b97;
}

.blurb h4.heading a:visited {
  color: #025d65;
}

.blurb h5.heading a:link {
  color: #8a6f59;
}

.blurb h5.heading a:visited {
  color: #9b9ca7;
}

.blurb dl.stats {
  border-bottom: 1px solid #bcdada;
  float: none;
  padding-bottom: 0.5em;
}

.blurb.own dl.stats {
  padding-left: 0;
}

.picture .header {
  border-bottom: 1px dotted #aad5ff;
}

.bookmark .status span {
  border: 1px solid #ddeeff;
}

.bookmark .user {
  background: #aad5ff;
}

.preface h2.title {
  font-variant: normal;
}

div.comment,
li.comment {
  border: 1px solid #aad5ff;
}

.comment div.icon {
  border-bottom: 5px solid #aad5ff;
}

.comment h4.byline {
  background: #aad5ff;
}

.thread .even {
  background: #ddeeff;
}

.system .intro,
.system .module h2,
.system .intro a,
.system .intro em {
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
}

.system p#signup {
  text-shadow: none;
}

.system .latest h3,
.system div.news h3 {
  border-bottom: 1px solid #ddddff;
  color: #025d65;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
}

.admin .header h3 {
  background: #ddddff;
  line-height: normal;
  text-align: left;
}

.readings-index h3 {
  background: #aad5ff;
  font-size: 0.875em;
}

.search input[type="text"] {
  border-radius: 0;
  border-color: #999;
}

.search span.tip {
  background: #aad5ff;
  border: 1px solid #b6b7bf;
  color: #1a1c26;
}

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

.filters dd {
  font-size: 1em;
}

.nomination dt {
  background: #fff;
}

.userstuff h2 {
  color: #333;
}

.flash,
div.error {
  border-radius: 0;
}

.notice,
.comment_notice,
ul.notes,
.caution,
.error,
.comment_error {
  border-radius: 0;
  box-shadow: none;
}

.error,
.comment_error {
  box-shadow: none;
}

span.symbol {
  color: #1a1c26;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', Verdana, Helvetica, sans-serif;
}

.question a:hover {
  background: #ddddff;
  border-color: #9b9ca7;
  color: #81aeab;
}

span.question {
  background: #ddddff;
  border-color: #9b9ca7;
  box-shadow: none;
}

#symbols-key dl {
  border: 1px solid #9b9ca7;
}

#user-fandoms ol.index {
  padding-bottom: 0;
  text-align: center;
}

#user-fandoms ol.index li {
  display: inline-block;
  margin-right: .5em;
}

#user-fandoms ol#fandom_full_list {
  padding-top: 0;
  padding-bottom: 1.5em;
  display: block !important;
}

#user-fandoms p.actions {
  display: none;
}

.verbose legend {
  background: #fffff1 !important;
  border: 1px solid #aad5ff !important;
  box-shadow: none !important;
}

#workskin {
  max-width: 60%;
}

#workskin img {
  max-width: 99%;
  height: auto;
}

comments

Halp...

Sun, 08 May 2016 10:38:03 GMT

Posted by: jenrose

Okay, so I'm creating a fic where there's a sort of side-bar-ish insert of a really cheesy sex manual.

The manual needs to have headers in Impact and body text in Comic Sans. Because it's that kind of cheesy. There's terrible clip art too. I'd LIKE the manual to appear in an indented box surrounded by a line, with those fonts. I'd like the rest of the work to use site-standard fonts.

I know NOTHING about CSS. However, I'm pretty good at looking at a whole piece of html or whatever and adapting it to my needs. I'm having trouble finding just one whole workskin? And then understanding how to apply it to part of the fic and not the rest? Is that possible?

comments

Work Skin Dump

Sun, 01 May 2016 12:27:43 GMT

Posted by: fuck_yeah

I realized I haven't spammed this community with any new work skins lately, so here, for anyone who's interested:
- How to Make Linked Footnotes (not really a work skin, but a fun bit of coding)
- How to Make a Rounded Playlist
- How to Make Invisible Text (for spoilers and such)
- How to Mimic Undertale Fonts
- How to Make Customized Page Dividers
- How to Make iOS Text Messages

comments

SMS workskin?

Tue, 09 Feb 2016 16:33:42 GMT

Posted by: tropicsbear

Hello, I was wondering if anyone knows a workskin that displays SMS text in message bubbles? I remember I read a fic where the workskin made it look like they were iPhone SMS bubbles but I can't find the fic again and Google hasn't given me any tutorials/codes on how to make a workskin like that.

Any help would be much appreciated!

comments

Help with buttons

Fri, 14 Aug 2015 16:41:39 GMT

Posted by: seabroth

EDIT: I figured it out! Those buttons are "forms" with an "input - submit" type OVERTOP. So first you have to remove the input layer's background and stuff, and after that you can add the thickness you want to the padding layer of the form. Example:


input[type="submit"] {
  padding: none;
  margin: 0px;
  background: none !important;
}

form {
  color: black;
  background: #F3EFEC;
  padding: 10px;
}

The problem then, is that there are a few buttons that are inputs without this layer overtop. The "Update" button when you go to update your site skin is one such. I don't yet know what to do about that, maybe my brain just isn't working.

————————————————————

Hi guys! (One reason for this comm being dead might be because most people don't even know skins for AO3 exist...)

Because my "My Works/Bookmarks" page looks like this on my computer, I Googled for stuff and eventually found out that you can make site skins, and so I began!

~~I'm trying to create a skin, but I can't seem to get rid of (make smaller) the padding around certain types of buttons.~~

comments

Workskin: "Lined Notebook Paper"

Sun, 09 Aug 2015 01:17:34 GMT

Posted by: fuck_yeah

Fulfilling another request, this time to mimic lined notebook paper. You can see a live example of this skin here and the tutorial for it is here.

comments

Workskin: "Newspaper Article"

Wed, 22 Jul 2015 19:13:19 GMT

Posted by: fuck_yeah

So, this community seems pretty deserted, but I'm still sharing skins anyway in case anyone happens to stumble upon them. I received a request for a skin that mimicked a newspaper article. You can see a live example of what I created here and the tutorial for it is here.

comments

Work Skins: "Deadpool's Boxes" and "Sticky Notes"

Tue, 16 Jun 2015 21:03:28 GMT

Posted by: fuck_yeah

Hopefully it's actually okay to cross-post two tutorials here instead of actually posting the CSS here, but I've just discovered this community and was hoping to share the work skins I've created so far.

1. Deadpool's Boxes -- work skin emulating the yellow and white box in the Deadpool comics.

2. Sticky Notes -- work skin emulating sticky notes (aka "Post-Its")

I hope these are helpful and expect me to post more skins soon! :)

comments

AO3 Work Skins

Sat, 19 Jul 2014 06:01:12 GMT

Posted by: cottonballzofdeath

Hello all,

I'm writing a work skin for a story I'm going to post in AO3. For the most part, it seems to working fine, but one of the problems I'm having is that it puts items that are coded under a span html tag on separate lines. Everything looks fine when I'm publishing it in my browser, but when I preview the skin in AO3, everything with a span tag looks all wonky. Any suggestions on what I may be doing wrong and how I might be able to resolve this issue? I would really appreciate any input you might have to offer.

Thank you,

Cottonballz

comments

Making the table structure vsible

Sat, 16 Nov 2013 07:12:30 GMT

Posted by: smallbrownfrog

This is probably an incredibly basic question, but could somebody please help me understand how to make a Work Skin that will make all the dividing lines in a table visible again? I have a meta piece that I want to post, but it's completely unreadable and unusable once AO3's software has removed all the borders. I need clear lines between the different table cells so that people can easily scan a column or row.

Thank you.

comments

Flat Squares skin

Tue, 05 Mar 2013 11:27:19 GMT

Posted by: milkfatzero

A modern, 'flat' skin. Maybe someone other than me will find it useful *g*

Things of note: The category and warning icons on the blurbs have been replaced with colour-coded bits of text. The works font is set to a very large 20px.

Updated 2015-05-25.

Previews and code:

( Read more... )

comments

Tag links

Thu, 21 Feb 2013 01:04:19 GMT

Posted by: cesy

deansfangirl asked me a question about underlining on tag links, as text-decoration wasn't working, and I thought I'd post the answer here for anyone else who was wondering. It looks like it's been done with border-bottom 1px dotted, so a.tag {border-bottom: none;} should do the trick.

comments

New stats page and custom skins (the grey came back, thought it was a gonner, but...)

Tue, 05 Jun 2012 14:41:42 GMT

Posted by: facetofcathy

If you're using a custom skin of your own on the AO3, you may notice that the new statistics page (find it via your sidebar on your user page) has some grey backgrounds that may not work for you.

This colour is styled via the sandbox stylesheet which loads after your custom styles.

To change the grey you need to do this in your skin:

.statistics .even {
  background: YOURCOLOR !important;
  }

If you want to dig deeper into styling that page, be aware that there is also some padding styled in the sandbox as well that will need an !important to override it.

comments