Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Additional Tags:
Language:
English
Series:
Part 2 of Clean Site Skins
Collections:
Ao3 Skins
Stats:
Published:
2024-04-23
Words:
1,550
Chapters:
1/1
Comments:
57
Kudos:
155
Bookmarks:
67
Hits:
10,652

Clean Pink in Dark Mode

Summary:

A clean pink dark mode site skin that
- removes the "you've muted users" notif
- replaces stat labels like "Hits" with icons
- makes buttons flat

Preview images + installation instructions included!

Notes:

if you know how to code: this css is definitely not optimized, i just plugged things in as i went/decided what i wanted to alter so my apologies for the mess!!

also!! make sure to put the hex codes in the Wizard, otherwise even if you copy/paste the CSS perfectly, the site skin won't look right :)

(See the end of the work for more notes.)

Work Text:

 

Installation Process

  1. Log in to your AO3 account.
  2. Click 'Dashboard'
  3. Click 'Skins'
  4. On the right, click the button 'Create Site Skin'
  5. It will by default have the type as 'site skin' so leave that, but put in a title otherwise it won't save
  6. Copy and paste the code written under CSS here in the CSS text box.
  7. Click the 'Use Wizard' button, immediately to the left of the 'Write Custom CSS' button.
  8. Enter these hex codes:

    Background color: #36353a

    Text color: #f3f3f3

    Header color: #c32060

    Accent color: #e37aa3

  9. Scroll to the bottom and hit 'Submit' on the lower right.
  10. Click 'Use'.

And ta-da! You've made a site skin, fantastic job :)

If you don't want the icons, stop copying once you see dl. stats dt {. All the code after that is strictly for the icons.

Note: the color of the icons is based off the image linked and not any color settings in this skin. If you want to change any of the icons or just switch the color, I used icons8.com to source all the icons. You can change the color of the icon before downloading it; I just copy/pasted hex codes for perfect matches.  Then, once you've done that, you have to post the image to a site to get a url link for the image. I posted the images on tumblr, then right-clicked the image and clicked "Open in New Tab". Then I copy/pasted that url within the parentheses. I swear, it sounds way more complicated than it is!! That being said, if you'd like new icons to match if you change hex codes, please feel free to ask and I'll provide new icons :)

Update: Skin has been updated so that the broken buttons match the rest of the skin again! Tysm for your patience <3 Also, if anything ever breaks, please feel free to leave a comment or shoot me an ask on Tumblr and I will do my best to respond/provide a fix as soon as I am able too. Checking the comments is also a great way to troubleshoot if you're shy/worried about being annoying, (not that I think you are dw), bc there's a good chance I've helped someone out with the same issue before. Or, if I haven't, all the more reason to reach out!

CSS-

p.muted.notice {
  display: none;
}

#header ul.primary,
#footer,
.autocomplete .dropdown ul li:hover,
.autocomplete .dropdown li.selected,
a.tag:hover {
  background: #c32060;
}

input#site_search {
background-color: #e37aa3;
}

#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: #c32060;
}

#dashboard,
#dashboard.own,
.error,
.comment_error,
.kudos_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 input,
#header .search input {
  border-color: #c32060 !important;
}

#header .menu a,
#header .dropdown:hover .menu a {
  color: #111;
}

.notice {
  background-color: #e37aa3 !important;
  border: 1px solid #c32060 !important;
  color: #c32060 !important;
}

.notice a,
.notice a:visited,
.notice a:hover {
  color: #c32060 !important;
}

img.logo {
  padding: 10px 70px 0px 0px;
  background-size: 70px;
  background-repeat: no-repeat;
  width: 0px;
  height: 0px;
}

#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 {
  filter: hue-rotate(222deg);
  opacity: 10%;
}

button,
.actions a,
.actions a:link,
.action,
input[type="submit"],
.actions a:visited {
  color: #c32060;
  background-color: #e37aa3;
}

.actions a,
.actions a:link,
.action,
.action:link,
button,
.current,
.actions label {
  border: none;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
}

.actions input,
input[type="submit"],
textarea {
  border: 1px solid;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
}

input {
  width: 96%;
  border: 1px solid;
  background-image: none;
  box-shadow: none;
}

.actions input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
}

form.search input[type="text"] {
  border-top-color: initial;
}

.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,
.actions 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,
.actions a:active,
#outer .current,
#header .current,
a.current,
.current a:visited,
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;
}

#header .primary,
.group.listbox,
fieldset fieldset.listbox,
#main li.blurb,
.wrapper,
#dashboard .secondary,
.secondary,
form blockquote.userstuff,
.thread .comment,
.toggled form,
#header .primary,
.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,
form blockquote.userstuff,
.delete a,
span.delete,
#header ul.primary {
  box-shadow: none;
}

.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,
.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 {
  border: none;
  box-shadow: none;
}

.listbox .index,
.dashboard .listbox .index,
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: none;
  border-bottom: none;
  background-image: none;
  box-shadow: none;
}

#header .menu,
#small_login,
#header .dropdown:hover .current+.menu {
  box-shadow: none;
  background-image: none;
  filter: none;
}

.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
input[type=submit],
button,
.current,
.actions label {
  background: #e37aa3;
}

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

#header h1 sup {
  display: none;
}

textarea:focus,
textarea,
select,
select:focus,
.autocomplete input,
input,
input:focus,
.autocomplete div.dropdown ul {
  border: 1px solid #8f1746;
  background: #36353a;
  color: #f3f3f3;
  box-shadow: none;
}

