question about making a site skin
Dec. 23rd, 2024 11:48 am![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.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;
}
no subject
Date: 2024-12-26 07:27 am (UTC)this official skin lets you change the "key colour" so just use the code from that, change the #900 to what you want and it should target everything that uses it. There's also this one that lets you change all the colours.
no subject
Date: 2024-12-26 06:03 pm (UTC)#dashboard.own {
border-top: 15px solid #0c8a7d;
border-bottom: 15px solid #0c8a7d;
}
Alternatively, if you want a quick and wide sweeping fix, you could always use the wizard (skin > edit > use wizard) go to the color section, and change the header color to the one you want. This shouldn't actually change the header color from the dark grey you have now. Which I assume is because custom CSS ranks higher than any changes via wizard.