mythity: (Default)
[personal profile] mythity
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;
}
[personal profile] ema_k
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:

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;
}
 
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.

elrhiarhodan: (Default)
[personal profile] elrhiarhodan
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?
tropicsbear: Tadashi carrying Ainosuke bridal style (Default)
[personal profile] tropicsbear
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!
musyc: Susan Ivanova from Babylon 5 drinking coffee (Coffee: Ivanova)
[personal profile] musyc
I am slowly, slowly, slowly poking at the new skins to create something that's workable for me, but I've run into a niggle that I can't seem to fix. It's probably something remarkably simple, but my eyes are starting to cross looking at code. :\

I want the search box and button to be on one line along with the rest of the navigation buttons in the header. I stripped out the logo, and now there's space to shift everything to the left, but it just ... won't shift.

screenshot )

Question

May. 23rd, 2011 04:18 am
vickyblueeyez: (Default)
[personal profile] vickyblueeyez
 I have a question about skins. I wanted to know if there was a way to add a footer to all of your work? For example, I'd like to put a disclaimer in there (I don't own this, don't make profit, blah blah) in the footer vs typing it out every time I submit work. I'd also like a side column where I could post links like 'hey check out this comm for this pairing.' Since I know nothing of css, I was trying to use some css generators that I found online. The problem is, they make the layout but I have no idea where to add where I want the text.
sarken: leaves of mint against a worn wall (Default)
[personal profile] sarken
Beneath the title, tags, and summary of your bookmarks is a grey box with a grey border that contains the bookmarker's notes. I've been able to change the background color of the box using .own, but I'm at a loss as to how to change the color of the box's border. Has anyone figured out how to do that?
cj: winter scene (winter of my discontent.)
[personal profile] cj
I've finally been creating a custom AO3 skin for myself in time for the vast amount of Yuletide reading I plan to do this year, and I've discovered that going to the actual Yuletide collection breaks my header pretty badly because the custom css for the Yuletide collection header overrides my own style. Does anyone know any way to compensate for or fix this?

ETA: Sorted! Thank you!

!important

Sep. 26th, 2010 01:36 am
mashimero: my emoji (Default)
[personal profile] mashimero
Hi, I have a question regarding the use of !important. I'm working on a skin based off of the Helvetireader theme by Hicksdesign, but it's quite a big overhaul of the AO3 default style. I've managed to get this so far:

WIP preview

The problem is that I've had to use !important after almost every property. I'm not that great with CSS - what I know is all self-taught from online tutorials and such, but I don't think using so many !important is a good thing. However, I haven't found another way to get the results I want.

So, in your experiences with AO3 skinning, do you use !important, and if so, how often?

ETA: Here's what I have so far:
twtd: (Default)
[personal profile] twtd
I've been poking around and mainly changing colors and fonts for things, but I've run into a couple of things that I haven't been able to figure out.

1. In the header, is there any way to change the font that "Archive of Our Own" displays in or is there a way to get rid of it throughout the entire site (whichever is easier)? And can the color it displays in be coded separately from the rest of the links in the header?

and

2. When you're on the fandom page, for example, "fandom" turns black. How would I go about changing that? I've figured out how to change all of the other colors in the header except for that one. Tangentially, I've figured out how to change the colors in the header on the home screen, except for the hover background color, which still turns red despite all of my attempts to change it. Any thoughts about how I would change that?

Thanks in advance for any help.

Profile

ao3_skins: OTW logo with text "Emerging" (Default)
AO3 Skins

December 2024

S M T W T F S
1234567
891011121314
15161718192021
22 232425262728
293031    

Syndicate

RSS Atom

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Jun. 27th, 2025 11:31 pm
Powered by Dreamwidth Studios