Códigos para Ao3

[Fando]

Para los que no sepan, Archive of our Own permite personalizar tanto la interfaz de usuario como los fanfics por medio de códigos Css. Los códigos Css se usan para darle forma a una página web y determinan desde el color y tipo de letra hasta la forma de cosas como los menús de navegación o el cómo se comportan las imágenes y links al darles click.

Pese a ser una opción muy poderosa, no todos los usuarios saben que Ao3 permite su inserción o en su defecto no saben cómo crear estos códigos. Si bien este tema no pretende ser un curso de CSS la idea es compartir algunos códigos para que la gente pueda usarlos y se anime a irlos modificando para crear temas completamente a su gusto.

¿Cómo meto estos códigos?

Primeramente hay que aclarar que hay dos tipos de skins en ao3: Los skins para navegar en el sitio y los skins de los fanfics. Entramos a nuestra cuenta y damos click en My Dashboard > Skins



y tendemos las opciones de crear un skin de sitio con Create work skin y para crear los de fics en My Work Skins. Cuando seleccionemos unos nos aparecerán estas opciones para poder ponerle el nombre a nuestro, skin, una descripción y agregar el código CSS



Este tema es para que compartan sus códigos tanto para sitios como para trabajos y hacer que nuestro tiempo de lectura sea mucho más agradable y cómodo

 

[Fando]

SpamSkin

Código para trabajos de fondo oscuro con colores amarillo y rosa para elementos y una barra de separación personalizada.

Muestra



Código

#workskin {
  background: #1e272e;
  color: #f1f2f6;
  border-radius: 20px;
  padding: 0.5em;
  margin-top: 20px;
}

#workskin .group {
  background: #1e272e;
}

#workskin .title {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #ea8685;
}

#workskin #chapters p {
  padding-left: 1em !important;
  padding-right: 1em !important;
}

#workskin .preface blockquote {
  font-style: italic;
  padding: 0;
}

#workskin blockquote p {
  padding: 0 !important;
}

#workskin .group a {
  color: #ffdd59;
}

#workskin .group a:hover {
  color: #ffd32a;
}

#workskin .userstuff {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1em;
}

#workskin hr {
  overflow: visible;
  padding: 0;
  border: none;
  border-top: medium double #ffdd59;
  color: #ea8685;
  text-align: center;
}

#workskin hr:after {
  content: "☆";
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: #1e272e;
}

#workskin h2 {
  color: #ea8685 !important;
}

#workskin .module .heading {
  color: #ea8685;
  border-color: #ffdd59;
}

 

[akxmin]

Site Skin​

Hola, les traigo una skin simple y minimalista que hice para mí. Es algo elegante y más moderna que la skin por defecto de AO3, así que puede ser de interés para alguien más.

ALGUNAS CARACTERÍSTICAS DE LA SKIN...

Notarás que la mayoría de estas características están hechas por la única razón de que me gustan así. Como he dicho, esta es una skin 100% hecha para mí, pero creo que a algunas personas puede gustarles también.

• He utilizado como base la skin Tide, hecha por ElectricAlice.
• Anchura restringida. Un ancho menor ayuda MUCHO a la lectura, al menos en el sitio para computadoras.
• Utilicé gradientes pastel para las etiquetas, el hecho de que sea oscura ayuda demasiado.

VISTA PREVIA

​

INSTALAR LA SKIN

​

Ok, esto es un poco más largo que el habitual tutorial de "instalar una skin", porque esta skin depende de dos más (para el móvil y también para el iPad/tableta), pues necesita ser adaptada para la lectura. Por lo tanto, crearás 3 skins diferentes y las conectarás a través de la opción parent. ¡No te preocupes, voy a explicar cada paso!

Si te equivocas en algún punto. Puedes volver a la skin por defecto de AO3 bajando al final de la página y haciendo clic en "choose skin".

SKIN PRINCIPAL

• Asegúrate de estar conectadx en tu cuenta en AO3
• Ve a My Dashboard y luego haz clic en Skins (en el menú de la izquierda)
• Haz clic en el botón Create Site Skin
• Asegúrate de que en Type selecciones Site Skin
• Añade un título a tu skin. Esos títulos deben ser únicos en todo el sitio, algo como "TU_USUARIO-pastel" debería estar bien.
• Esta es la SKIN principal, la que tiene los colores y todo.
• Selecciona y copia TODO el código de aquí abajo

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  border-bottom: none;
  font-weight: normal;
}

body,
input,
.toggled form,
.dynamic form,
.secondary,
.dropdown,
button,
blockquote,
.filters dt,
.filters dd,
.filters input[type=submit],
.filters .expander,
.bookmark .user .meta,
.datetime,
a.work,
span.symbol,
.splash .news .meta,
select {
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
}

.qtip-content,
p.note,
blockquote,
body,
input,
.toggled form,
.dynamic form,
.secondary,
.dropdown,
button,
#main,
select {
  font-size: 1em;
}

.home .header h2,
.preface h3,
.faq .categories h3,
.userstuff h3,
#footer a {
  border-bottom: none;
}

.filters dt,
.filters dd,
.filters input[type=submit],
.filters .expander,
.userstuff li,
.userstuff ul,
.userstuff p,
.userstuff h2,
.userstuff h1,
.userstuff h3,
.userstuff h4,
p.note,
blockquote,
body,
input,
.toggled form,
.dynamic form,
.secondary,
.dropdown,
button,
#main,
select {
  line-height: 1.5;
}

.filters dt,
.filters dd,
.filters input[type=submit],
.filters .expander {
  font-size: 0.8333333333em;
}

h4.heading {
  font-size: 1.2em;
  font-weight: normal;
}

h4 {
  font-size: 1.2em;
}

h4.heading .datetime {
  padding: 5px;
  font-size: 0.5787037037em;
}

.preface a:hover {
  text-decoration: none;
}

#header {
  font-size: 0.8333333333em;
}

.news h4.heading {
  margin: 0;
}

code,
pre {
  font-family: "Courier New", Courier, Monospace;
  font-size: 1em;
  padding: 1em 0.5em;
}

html,
body,
div,
span,
applet,
object,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
.filters dt,
.filters dd,
.filters input[type=submit],
.filters .expander {
  font-size: 100%;
}

#header {
  margin: 0px;
  padding: 0.8em;
  background: url(https://64.media.tumblr.com/3caf6a489d9efba6ba7e21f7b31d394a/263a4a13dc5fd3c3-0d/s1280x1920/86be51d7c4414b62505cff36cbc4f65a295c90d2.jpg) !important;
  border-bottom: 1px solid;
  border-color: transparent !important;
}

#header .search {
  float: none;
}

input#site_search {
  width: 60px;
}

#header #search .text,
#header #search .text:hover,
#header #search .text:focus {
  margin: 0;
  color: #fff;
}

input#site_search:focus {
  width: auto;
}

#header #search input#site_search,
#header #search input#site_search:hover {
  background: #1A1A2E !important;
}

#header #search input {
  background: #B4C8CE !important;
  color: #1A1A2E;
}

#header #search input:hover {
  background: #252542 !important;
  color: #B4C8CE;
}

#header .heading {
  position: relative;
  display: inline-block;
  z-index: 1;
  padding: 0;
  margin-left: 0.5em;
}

#login,
#greeting {
  float: right;
  position: relative;
  display: inline-block;
  padding: 0.5em;
  margin-right: 0.5em;
}

#header .primary {
  position: relative;
  display: block;
  float: none;
  background: none;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  box-shadow: none;
}

#header .primary a {
  color: currentColor;
}

#header .logo,
#header .heading sup,
#greeting p.icon {
  display: none;
}

#header li {
  display: inline-block;
  float: none;
  position: relative;
}

#header input,
#header #search > *,
#header #search .submit {
  display: inline;
  float: none;
  vertical-align: middle;
}

#header .user {
  padding: 0px;
}

#header h1 {
  vertical-align: sub;
}

#header .user a:hover,
#header .user a:focus,
#header .user .current {
  color: currentColor;
  border-radius: 0px;
}

#footer {
  background-image: none;
  border-top: none;
}

#inner.wrapper {
  min-height: 80vh;
}

#main {
  padding-top: 2em;
}

#main.dashboard {
  margin-top: 0px;
}

#header .menu li {
  border-bottom: none;
  margin: 0;
}

#header .open .menu,
#header .dropdown:hover .menu,
.open + #small_login,
#header .menu li {
  border-radius: 5px;
}

.notice a,
.notice a:link,
.notice a:visited,
.announcement a,
.announcement a:link,
.announcement a:visited {
  text-decoration: underline;
}

#header .menu,
#small_login,
#header .dropdown:hover .current + .menu,
.event .userstuff,
.notice,
.comment_notice,
ul.notes,
.caution,
.error,
.comment_error,
.alert.flash,
.actions a:hover,
.actions input:hover,
.actions a:focus,
.actions input:focus,
label.action:hover,
.action:hover,
.action:focus,
.dynamic form,
.ui-draggable form,
#header .primary,
.group.listbox,
fieldset fieldset.listbox,
#main li.blurb,
.wrapper,
#dashboard .secondary,
.secondary,
form blockquote.userstuff,
.thread .comment,
.toggled form,
.listbox .index,
form .notice,
form ul.notes,
form.verbose legend,
.verbose form legend,
span.question,
fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
.delete a,
span.delete,
#header ul.primary,
.ui-sortable li,
input,
.actions input,
input[type=submit],
textarea,
.actions a,
.actions a:link,
.action,
.action:link,
button,
.current,
.actions label {
  box-shadow: none;
}

#footer,
.autocomplete .dropdown ul li:hover,
li.selected,
.autocomplete a:hover,
form .notice,
form ul.notes,
form.verbose legend,
.verbose form legend,
input,
.actions input,
input[type=submit],
textarea,
.actions a,
.actions a:link,
.action,
.action:link,
button,
.current,
.actions label {
  background-image: none;
}

.actions input,
input[type=submit],
textarea,
.actions a,
.actions a:link,
.action,
.action:link,
button,
.current,
.actions label {
  -webkit-appearance: none;
}

form .notice,
form ul.notes,
form.verbose legend,
.verbose form legend,
.actions a,
.actions a:link,
.action,
.action:link,
input[type=submit],
button,
.current,
.actions label,
.notice,
.comment_notice,
ul.notes,
.caution,
.error,
.comment_error,
.alert.flash,
.actions a:hover,
.actions input:hover,
.actions a:focus,
.actions input:focus,
label.action:hover,
.action:hover,
.action:focus,
.toggled form,
.dynamic form,
.ui-draggable form {
  border: none;
}

.actions a,
.actions a:link,
.action,
.action:link,
button,
.current,
.actions label {
  border: none;
}

input {
  width: 96%;
  border: 1px solid;
}

.actions a:hover,
a:hover,
.actions input:hover,
#dashboard a:hover,
.actions a:focus,
.actions input:focus,
#dashboard a:focus,
.actions a:active,
.current,
a.current,
.current a:visited,
#dashboard .current,
#outer .current,
#header .current,
span.unread,
.replied,
span.claimed,
dl.index dd,
.own,
.draft,
.draft .unread,
.child,
.unwrangled,
.unreviewed,
.ui-sortable li:hover,
#header .primary .menu .current {
  border-color: initial;
  box-shadow: none !important;
}

form .notice,
form ul.notes,
form.verbose legend,
.verbose form legend,
.actions a,
.actions a:link,
.action,
.action:link,
input[type=submit],
button,
.current,
.actions label {
  border-bottom: none;
}

