seen from United Kingdom
seen from Japan
seen from China
seen from United States
seen from United States
seen from China
seen from United States
seen from Bulgaria
seen from United States
seen from China
seen from United Kingdom
seen from Japan
seen from Ukraine
seen from China
seen from China
seen from China
seen from United States
seen from China
seen from Bulgaria
seen from China
i made my first ao3 skin!! its heavily inspired by constellations, with my favourite colours subbed in. calling it starfall <3. im so so proud of it for my first skin and will DEF be making more!
If you're interested in the skin <3 itslia27/AO3-Skins: Site Skins by Me!! - GitHub
AO3 Site Skins - im_lia [Archive of Our Own] - AO3
side note: this is also my first time using tumblr so lmk if i did things wrong
Kitty Bell's AO3 Skin!
@ivylor You asked for my AO3 skin code! I don't really know code either but I know what's vaguely happening. So I don't know where I got the main code originally but I do know that I got the stats icon code from (here). Then I think I picked bits and pieces from other places. I would like to mention I have code in there to remove buttons. This prevents me from accidentally deleting my fics. Still working on some of those pieces. If you want to delete a fic you will have to turn off the skin. Also, Ivylor you could have commented on the post, you didn't have to msg me. I thought you were a bot tbh. For next time ig. Also meant to make this earlier sorry for making you wait!
Anyways! Photos of my AO3 skin!
Code down below! WARNING THIS CODE IS VERY LONG:
Edit: If you ever need help with the skin please contact me! I will be very happy to help!
Edit Edit: SO I made a pastebin so you all can click copy so you can paste it easier in AO3! https://pastebin.com/28Ah7QMs. Again if you have troubles with the skin please don't be afraid to contact me.
Hide All AO3 Stats and Stats Page
Custom skin code to hide all stats on ao3 and replace your stats page with an image of your blorbos of choice!
I struggle with stat checking and comparing, so for a few months now, I've used a custom skin on ao3 to hide all stats from view. The code to hide stats from fics is pretty easily found online, but even after hiding those stats, I struggled with the temptation of checking my Statistics page.
After drawing inspiration from others online who have attempted something similar and through my own experimentation, I've written code that allows you to hide all your stats on your stats page and replace with an image of your choice. The image scales for all devices (that I tested on), so the image will maintain scale on both your phone and laptop, regardless of screen size/shape!
Instead of seeing statistics, give yourself a boost of dopamine with an image of your blorbos whenever you click on your stats page instead :) All you have to do is replace "IMAGE LINK HERE" with the url of the image you choose (keep the quotes). Cheers!
.stats .hits, .stats .kudos, .stats .comments, .stats .bookmarks { display: none; }
.stats-index .heading, .stats-index .chart, .stats-index .actions, .statistics { display: none; }
.stats-index { background: url("IMAGE LINK HERE") center; background-repeat: no-repeat; background-size: contain; width: 80%; height: auto !important; }
Hello ao3 changed a thingy in the coding which turned the mark for later into this
I fixed it on my skin by turning it into a different looking button [since I can’t make it look exactly like before I may as well change it a bit :)]
This does not however change the mark as read below as I do not know yet how to do that.:
So stay tune for more update
Anyway here is the code below and if you want to change anything about that button you just need to go to the 2 last paragraph :
#footer .group,
.post fieldset fieldset,
fieldset fieldset {
background: none;
}
#header {
background: #000 url('https://media.archiveofourown.org/news/milestones/2024-08-seventeen-years-otw/2024-08-seventeen-years-otw-pattern.jpg');
background-size: 350px;
}
#header .heading a,
#header .primary .dropdown a:focus,
#header .heading a:visited,
#main .pagination .current,
h2 {
color: #ffe8b4;
}
#header .clear,
#footer {
border-color: #000000;
}
#header .actions a[href="/menu/fandoms"],
#header .actions a[href="/menu/browse"],
#header .actions a[href="/menu/search"],
#header .actions a[href="/menu/about"] {
color: #DEB887;
}
#footer ul {
background: url('https://live.staticflickr.com/7284/9616997915_4194b6c6f7_h.jpg');
background-size: 350px;
}
#footer ul li:nth-child(1) ul,
#footer ul li:nth-child(2) ul,
#footer ul li:nth-child(3) ul,
#footer ul li:nth-child(4) ul {
background: rgba(0, 0, 0, 0.0);
}
#header .primary {
background: #8a1a10;
}
#footer {
background: #8a1a10;
}
input[type="text"],
textarea,
select {
background: #191919;
color: #DEB887;
}
select:focus {
background: #2a2a2a;
}
option {
background: #191919;
color: #DEB887;
}
#work form fieldset.work.meta dl dd.warning.required fieldset,
#main form fieldset.work.meta dl dd.warning.required fieldset {
color: #DEB887;
}
#bookmark-form form {
background: #2a2a2a;
color: #DEB887;
}
#error {
color: #ffe8b4;
}
fieldset,
.verbose fieldset {
border-color: #404040;
background: #000000;
border: 1px solid #595959;
}
.search [role=tooltip] {
background: #333;
border: 1px solid #666;
}
#main a:visited {
color: #c88937;
}
#main a.tag:visited:hover {
color: #111;
}
body,
.group,
.group .group,
.region,
.flash,
form dl,
#main .verbose legend,
.notice,
ul.notes,
table,
th,
td:hover,
tr:hover,
.symbol .question:hover,
#modal,
.ui-sortable li,
.required .autocomplete,
.autocomplete .notice,
.system .intro,
.comment_error,
.kudos_error,
div.dynamic,
.dynamic form,
#ui-datepicker-div,
.ui-datepicker table {
background: #000000;
color: #FFE4B5;
border-color: #800000;
outline: #111;
box-shadow: none;
}
#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
#header .menu,
#small_login,
.group.listbox,
fieldset fieldset.listbox,
.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: #191919;
}
a,
a.tag,
a:link,
#header a:visited,
#header .primary .open a,
#header .primary .dropdown:hover a,
#header #search input:focus,
#header #search input:hover,
.userstuff h2,
#dashboard a,
#dashboard span,
#dashboard .current,
.group .heading,
.filters dt a:hover {
color: #DEB887;
}
#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: #111;
color: #ffe8b4;
}
#outer,
.javascript,
.statistics .index li:nth-of-type(even),
#tos_prompt,
.announcement input[type="submit"] {
background: #000000;
}
#dashboard ul,
dl.meta,
.group.listbox,
fieldset fieldset.listbox,
#main li.blurb,
form blockquote.userstuff,
div.comment,
li.comment,
.toggled form,
form dl dt,
form.single fieldset,
#inner .module .heading,
.bookmark .status span,
.splash .news li,
.filters .group dt.bookmarker {
border-color: #2a2a2a;
}
.group.listbox,
fieldset fieldset.listbox,
#main li.blurb,
.wrapper,
#dashboard .secondary,
.secondary,
form blockquote.userstuff,
.thread .comment,
.toggled form {
box-shadow: 1px 1px 3px #000;
}
#dashboard .current,
.actions a:active,
a.current,
.current a:visited,
span.unread,
.replied,
span.claimed,
dl.index dd,
.own,
.draft,
.draft .unread,
.child,
.unwrangled,
.unreviewed,
.ui-sortable li:hover {
background: #000;
border-color: #191919;
box-shadow: -1px -1px 3px #000;
}
input,
textarea {
box-shadow: inset 0 1px 2px #000;
}
li.blurb,
.blurb .blurb,
.listbox .index,
fieldset fieldset.listbox,
.dashboard .listbox .index {
box-shadow: inset 1px 1px 3px #000;
}
#footer a:hover,
#footer a:focus,
.autocomplete .dropdown ul li:hover,
.autocomplete .dropdown li.selected,
a.tag:hover,
.listbox .heading a.tag:visited:hover,
.symbol .question {
background: #ffedc5;
border-color: #988352;
color: #111;
}
#header #greeting img,
#header .user a:hover,
#header .user a:focus,
#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,
.comment_error,
.kudos_error,
a.cloud7,
a.cloud8,
#tos_prompt .heading {
color: #ffe8b4;
}
#greeting .icon,
#dashboard,
#dashboard.own,
.LV_invalid_field input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active .comment_error,
.kudos_error,
.qtip-content {
border-color: #8a1a10;
}
.splash .favorite li:nth-of-type(odd) a:hover,
.splash .favorite li:nth-of-type(odd) a:focus .splash .favorite li:nth-of-type(odd) a:visited:hover,
.splash .favorite li:nth-of-type(odd) a:visited:focus {
background: #ffe8b4;
color: #111;
}
a:visited,
.actions a:visited,
.action a:link,
.action a:visited,
.listbox .heading a:visited,
span.series .divider {
color: #BC8F8F;
}
.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
input[type="submit"],
button,
.current,
.actions label,
#header .actions a,
#outer .current {
background: #191919;
border-color: #222;
color: #c88937;
box-shadow: inset 0 -8px 4px #232323, inset 0 8px 7px #191919;
text-shadow: none;
}
.actions a:hover,
.actions input:hover,
#dashboard a:hover,
.actions a:focus,
.actions input:focus,
#dashboard a:focus,
.actions .disabled select {
color: #999;
border-color: #000;
box-shadow: inset 2px 2px 2px #000;
}
.actions a:active,
.current,
a.current,
.current a:visited {
color: #DEB887;
background: #191919;
border-color: #DEB887;
box-shadow: inset 1px 1px 3px #000000;
}
.delete a,
span.delete {
box-shadow: -1px -1px 2px rgba(255,255,255.25);
}
.actions label.disabled {
background: #222;
box-shadow: none;
}
ul.required-tags,
.bookmark .status span,
.blurb .icon {
opacity: 0.9;
border: 0;
}
#outer .group .heading,
#header .actions a,
fieldset.listbox .heading,
.userstuff .heading {
text-shadow: none;
color: #DEB887;
background: none;
}
#header .actions a,
fieldset fieldset,
.mce-container button,
.filters .expander,
.actions .disabled select {
box-shadow: none;
}
fieldset fieldset.listbox {
outline: none;
}
form dd.required {
color: #c88937;
}
.mce-container input:focus {
background: #F3EFEC;
}
.announcement .userstuff a,
.announcement .userstuff a:link,
.announcement .userstuff a:visited:hover {
color: #111;
}
.announcement .userstuff a:visited {
color: #666;
}
.announcement .userstuff a:hover,
.announcement .userstuff a:focus {
color: #999;
}
.event.announcement .userstuff a,
.filters .expander {
color: #c88937;
}
.error {
background: #8a1a10;
border-color: #8B0000;
color: #ffe8b4;
box-shadow: 1px 1px 3px #800000;
}
.LV_invalid,
.LV_invalid {
border: 1px solid #8B0000;
background: #8a1a10;
color: #ffe8b4;
padding: 0.25em 0.375em;
box-shadow: 1px 1px 2px #800000;
border-radius: 0.25em;
}
li.mark button {
background: #191919 !important;
border: 1px solid #222 !important;
color: #8a1a10;
box-shadow: inset 0 -8px 4px #232323, inset 0 8px 7px #191919;
text-shadow: none;
}
li.mark button:hover {
background-color: #222 !important;
box-shadow: inset 0 -8px 4px #232323, inset 0 8px 7px #191919;
}
New AO3 format code to make information titles look Star Trek-y!
https://archiveofourown.org/works/78586836/chapters/206063136
Gave my ao3 a new look! Fucked around with bits and pieces from other skins to get it right. And I've got to say I'm impressed 😌
AO3 Invitation
If anyone needs an invitation code for AO3, please feel free to contact me and I'll be able to send you one!
Update November 2024:
I just sent my last couple invitations out and don't have anymore left right now. If I get more at some point I'll create a new post. Thank you and I hope you all have fun reading and creating on AO3. Have fun!
AO3 Invitation
If anyone needs an invitation code for AO3, I still have a few lying around in my account. Just contact me and I'll be able to send you one via email!
