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?
fuck_yeah: An icon of a person cut in half by an octopus, words read "DO NOT TAUNT THE OCTOPUS" (vengeful)
[personal profile] fuck_yeah
This is a tutorial/live example on how to mimic the look of letters, fliers, and stationery (as well as other forms of written media) without using images. For all your epistolary fic needs.

On AO3

fuck_yeah: Cartoon octopus pushing buttons and pulling levels on panel (Default)
[personal profile] fuck_yeah
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
fuck_yeah: Cartoon octopus pushing buttons and pulling levels on panel (Default)
[personal profile] fuck_yeah
I had a request to create a work skin to mimic an email screenshot, so I've created a simple live example/tutorial here.
tropicsbear: Tadashi carrying Ainosuke bridal style (Default)
[personal profile] tropicsbear
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:

fuck_yeah: Purple sprite octopus with heart (loving)
[personal profile] fuck_yeah
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
fuck_yeah: Pink octopus squirming (squirm)
[personal profile] fuck_yeah
Fulfilling another request, this time to mimic lined notebook paper. You can see a live example of this skin here and the tutorial for it is here.
fuck_yeah: CGI octopus banging away at a keyboard (frustrated)
[personal profile] fuck_yeah
So, this community seems pretty deserted, but I'm still sharing skins anyway in case anyone happens to stumble upon them. I received a request for a skin that mimicked a newspaper article. You can see a live example of what I created here and the tutorial for it is here.
fuck_yeah: Cartoon octopus pushing buttons and pulling levels on panel (Default)
[personal profile] fuck_yeah
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! :)
milkfatzero: (Default)
[personal profile] milkfatzero
A modern, 'flat' skin. Maybe someone other than me will find it useful *g*

Things of note: The category and warning icons on the blurbs have been replaced with colour-coded bits of text. The works font is set to a very large 20px.

Updated 2015-05-25.


Previews and code:

Read more... )
sarken: anderson cooper in oscar the grouch's trash can ([pundits] ac for gnn)
[personal profile] sarken
This is a simple add-on skin that recreates my previous skin for the archive's updated skin system. It was made rather quickly and thus doesn't contain the detailed comments that gave the original its name. It uses the show all of a user's fandoms tweak, inspired by [personal profile] mumblemutter.

On my Mac, it works equally well in Firefox 8 and Safari 5 (and thus likely works on Chrome as well). A few tweaks will get it looking good in Opera 11. If you follow the directions and use the handheld sheet, it's also ready for the mobile version of Safari, and possibly other mobile browsers.

Preview images of the dashboard and work views are under the cut, and you can click them for the full-sized versions.

Code and preview images for Describe 2.0. )

Feel free to modify this skin however you like. If you do something cool with it, even just another color scheme, I'd love to see it. I will endeavor to keep this updated as changes are made to the archive. If you notice something broken, just holler. (The child selectors on h3.heading links are broken, but should work fine once the parser is fixed.)

Updated 28 March 2012: Overrode link hover color in footer, made user name link in header visible, added background color to indexes on edit multiple works page.

Updated 8 February 2016: Updated to make the main navigation more closely resemble the image, and to fix some default colors that were showing through.

Updated 26 March 2016: Updated to restore the link styling in some places.
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 )
samjohnsson: It's just another mask (Default)
[personal profile] samjohnsson
Cesy poked me to share this over here, so here it is!

One of the formats of writing that's seeing more publication on the Archive is that of script writing. Unfortunately, if you're not that code-savvy, formatting it will rely on a lot of nbsp; entries (which make kittens cry salty tears of misery) and manual line breaks (puppies wail in anguish). Fear not! For I have heard your suffering, and lo have I written some code for you to use as a Work Skin.

Most measurements are in percentages to scale properly, for screen width and for font size (it will break at much larger font sizes). I have used the font-variant: small-caps; property to mimic the upcase format style calls for (CSS3 does not yet have a font-variant: all-caps;.)

These are all designed to be used with the <p> tag and would look like:
<p class="dialogue">words</p>

The charnameinline style is designed to be used with <span> tags (<span class="charnameinline">name</span>) and is designed for character first reference.

On to the code!


This code will work with any site that allows for CSS. If you want to use it on your personal site, strip out every instance of #workskin (and drop me a line to ask how to attach it to your site code). If you're using it on Tumblr or FF.N...well, I have no idea. I will play with making it work on DW, though don't hold your breath, since DW does weird things to HTML.
sarken: pink leaves ([misc] all that summer)
[personal profile] sarken
I used [personal profile] mumblemutter's show-all-of-a-user's-fandoms code in this skin. It's been tested in Firefox 4, Safari 5, and Safari Mobile.

Preview image and code under here. )

Feel free to modify this skin however you like. If you do something cool with it, even just another color scheme, I'd love to see it.

UPDATED MAY 22: Tweaked admin posts and styled the reply window that appears in the inbox.
enigel: Sheppard playing a video game (SGA Shep geeky)
[personal profile] enigel
I've been working on this since skins were in development - it proved pretty handy for testing, incidentally *g* - and getting to know various parts of the Archive CSS needed to change what I wanted.

I wanted to green-tint the Archive, and get rid of the greys in some areas, while keeping it pleasant and not strident. A dash of intense yellow here and there enlivens the look, hence the name.

I thought it might be useful for others, so while it's not quite ready for public sharing on AO3, I'm sharing it here. Feel free to improve, derive, inspire yourself and so on. It would be lovely if you shared the results with the community, so we can all have more pretty. :)

previews - 2 images )

(The greeting block is bigger because I combined it with my accessibility skin Big Greeting Everywhere - the last block of CSS.)

here be the code )
Page generated Jun. 28th, 2025 08:37 am
Powered by Dreamwidth Studios