.listbox .index,
.dashboard .listbox .index,
.splash .news li,
form dt,
.picture .header {
  border: none;
  border-bottom: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

#header .menu,
#small_login,
#header .dropdown:hover .current + .menu,
.event .userstuff {
  filter: none;
}

.autocomplete input,
.autocomplete .dropdown ul li {
  min-width: 10px;
}

fieldset.work.meta .fandom.required ul.autocomplete {
  background: transparent;
}

.filters fieldset {
  padding: 0px;
}

.filters .expander,
.filters .expanded .expander {
  padding: 0px;
  font-size: 1.05em;
  background: none;
}

.filters .expander::before {
  content: "➙";
}

.filters .expanded .expander::before {
  content: "➘";
}

.filters input:checked + .indicator + span {
  font-weight: inherit;
}

.filters [type=radio] + .indicator:before,
.filters [type=radio]:checked + .indicator:before,
.filters [type=checkbox] + .indicator:before,
.filters .exclude [type=checkbox] + .indicator:before,
.filters [type=checkbox]:checked + .indicator:before,
.filters .exclude [type=checkbox]:checked + .indicator:before,
input[type=checkbox],
input[type=radio],
input[type=checkbox]:checked,
input[type=radio]:checked,
.actions input[type=checkbox]:checked,
label.action input[type=checkbox]:checked,
input[type=checkbox]:hover,
.actions input[type=checkbox]:hover {
  width: 0.8em;
  height: 0.8em;
}

input[type=radio] {
  border-radius: 50%;
}

.filters [type=radio] + .indicator:before {
  content: "";
  vertical-align: -0.125em;
  background: none;
  background-color: #4a4a4a;
  border: none;
}

.filters [type=radio]:checked + .indicator:before {
  content: "";
  vertical-align: -0.125em;
  background: none;
  background-color: #8BC6EC;
  border: none;
}

.filters [type=checkbox] + .indicator:before,
.filters .exclude [type=checkbox] + .indicator:before {
  content: "";
  padding: 0px;
  border-radius: 0px;
  vertical-align: -0.125em;
  background: none;
  background-color: #4a4a4a;
  border: none;
}

.filters [type=checkbox]:checked + .indicator:before,
.filters .exclude [type=checkbox]:checked + .indicator:before {
  content: "";
  padding: 0px;
  border-radius: 0px;
  vertical-align: -0.125em;
  background: none;
  background-color: #8BC6EC;
  border: none;
}

.filters .exclude [type=checkbox]:checked + .indicator:before {
  background-color: #ffb6b9;
}

input[type=checkbox],
input[type=radio],
.actions input[type=checkbox],
label.action input[type=checkbox] {
  background-color: #4a4a4a;
  border: 1px solid #363636;
}

input[type=checkbox],
input[type=radio],
input[type=checkbox]:checked,
input[type=radio]:checked,
.actions input[type=checkbox]:checked,
label.action input[type=checkbox]:checked,
input[type=checkbox]:hover,
.actions input[type=checkbox]:hover {
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input[type=checkbox]:checked,
input[type=radio]:checked,
.actions input[type=checkbox]:checked,
label.action input[type=checkbox]:checked {
  background-color: #8BC6EC;
  border: none;
}

input[type=checkbox]:hover,
.actions input[type=checkbox]:hover,
.filters [type=checkbox]:hover + .indicator:before,
.filters [type=radio]:hover + .indicator:before,
.filters .exclude [type=checkbox]:hover + .indicator:before {
  background-color: #C779D0;
  border: none;
}

.filters dt {
  min-width: auto;
}

.filters {
  font-size: 90%;
}

div#inner {
  display: block;
  margin: 0 auto;
  width: 80%;
  max-width: 100em;
}

fieldset,
form dl,
fieldset dl dl,
fieldset fieldset,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
.listbox,
.listbox .index,
fieldset fieldset.listbox,
.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed,
form.verbose legend,
.verbose form legend,
li.blurb,
li.comment,
.comment h4.byline,
dl.index dd,
form blockquote.userstuff,
table,
tr,
th,
td,
thead,
tfoot,
.reading h4.viewed,
li.relationships a,
#bookmark_form_placement form,
#collection-form form,
.nomination dt {
  background: transparent;
}

.secondary,
dl.meta,
li.post.group,
.faq .example,
.guideline .example,
tr:hover,
fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
.listbox,
fieldset fieldset.listbox,
.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed,
form.verbose legend,
.verbose form legend,
li.blurb,
li.comment,
#bookmark_form_placement form,
#collection-form form {
  border: 1px solid;
  border-radius: 5px;
}

th,
thead,
tbody tr {
  border: 1px solid;
}

li.post.group {
  padding: 10px;
}

.splash .news li:last-of-type {
  border-bottom: 1px solid;
  border-radius: 5px;
}

tr,
th,
td,
thead,
tfoot {
  vertical-align: middle;
}

col.name {
  background: transparent;
}

.bookmark .user,
.filters dl,
.filters dt,
dl.index dd,
div.comment,
#modal,
#dashboard.own,
#dashboard ul,
.autocomplete div.dropdown ul,
.event .userstuff,
#dashboard.own,
#dashboard ul,
.splash .module h3,
.comment div.icon,
a,
a:link,
a:visited:hover,
.alert .userstuff,
.filters .group dt.bookmarker {
  border: none;
}

#dashboard.own,
#dashboard ul,
.splash .module h3,
.comment div.icon,
a,
a:link,
a:visited:hover {
  border-top: none;
  border-bottom: none;
}

span.symbol {
  color: initial;
  border: 1px solid;
  vertical-align: middle;
}

.blurb .header img,
#workskin h2.heading img {
  vertical-align: baseline;
  padding: 3px;
  border-radius: 3px;
}

.icon {
  height: 80px;
  width: 80px;
}

.tag .primary .icon,
.tagset .primary .icon {
  background: url(/images/imageset.png) -10px -285px;
}

.skins .primary .icon {
  background: url(/images/imageset.png) -10px -185px;
}

.comment h4.byline {
  padding: 0.25em;
}

.abbreviated h4.byline {
  padding-left: 0.25em;
}

.comment div.icon {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
}

.comment .icon .visitor {
  background: url(/images/imageset.png) no-repeat -10px -85px;
  display: block;
}

.comment .posted {
  display: block;
  float: none;
}

.fandom .group.listbox {
  width: 100%;
}

form.inbox {
  overflow-x: initial;
}

#dashboard {
  border-color: transparent;
}

.LV_invalid,
.qtip-content {
  background: #ffb6b9;
  border: 1px solid #ffb6b9;
  color: #2e2e2e;
  border-radius: 5px;
  box-shadow: none;
  z-index: 1;
}

.qtip-content {
  border-radius: 0 5px 5px;
}

.LV_invalid:before {
  border-color: #ffb6b9 transparent;
  border-width: 0 0.643em 0.643em;
}

.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
  border-color: #ffb6b9;
}

#bookmark-form,
#collection-form {
  margin-top: 20px;
}

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect,
#stat_chart svg g:nth-of-type(2) > g rect:last-of-type,
#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect:first-of-type {
  filter: hue-rotate(222deg);
  opacity: 70% !important;
}

#stat_chart svg text {
  font-family: Verdana, "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
}

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect:hover {
  filter: hue-rotate(217deg);
}

a.dropdown-toggle[href*="/works/new"] {
  background: url(https://64.media.tumblr.com/6a480ec874a2d8405884dca4c4359f0e/8b704f26c7323545-70/s100x200/404cbc9fc50f83963444b551b20f4ddd06d23f53.png) !important;
  background-size: 15px 15px !important;
  text-indent: -9999px;
  display: block-inline;
  width: 15px !important;
  height: 15px !important;
  padding: 0px !important;
}

a[href*="/users/logout"] {
  background: url(https://64.media.tumblr.com/28db0028536206eb80f4f6238634738f/8b704f26c7323545-9b/s100x200/4519ffcbaeeee4c8dd80799e98111f8ef459fc83.png) !important;
  background-size: 15px 15px !important;
  text-indent: -9999px;
  display: block-inline;
  width: 15px !important;
  height: 15px !important;
  padding: 0px !important;
}

body,
#header,
#outer.wrapper,
#inner.wrapper,
.secondary,
#modal,
.autocomplete div.dropdown ul,
.toggled form {
  color: #ffffff;
  background-color: #1A1A2E;
}

li.blurb,
.dashboard li.own,
li.skins.own,
.listbox,
fieldset,
li.post.group,
li.comment,
.wrapper dl.meta,
form dl,
.filters .expander,
#bookmark_form_placement form,
#bookmark-form.post.bookmark,
#collection-form form {
  background-color: #252542;
}

::-moz-selection,
::selection,
::-webkit-selection {
  background-color: #e49494;
  color: #252542;
}

.actions a,
.actions a:link,
.actions a:visited,
.action,
.action:link,
.actions input,
input[type=submit],
button,
.current,
.actions label,
.listbox > .heading,
.listbox .heading a:visited,
form dd.required,
.filters dt,
.filters dd,
.filters .expander,
#header .primary .menu a,
#header .primary .menu .current,
input[type=radio] + label,
input[type=checkbox] + label,
.userstuff h1,
.userstuff h2,
.userstuff h3,
.userstuff h4,
.userstuff h5,
.userstuff h6,
dd.fandom li.added.tag,
span.unreviewed.symbol,
ul.notes li::marker {
  color: #fff;
}

a,
a:link,
a:visited,
a.tag,
a.tag:link,
a.tag:visited,
#header .heading a,
#header .heading a:link,
#header .heading a:visited,
.splash .module h3,
.blurb h4 a:link,
.blurb h4 a,
.blurb h4 a:link,
.blurb h4 a:visited,
#header a,
#header a:link,
#header a:visited,
#header .current,
#header .primary .open a,
#header .primary .open a:link,
#header .primary .open a:visited,
#header .primary .dropdown a,
#header .primary .dropdown a:link,
#header .primary .dropdown a:visited,
#header .primary .dropdown a:focus,
#dashboard a,
#dashboard a:link,
#dashboard a:visited,
#dashboard span,
li::marker,
.draggable,
.droppable {
  color: #B4C8CE;
}

.actions a,
.actions a:link,
.actions a:visited,
.action,
.action:link,
.action:visited,
.actions input,
input[type=submit],
button,
.current,
.actions label,
.dropdown,
input#site_search:focus,
#header #search input:focus,
.autocomplete div.dropdown ul,
.dynamic form,
.secondary,
form.verbose legend,
.verbose form legend {
  color: #1A1A2E;
  background-color: #B4C8CE;
  transition: box-shadow 0.3s ease-out;
}

.splash .favorite li:nth-of-type(even) a,
.splash .favorite li:nth-of-type(odd) a {
  color: #B4C8CE;
  background-color: #252542 !important;
  transition: box-shadow 0.3s ease-out;
}

a:hover,
a:visited:hover,
a.tag:hover,
a.tag:visited:hover,
.listbox .heading a.tag:hover,
.listbox .heading a.tag:visited:hover,
.listbox .index a:hover,
.listbox .index a:visited:hover,
#dashboard a:hover,
#dashboard a:visited:hover,
.actions a:hover,
.actions a:visited:hover,
.actions a:focus,
.actions input:hover,
.actions input:focus,
label.action:hover,
.action:hover,
.action:visited:hover,
.action:focus,
.splash .favorite li:nth-of-type(even) a:hover,
.splash .favorite li:nth-of-type(even) a:visited:hover,
.splash .favorite li:nth-of-type(even) a:focus,
.splash .favorite li:nth-of-type(odd) a:hover,
.splash .favorite li:nth-of-type(odd) a:visited:hover,
.splash .favorite li:nth-of-type(odd) a:focus,
.blurb h4 a:visited:hover,
.blurb h4 a:hover,
input[type=submit]:hover,
#header .dropdown .menu a:hover,
#header .dropdown .menu a:visited:hover,
#header .dropdown .menu a:focus:hover,
a[href*="/users/logout"],
.event .userstuff,
.event .userstuff a,
.event .userstuff a:link,
.event .userstuff a:visited {
  background: linear-gradient(90deg, rgba(254,172,94,1) 0%, rgba(199,121,208,1) 35%, rgba(75,192,200,1) 100%);
  color: #ffffff;
  box-shadow: 1px 3px 10px -3px black;
}

a.tag:hover,
a.tag:visited:hover,
.listbox .heading a.tag:hover,
.listbox .heading a.tag:visited:hover,
.actions a:hover,
.actions a:visited:hover,
.actions a:focus,
.actions input:hover,
.actions input:focus,
label.action:hover,
.action:hover,
.action:visited:hover,
.action:focus,
input[type=submit]:hover {
  box-shadow: 1px 3px 10px -3px black !important;
}

#header .actions a.dropdown-toggle,
#header .actions a.dropdown-toggle:hover {
  background: #1a1a2e;
  box-shadow: none !important;
  border-radius: 5px;
  color: #e49494;
}

.blurb h4 a:visited {
  color: #eeeeee !important;
}

.pagination .current {
  color: #666;
}

#dashboard .current,
#header .menu,
#small_login,
#header .dropdown:hover .current + .menu,
#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
#header #search input:focus,
#header #search input,
tr:hover,
#outer .current,
.toggled form,
.dynamic form,
.secondary,
.dropdown,
.statistics .index li:nth-of-type(even),
.ui-sortable li {
  background-color: #252542;
  background: #252542;
}

.thread .even,
.ui-sortable li:hover {
  background-color: #252542;
}

.autocomplete .dropdown ul li:hover,
li.selected {
  background-color: #252542;
  background: #252542;
}

a.modal.help:hover,
li.relationships a {
  background-color: transparent;
}

.notice,
.comment_notice,
ul.notes,
.caution,
.comment_error,
.alert.flash,
.alert .userstuff,
.required .autocomplete,
.autocomplete .notice,
#header h2.collections,
#header h2 {
  background-color: #82b1d0;
  color: #000000;
}

.notice a,
.notice a:link,
.notice a:visited,
.caution a,
.caution a:link,
.caution a:visited {
  color: #000000;
  text-decoration: underline;
}

.kudos_error {
  color: #900;
}

.error {
  background-color: #82b1d0;
  color: #d41212;
}

#footer {
  background: linear-gradient(90deg, rgba(254,172,94,1) 0%, rgba(199,121,208,1) 35%, rgba(75,192,200,1) 100%);
}

#footer a,
#footer .heading,
#footer li {
  color: #ffffff;
}

#footer {
  background: linear-gradient(90deg, rgba(254,172,94,1) 0%, rgba(199,121,208,1) 35%, rgba(75,192,200,1) 100%);
}

.news dl.meta {
  padding: 10px;
}

fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
.listbox,
fieldset fieldset.listbox,
.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed,
form.verbose legend,
.verbose form legend,
.secondary,
th,
thead,
tbody tr,
.filters fieldset,
.wrapper,
li.blurb,
dl.meta,
.faq .example,
.guideline .example,
li.post.group,
li.comment,
.splash .news li:last-of-type,
.ui-sortable li,
#bookmark_form_placement form,
#collection-form form {
  border-color: #1a1a2e;
}