.thread .even {
  background: #36353a;
}

span.symbol {
  background: #c32060;
  border: 2px solid #c32060;
  color: #e37aa3;
}

.actions a,
.actions a:link,
.action,
.action:link,
.actions button,
.actions input,
input[type="submit"],
button,
.current,
.actions label {
background: #e37aa3;
color: #c32060;
border: none;
box-shadow: none;
}

.actions a:hover,
.actions button:hover,
.actions input:hover,
.actions a:focus,
.actions button:focus,
.actions input:focus,
label.action:hover,
.action:hover,
.action:focus {
background: #e37aa3;
color: #c32060;
border: none;
box-shadow: none;
}

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/4985954c248a08f00353f62749cc5172/73e4494b1f9c096b-f9/s75x75_c1/1ac36971e560dd34d11f255716891497d30e6490.png);
}

dl.stats dd:nth-of-type(2)::before {
  background: url(https://64.media.tumblr.com/69c1afc8348abaa049f0db57eb766dd6/73e4494b1f9c096b-23/s75x75_c1/ddbf8a8a8a007c73e6cc9b4d40996ee032429706.png);
}

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

dl.stats dd.kudos::before {
  background: url(https://64.media.tumblr.com/093f64d1435901fa5d651f415cbce19f/73e4494b1f9c096b-fd/s75x75_c1/46bd590a3e44f53153f65ff01cc2e3bf51e17185.png);
}

dl.stats dd.words::before {
  background: url(https://64.media.tumblr.com/4985954c248a08f00353f62749cc5172/73e4494b1f9c096b-f9/s75x75_c1/1ac36971e560dd34d11f255716891497d30e6490.png);
}

dl.stats dd.chapters::before {
  background: url(https://64.media.tumblr.com/8b45dea22468b4589da5e42c7f8500cf/73e4494b1f9c096b-c0/s75x75_c1/20c7ee96f8a5ada3c8abe6169cafd5087cfe92d1.png);
}

dl.stats dd.comments::before {
  background: url(https://64.media.tumblr.com/58bb42b406bedb6b8b71040d1feed5cb/73e4494b1f9c096b-67/s75x75_c1/b1d9fdcb59701bcbe800be461b79ec3156e6e870.png);
}

dl.stats dd.bookmarks::before,
dl.stats dd a[href$=bookmarks]::before {
  background: url(https://64.media.tumblr.com/4c60949ddd1ad2a04693cf78b1994022/73e4494b1f9c096b-48/s75x75_c1/266e134655416fae845cdcb263ad015183f4b022.png);
}

dl.stats dd.hits::before {
  background: url(https://64.media.tumblr.com/1ae133ba83c8b7939a321f7608e97842/73e4494b1f9c096b-34/s75x75_c1/b6eaecd983734327428cb81364b33446d50af1d0.png);
}

dl.stats dd.collections::before {
  background: url(https://64.media.tumblr.com/668a0a485dfe27345b94a6f93762881d/73e4494b1f9c096b-78/s75x75_c1/b1e0a6320239a9f9b426e41ab73cbe488181a2d8.png);
}

dl.work dl.stats dd.published::before {
  background: url(https://64.media.tumblr.com/9895742144a55b98517d0e0ff76c670e/73e4494b1f9c096b-7b/s75x75_c1/45ec9896646ef9bef90cb72ac117d4df6cf44aa1.png);
}

dl.work dl.stats dd.status::before {
  background: url(https://64.media.tumblr.com/b6adf17261e53f356237765fd0629b8d/73e4494b1f9c096b-14/s75x75_c1/6cfe2c95123c3ba07eb7b9ffd1598c5462a3454e.png);
}

ul.statistics dl.stats dd.subscriptions::before {
  background: url(https://64.media.tumblr.com/6c2563f2f37f3e14fbc5175db45bdce2/73e4494b1f9c096b-b4/s75x75_c1/f400fcd981974a65915b963ea81fbccb6f32f420.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/668a0a485dfe27345b94a6f93762881d/73e4494b1f9c096b-78/s75x75_c1/b1e0a6320239a9f9b426e41ab73cbe488181a2d8.png);
}

li.collection dl.stats dd a[href$=works]::before {
  background: url(https://64.media.tumblr.com/69c1afc8348abaa049f0db57eb766dd6/73e4494b1f9c096b-23/s75x75_c1/ddbf8a8a8a007c73e6cc9b4d40996ee032429706.png);
}

li.collection dl.stats dd a[href$=bookmarks]::before {
  background: url(https://64.media.tumblr.com/4c60949ddd1ad2a04693cf78b1994022/73e4494b1f9c096b-48/s75x75_c1/266e134655416fae845cdcb263ad015183f4b022.png);
}

li.collection dl.stats dd a[href$=fandoms]::before {
  background: url(https://64.media.tumblr.com/1bbbec2223af0f62b3bebe87db84ab00/73e4494b1f9c096b-d8/s75x75_c1/48d3e0d20e318e0a4f2bac071bae4c770601dfcb.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,
.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;
}

 

Notes:

code credits:
- removes the "you've muted users" notif: ao3commentoftheday on tumblr
- replaces stat labels like "Hits" with icons: ao3skins on tumblr/electricalice on ao3 (specifically from their Tide site skin)
- makes buttons flat: ao3skins on tumblr

Series this work belongs to: