This is an unofficial community for people to share skins and other nifty extras for the Archive of Our Own. Feel free to ask questions, too, if you can't find a skin that does what you want. If you need to contact a mod, comment to this post.
(Disclaimer: I'm a volunteer coder for the AO3, and helped create the skins feature, but this community is strictly unofficial.)
question about making a site skin
Dec. 23rd, 2024 11:48 am![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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;
}
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;
}
Highlighting Favorite Tags
Sep. 12th, 2024 03:12 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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
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
Adjustment to Mobile Issues
Jul. 19th, 2023 09:05 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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:
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.
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;
}
variable work margins
Feb. 27th, 2021 06:11 am![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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?
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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;
}
#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;
}
Color Change.
Jan. 3rd, 2020 08:13 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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.

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.
[Site Skin] Flat Buttons
Jun. 30th, 2018 05:00 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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:
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:
Block indent
Aug. 6th, 2017 12:43 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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?
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?
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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
Live Example/Tutorial
Work Skin Dump
May. 23rd, 2017 08:43 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
- 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)
- 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)
Work Skin: Email Windows
Sep. 6th, 2016 06:19 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
I had a request to create a work skin to mimic an email screenshot, so I've created a simple live example/tutorial here.
Making buttons flat and tweaking headers
May. 23rd, 2016 02:38 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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:
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:
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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?
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?
Work Skin Dump
May. 1st, 2016 08:21 am![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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
- 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
SMS workskin?
Feb. 10th, 2016 12:28 am![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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!
Any help would be much appreciated!
Help with buttons
Aug. 14th, 2015 06:40 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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:
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.



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!




![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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! :)
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! :)