.required,
.alert.flash,
.nominations .rejected {
  color: #d41212 !important;
}

p.required.notice {
  color: #d41212 !important;
}

form.search input[type=text],
dd.autocomplete li.input,
input[type=radio],
select,
input[type=checkbox],
input[type=file],
input.number,
p input,
p select,
.heading select,
li select,
input:focus,
select:focus,
textarea:focus,
input,
textarea,
div#skin_media_checkboxes {
  color: #ffffff;
  border-top-color: #1A1A2E;
  border-color: #1A1A2E;
  background-color: #1A1A2E;
}

.filters [type=radio] + .indicator:before,
.filters [type=checkbox] + .indicator:before,
.filters .exclude [type=checkbox] + .indicator:before {
  background-color: #1A1A2E;
}

.filters [type=radio]:checked + .indicator:before,
.filters [type=checkbox]:checked + .indicator:before,
.filters .exclude [type=checkbox]:checked + .indicator:before {
  background-color: #e49494;
}

.filters .exclude [type=checkbox]:checked + .indicator:before {
  background-color: #e49494;
}

.secondary {
  background-color: #1A1A2E;
}

.javascript {
  background-color: #1A1A2E !important;
}

.announcement input[type=submit],
.announcement .action {
  background: #0e0e0e;
  border: 1px solid #0e0e0e;
  color: #ffffff;
}

.ui-draggable form {
  box-shadow: 0 0 3px #0e0e0e;
}

.userstuff blockquote {
  border-inline-start: 2px solid #8BC6EC;
}

span.offered.requested {
  color: #8693cd;
}

span.offered,
.replied,
.nominations .approved {
  color: #73c074;
}

.chapter .preface {
  border-color: #1A1A2E;
}

span.requested,
.nominations .rejected {
  color: #cd8687;
}

.blurb .header h4.heading a:hover,
.blurb .header h4.heading a:visited:hover {
  color: #eeeeee !important;
}

.blurb .header h4.heading a:visited {
  color: #eee !important;
}

.blurb .header img,
#workskin h2.heading img {
  background-color: #e49494;
}

div.work.listbox.group,
div.series.listbox.group,
div.bookmark.listbox.group {
  background: #1a1a2e;
  border-color: #1a1a2e;
}

div.work.listbox.group ul.index.group,
div.series.listbox.group ul.index.group,
div.bookmark.listbox.group ul.index.group {
  padding: 0;
}

tbody tr:hover {
  border-color: #1A1A2E;
}

#header h2 {
  border-color: #1A1A2E;
}

#workskin,
.system .userstuff,
.collection blockquote.userstuff {
  width: 70%;
  max-width: 45em;
}

.blurb blockquote {
  text-align: left;
}

.comment blockquote.userstuff {
  margin-block-start: 0;
}

.splash .comment .userstuff {
  width: 95%;
  margin: auto;
}

#main.system h2.heading {
  text-align: center;
  margin: auto;
  display: block;
}

::selection {
  background-color: #e49494;
  color: #252542;
}

h5.fandoms.heading {
  color: transparent;
}

.blurb h4.heading {
  text-align: center;
  padding: 10px 0;
  line-height: 150%;
}

.blurb h4.heading a {
  display: inline-block;
  font-size: 100%;
  border-radius: 5px;
}

.blurb h4.heading a:first-of-type {
  display: block;
  font-size: 140%;
  margin-bottom: 10px;
}

.blurb .header .heading {
  margin: 0.375em 5.25em;
}

h5.fandoms.heading {
  text-align: center;
}

.splash blockquote.userstuff.summary {
  width: 95%;
  margin: auto 10px;
}

dl.stats dt {
  display: none;
}

.skins .header dl.stats dt {
  display: inline-block;
}

dl.stats dd:nth-of-type(1)::before {
  background: url(https://64.media.tumblr.com/fff96d500a04ddf12517a48d83b228d2/b2e751421a20aa0c-a7/s100x200/c848a67de8f463ccdafa5b60948c61a172d5fe24.png);
}

dl.stats dd:nth-of-type(2)::before {
  background: url(https://64.media.tumblr.com/f835b437a474b4b672a8d4ebe61402b8/8979adde76f2ff05-fb/s100x200/8f86556b6896e96427f5a4a54f0de7be38ddba75.png);
}

dl.stats dd.language::before {
  display: none !important;
}

dl.stats dd.kudos::before {
  background: url(https://64.media.tumblr.com/23a3c6f134a96386f50fb8982a353590/8b704f26c7323545-01/s100x200/31e25f0be03646918168c4d49bd2ee9733b2cd59.png);
}

dl.stats dd.words::before {
  background: url(https://64.media.tumblr.com/fff96d500a04ddf12517a48d83b228d2/b2e751421a20aa0c-a7/s100x200/c848a67de8f463ccdafa5b60948c61a172d5fe24.png);
}

dl.stats dd.chapters::before {
  background: url(https://64.media.tumblr.com/a8ca48310f24581ae539336583690b26/b2e751421a20aa0c-5c/s100x200/a51b914598b64c3ddf6f705b278f11a68301d443.png);
}

dl.stats dd.comments::before {
  background: url(https://64.media.tumblr.com/7172c0bbe03a0eef7b236014dc78c905/8b704f26c7323545-78/s250x400/f37ba1ff69b5ef2ad7e5fe66b61fd748badc00d1.png);
}

dl.stats dd.bookmarks::before,
dl.stats dd a[href$=bookmarks]::before {
  background: url(https://64.media.tumblr.com/9b95d189a57699762d2262536e922ece/b2e751421a20aa0c-2a/s100x200/1aabb2ad7b90746f0469aefaa39af5b83728f8b9.png);
}

dl.stats dd.hits::before {
  background: url(https://64.media.tumblr.com/b2b8862a356132ac1aa41e9e9f0ddd1d/b2e751421a20aa0c-9e/s100x200/dcd2bcb1adbbb8f9e1844b61aee3dd3a653531e3.png);
}

dl.stats dd.collections::before {
  background: url(https://64.media.tumblr.com/ae825c2ad8071426c298c5b52970e294/b2e751421a20aa0c-18/s100x200/d1eb5dd259e2db588cda2100057c2c8fd9efaaf0.png);
}

dl.work dl.stats dd.published::before {
  background: url(https://64.media.tumblr.com/7e13419071a7eeb35f48a76c7aa0ba36/b2e751421a20aa0c-5d/s250x400/7f351f60793ad683e4a9dc4de55e4ee4d625f9d2.png);
}

dl.work dl.stats dd.status::before {
  background: url(https://64.media.tumblr.com/0ef9349a36cf808783e9488a97b64678/b2e751421a20aa0c-10/s250x400/8df1d3da298f875381822968f8e71ed4d7bcae31.png);
}

ul.statistics dl.stats dd.subscriptions::before {
  background: url(https://64.media.tumblr.com/64db76a65209eff79515dfc23842eb54/fd0b10e0262ddb71-14/s250x400/921de73c3d5bb819f4e3c58c7c45bd4c6edfe55f.png);
}

dl.stats dd.published::before,
dl.stats dd.status::before {
  width: 0px;
  margin-right: 0px;
}

li.collection dl.stats dd a[href$=collections]::before {
  background: url(https://64.media.tumblr.com/ae825c2ad8071426c298c5b52970e294/b2e751421a20aa0c-18/s100x200/d1eb5dd259e2db588cda2100057c2c8fd9efaaf0.png);
}

li.collection dl.stats dd a[href$=works]::before {
  background: url(https://64.media.tumblr.com/f835b437a474b4b672a8d4ebe61402b8/8979adde76f2ff05-fb/s100x200/8f86556b6896e96427f5a4a54f0de7be38ddba75.png);
}

li.collection dl.stats dd a[href$=bookmarks]::before {
  background: url(https://64.media.tumblr.com/9b95d189a57699762d2262536e922ece/b2e751421a20aa0c-2a/s100x200/1aabb2ad7b90746f0469aefaa39af5b83728f8b9.png);
}

li.collection dl.stats dd a[href$=fandoms]::before {
  background: url(https://64.media.tumblr.com/0a2f3d28fb850907a859726916e04e6f/8979adde76f2ff05-48/s250x400/926b1499363f66438d02fdc8bbea5ce610a75395.png);
}

ul.statistics dl.stats dd::before,
li.work dl.stats dd::before,
li.bookmark dl.stats dd::before,
dl.work dl.stats dd::before,
li.collection dl.stats dd a[href$=collections]::before,
li.collection dl.stats dd a[href$=works]::before,
li.collection dl.stats dd a[href$=bookmarks]::before,
li.collection dl.stats dd a[href$=fandoms]::before,
li.series dl.stats dd:not(.language):not(.words):not(.chapters):not(.collections):not(.comments):not(.kudos):not(.bookmarks):not(.hits):not(.published):not(.subscriptions):nth-of-type(1)::before,
li:not(.collection) dl.stats dd:not(.language):not(.words):not(.chapters):not(.collections):not(.comments):not(.kudos):not(.bookmarks):not(.hits):not(.published):not(.subscriptions):nth-of-type(2)::before,
dl.stats dd:not(.bookmarks) a[href$=bookmarks]::before {
  display: inline-block;
  width: 14px;
  height: 14px;
  content: " ";
  background-size: 14px 14px !important;
  margin-right: 5px;
}

a.tag:hover,
li.relationships a.tag:hover,
li.characters a.tag:hover {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(254,172,94,1) 0%, rgba(199,121,208,1) 35%, rgba(75,192,200,1) 100%) !important;
  box-shadow: 1px 3px 10px -3px black !important;
}

a.tag {
  background: #1a1a2ea6 !important;
  padding: 2px 10px;
  margin: 4px 0px;
  border-radius: 0 15px 15px;
  display: inline-block;
}

li.relationships a.tag,
li.relationships a.tag:hover {
  background: linear-gradient(90deg, rgba(254,172,94,1) 0%, rgba(199,121,208,1) 35%, rgba(75,192,200,1) 100%) !important;
  color: #fff !important;
  font-weight: bold;
}

li.characters a.tag {
  background: #1a1a2ea6 !important;
  color: #e49494 !important;
}

.commas li:after {
  content: " ";
  font-size: 10px;
}

.tag .primary .icon,
.tagset .primary .icon {
  display: none;
}

h2.heading a.tag {
  font-size: 75%;
}

a.tag {
  transition: color 0.5s ease-out, box-shadow 0.3s;
}

.current,
a.current,
a.current:hover {
  color: #fff !important;
}

div#ui-datepicker-div,
div#ui-datepicker-div td,
div#ui-datepicker-div th {
  background: #1a1a2e !important;
  box-shadow: none;
}

#header .logo {
  display: none;
}

#header h1.heading span {
  display: none;
}

#header h1.heading a:before {
  content: "Archive of Our Own";
  color: #1a1a2e;
  font-weight: bold;
  text-decoration: underline;
}

#header .heading sup {
  visibility: hidden;
}

#header .heading sup:before {
  content: "";
  visibility: visible;
}

• Pega el código en el campo "CSS"
• Click en SUBMIT
• Vamos al siguiente paso

SKIN IPAD/TABLETA

• Vuelve a My Dashboard y luego haz clic en Skins (en el menú de la izquierda)
• Haz clic en el botón Create Site Skin
• Asegúrate de que en Type selecciones Site Skin
• Añade un título a tu skin, asegurándote de que es para el iPad. Estos títulos deben ser únicos en todo el sitio, algo como "TU_USUARIO-ipad" debería estar bien. Y recuérdalo
• Selecciona y copia TODO el código que encontrarás aquí abajo

#workskin {
  margin: auto;
}

#workskin,
.system .userstuff,
.collection blockquote.userstuff {
  width: 90%;
  max-width: 45em;
}

div#inner {
  width: 90%;
}

• Pega el código en el campo "CSS"
• Haz click en el botón "Show" al lado de Advanced
• ¿Ves la parte donde está "Media" y un montón de opciones? Desplázate hacia abajo en la lista hasta que encuentres only screen and (max-width: 62em), debería ser una de las últimas de la lista y márcala.
• Click en SUBMIT

SKIN CELULAR/MÓVIL

• Regresa a My Dashboard y luego haz clic en Skins (en el menú de la izquierda)
• Haz clic en el botón Create Site Skin
• Añade un título a tu skin, asegurándote de que es para el móvil. Estos títulos deben ser únicos en todo el sitio, algo como "TU_USUARIO-mobile" debería estar bien. Y recuérdalo.
• Selecciona y copia TODO el código que encontrarás aquí abajo

#workskin,
.userstuff {
  font-size: 105%;
}

h4 {
  font-size: 1.2em;
}

#dashboard .secondary {
  background-color: transparent;
}

div#inner,
#workskin,
.collection blockquote.userstuff,
.blurb .userstuff,
.news .userstuff,
.system .userstuff {
  width: 100% !important;
}

#footer .module {
  max-width: 40%;
  margin: auto;
}

#footer .heading {
  overflow-wrap: break-word;
}

.filters dt,
.javascript {
  background-color: transparent;
}

#ui-datepicker-div {
  top: 522px !important;
}

#header {
  font-size: 110%;
}

#header .search {
  display: block;
}

#header .heading,
#login,
#greeting,
#header .primary {
  display: block;
  margin: auto;
  width: 100%;
  text-align: center;
  float: none;
}

#login,
#greeting {
  padding: 0;
}

#header .dropdown .menu a,
#header .dropdown .menu .current {
  white-space: nowrap;
}

#header .user {
  float: none;
  text-align: center;
}

#header .menu,
#small_login,
#header .dropdown:hover .current + .menu,
#header .menu,
#small_login,
#header .dropdown:hover .current + .menu {
  width: auto;
}

.primary li:nth-of-type(4) .menu {
  margin-left: -110px;
}

.home .header .userstuff,
.home .header dl.stats,
.home .header .type {
  margin-left: auto;
}

.home .header h2 {
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  text-align: center;
  word-break: break-word;
}

.home .header ul.actions,
ul.actions,
p.actions,
li.actions,
span.actions,
fieldset.actions,
dd.actions {
  float: none;
}

.news h4.landmark {
  display: none;
}

.user h2.heading,
.admin h2.heading,
.collection h2.heading {
  margin: 10px auto;
  text-align: center;
}

div.preface {
  margin: 1.5em;
}

#dashboard,
#dashboard.own {
  border-bottom: 0px;
  border-top: 0px;
  border: 0px;
}

.blurb .header .heading {
  margin: 0.375em 0.375em;
  overflow-wrap: break-word;
}

.blurb .datetime {
  position: initial;
  text-align: center;
  margin-top: 5px;
}

a.tag {
  word-break: break-word;
}

.blurb h4.heading a {
  word-break: break-word;
}

.blurb h4.heading,
.blurb .header .heading {
  margin: 0;
}

.blurb ul.required-tags {
  position: initial;
  top: initial;
  text-align: center;
  display: inline-block;
  width: 100%;
  margin: auto;
}

.blurb ul.required-tags li + li + li,
.blurb ul.required-tags li + li + li + li {
  position: initial;
  left: initial;
}

.blurb ul.required-tags li {
  display: inline-flex;
}

.bookmark p.status {
  position: relative;
  right: initial;
  z-index: initial;
  display: inline-block;
  width: 100%;
  margin: auto;
  text-align: center;
}

.bookmark .status span,
.bookmark .status a {
  display: inline-block;
}

.bookmark span.count {
  line-height: initial;
  position: initial;
  top: initial;
  left: initial;
  text-align: center;
}

.bookmark .status a:focus {
  overflow: initial;
}

.bookmark .status .count {
  background: none;
}

.blurb .header h5.fandoms {
  margin: 0px;
}

.blurb .header p.notice,
.blurb ul.series {
  margin: 10px 0;
}

.blurb .tags li {
  padding-left: 0;
  padding-right: 0;
}

.assigned.module th[scope=col],
thead th[scope=col] {
  max-width: 18px;
  overflow: hidden;
}

#wrangulator table {
  font-size: 80%;
}

#wrangulator ul.actions li a,
#wrangulator ul.actions li label {
  font-size: 70% !important;
}

tr,
th,
td,
thead,
tfoot {
  vertical-align: top;
}

#wrangulator tbody tr th {
  word-break: break-word;
}

#wrangulator tbody a.tag {
  margin: initial;
  padding: initial;
  background: initial !important;
}

.faq .userstuff .notice,
.faq .userstuff .caution,
.faq .example,
.guideline .userstuff .notice,
.guideline .userstuff .caution,
.guideline .example {
  margin: 0;
}

li.showme a.actions,
dl.stats dd,
.actions a,
.actions a:link,
.actions a:visited,
.action,
.action:link,
.action:visited {
  white-space: normal;
  height: initial;
}

p.kudos {
  background: none;
  padding: 0;
  min-height: 0;
  word-break: break-word;
}

p.kudos::before {
  content: "Kudos:";
}

div.preface,
.preface.group blockquote.userstuff {
  margin: 0;
}

.chapter .secondary,
.download .secondary {
  top: initial;
  right: 0;
  margin: 10px;
}

.chapter .expandable.secondary,
.chapter .expandable.secondary select {
  width: 90%;
}

.skins .header .heading,
.user.pseud.picture.blurb .header .heading {
  margin: 0.375em 0.375em;
}

.userstuff dd {
  margin-inline-start: 1em;
}

.blurb dl.tags dd,
dl.meta dd {
  margin-left: 0;
}

.meta dd {
  margin: 0.643em 0;
}

.user .primary p.icon,
.admin .primary .icon,
.collection .icon {
  position: initial;
  margin: 10px auto;
}

.primary .icon {
  position: relative;
}

input#site_search {
  width: auto;
}

.comment blockquote.userstuff p {
  width: 95%;
  margin-left: 0;
  margin-block-end: 0;
  margin-block-start: 0;
  margin-block: 0;
}

.comment .icon .visitor {
  background: url(/images/imageset.png) no-repeat 0 -525px transparent;
}

.comment h4.byline {
  overflow-wrap: break-word;
}

• Pega el código en el campo "CSS"
• Haz click en el botón "Show" al lado de Advanced
• ¿Ves la parte donde está "Media" y un montón de otras opciones? Desplázate hacia abajo en la lista hasta que encuentres only screen and (max-width: 42em), debería ser una de las últimas de la lista y márcala.
• A continuación, la parte más importante: tienes que conectar las otras dos skins que acabas de guardar.
• Hay una parte en Advanced en la que tienes "Parent Skins". Haz clic en el botón Add parent skin. Debería añadir un campo llamado "Parent #1" donde puedes escribir cosas.
• Escribe el nombre de la skin principal "TU_USUARIO-pastel" y selecciónalo
• Ahora haz clic de nuevo en "Add parent skin" y añade la segunda skin
  • Escribe el nombre de la skin para el iPad "TU_USUARIO-ipad" y selecciónalo
• Click en SUBMIT
• Ahora, click en "USE"
• Y debería estar listo. Los títulos deben tener un formato adecuado y ser legibles con los iconos debajo del título.

¡Espero que te guste!

 

[Kaanbaltla]

Cambiar los símbolos de los fanfics

​

Como aclaración, yo no hice este maravilloso trabajo, solo lo estoy compartiendo. Aquí podrán ver el post original en Tumblr por ao3css.

Hay varias versiones, de 25x25px, de 50x50 y de 100x100. La diferencia entre cada una es, obviamente, la calidad de imagen, pero también el hecho de que, entre mayor calidad (si tu conexión a internet es muy mala), mayor tardarán en cargar los símbolos, y más consumen. Recomiendo usar el 50x50, para estar en el limbo de la neutralidad, pero si tienen buena conexión recomiendo obviamente el 100x100, y si tienen mala, entonces el 25x25.

Para hacer este cambio de símbolos, deben de crear una site skin (cómo, pueden verlo en el mensaje anterior hecho por Akamin) y posteriormente añadir esta site skin como "Parent Skin" a la que ya usen (si no usan ninguna, entonces solo denle click a "Use").

50x50

rss span, p.kudos, .required-tags .rating-general-audience, .required-tags .rating-explicit, .required-tags .rating-mature, .status .count, .required-tags .rating-teen, .required-tags .category-femslash, .required-tags .category-gen, .required-tags .category-slash, .required-tags .category-het, .required-tags .category-multi, .required-tags .category-other, .required-tags .complete-no, .required-tags .complete-yes, .required-tags .warning-yes, .required-tags .warning-choosenotto, .required-tags .external-work, .status .private .text, .status .public, .status .hidden, .status .rec, .index .skins .icon, .index .mystery .icon, .index .tagset .icon, .comment .icon .anonymous, .comment .icon .visitor, .abbreviated .icon .anonymous, .abbreviated .icon .visitor, .skins .primary .icon, .admin .primary .icon, .tagset .primary .icon { background-image: url(https://64.media.tumblr.com/4e1bef2b54e4dc10ec66081d36315a3f/95e5be0d8d483082-38/s2048x3072/09be125b74e11787d380ae9edf947fb2d1dc6c4b.png) !important; background-size: 200px 735px !important; }

25x25

rss span, p.kudos, .required-tags .rating-general-audience, .required-tags .rating-explicit, .required-tags .rating-mature, .status .count, .required-tags .rating-teen, .required-tags .category-femslash, .required-tags .category-gen, .required-tags .category-slash, .required-tags .category-het, .required-tags .category-multi, .required-tags .category-other, .required-tags .complete-no, .required-tags .complete-yes, .required-tags .warning-yes, .required-tags .warning-choosenotto, .required-tags .external-work, .status .private .text, .status .public, .status .hidden, .status .rec, .index .skins .icon, .index .mystery .icon, .index .tagset .icon, .comment .icon .anonymous, .comment .icon .visitor, .abbreviated .icon .anonymous, .abbreviated .icon .visitor, .skins .primary .icon, .admin .primary .icon, .tagset .primary .icon { background-image: url(https://64.media.tumblr.com/2a154efcaeecc643bc61e9569b23ec63/95e5be0d8d483082-12/s500x750/891350d5f5e5abfd6fc8f4ea1ec9c7f8385bf3f9.png) !important; background-size: 200px 735px !important; }

100x100

rss span, p.kudos, .required-tags .rating-general-audience, .required-tags .rating-explicit, .required-tags .rating-mature, .status .count, .required-tags .rating-teen, .required-tags .category-femslash, .required-tags .category-gen, .required-tags .category-slash, .required-tags .category-het, .required-tags .category-multi, .required-tags .category-other, .required-tags .complete-no, .required-tags .complete-yes, .required-tags .warning-yes, .required-tags .warning-choosenotto, .required-tags .external-work, .status .private .text, .status .public, .status .hidden, .status .rec, .index .skins .icon, .index .mystery .icon, .index .tagset .icon, .comment .icon .anonymous, .comment .icon .visitor, .abbreviated .icon .anonymous, .abbreviated .icon .visitor, .skins .primary .icon, .admin .primary .icon, .tagset .primary .icon { background-image: url(https://64.media.tumblr.com/4e1bef2b54e4dc10ec66081d36315a3f/95e5be0d8d483082-38/s2048x3072/09be125b74e11787d380ae9edf947fb2d1dc6c4b.png) !important; background-size: 200px 735px !important; }

---

Por último, pueden tomar la imagen como base para crear sus propios símbolos. Solo sería cuestión de que, después de haberlo creado, lo suban a algún lado que les cree un URL directo (recomiendo ImgBB, FileGarden o Catbox), y reemplazar el URL del código ya dado!

---

Encontré más alternativas! Las comparto por aquí:

Disponibles aquí en AO3.

Disponibles aquí en AO3 (hay más versiones de las que estoy mostrando aquí).

 

[Leah]

Les amo a todos ustedes, porque yo soy viejita de ffnet (que aún debo actualizar ese tema); así que como que me están recordando lo maravilloso que puede ser Ao3 más allá de todo hahaha

 

[Luka-sama]

Les amo a todos ustedes, porque yo soy viejita de ffnet (que aún debo actualizar ese tema); así que como que me están recordando lo maravilloso que puede ser Ao3 más allá de todo hahaha

Yo quiero hacer mi ao3 lindo.

*Voltea a ver el año en que nacio*

Pero tal vez no creo que sea posible xD fanfiction.net, en algunas cosas eras más facil <3

 

[Kaanbaltla]

Ocultar estadísticas

​

Traigo un código bastante corto pero útil.

Las estadísticas es un elemento con que los fickers siempre han peleado, e incluso un elemento con el que se han obsesionado... pero no de buena manera, porque así como existe la frase "la comparación es la asesina de la creatividad", también existe la frase "la obsesión con los números es la asesina de la felicidad". Y una forma de quitarse esa obsesión fea con las estadísticas es... ignorarlas. Pero no todos pueden ignorar algo tan presente a consciencia, así que AO3 con su CSS permite ocultar las estadísticas.

#kudos,
.bookmark .status .count,
.series .stats,
.stats .bookmarks,
.stats .comments,
.stats .hits,
.stats .kudos,
option[value=bookmarks_count],
option[value=comments_count],
option[value=hits],
option[value=kudos_count] {
  display: none;
}

Este es el código que yo personalmente uso, oculta hits, kudos, bookmarks y comentarios en fanfics propios y ajenos, en los resultados de búsqueda y cuando abres un fanfic/serie/colección, y también quita las opciones de filtrar por dichas estadísticas. También oculta el listado de usuarios que dejaron kudos en un fanfic al abrirlo.

Si todavía quisieran filtrar por esas estadísticas, quiten del código los "option[value=]".

Si quisieran ver el lista de usuarios que dejaron kudos, quiten "#kudos".

Este código también permite ver la gráfica y los conteos totales por año de estadísticas en "https: //archiveofourown.org/users/TuUsuer/stats", pero si quisieran no ver ni la gráfica ni los conteos, entonces añadan lo siguiente:

.chart.statistics,
.group.meta.statistics,
ul.statistics.index.group

El primero oculta la gráfica, el segundo oculta los conteos y el tercero oculta el listado de todos sus fanfics que hay abajo.

Si quisieran una alternativa para ocultar y mostrar las estadísticas sin la necesidad de usar/dejar de usar una site skin, instalen entonces este userscript. (Aquí tutorial de cómo instalar userscripts.) Este userscript oculta hits, kudos, comentarios (incluyendo el botón), bookmarks y el inbox. Para que funcione lo de ocultar el inbox, en el código del userscript deben de identificar esto:

a[href="/users/yourusername/inbox"]

Y reemplazar "yourusername" con su username de AO3.

Eso sería todo! Cualquier duda, pueden preguntar.