ao3_skins | Recent Entries

Hello all,

I'm writing a work skin for a story I'm going to post in AO3. For the most part, it seems to working fine, but one of the problems I'm having is that it puts items that are coded under a span html tag on separate lines. Everything looks fine when I'm publishing it in my browser, but when I preview the skin in AO3, everything with a span tag looks all wonky. Any suggestions on what I may be doing wrong and how I might be able to resolve this issue? I would really appreciate any input you might have to offer.

Thank you,

Cottonballz

smallbrownfrog

This is probably an incredibly basic question, but could somebody please help me understand how to make a Work Skin that will make all the dividing lines in a table visible again? I have a meta piece that I want to post, but it's completely unreadable and unusable once AO3's software has removed all the borders. I need clear lines between the different table cells so that people can easily scan a column or row.

Thank you.

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... )

cesy

deansfangirl asked me a question about underlining on tag links, as text-decoration wasn't working, and I thought I'd post the answer here for anyone else who was wondering. It looks like it's been done with border-bottom 1px dotted, so a.tag {border-bottom: none;} should do the trick.

facetofcathy

If you're using a custom skin of your own on the AO3, you may notice that the new statistics page (find it via your sidebar on your user page) has some grey backgrounds that may not work for you.

This colour is styled via the sandbox stylesheet which loads after your custom styles.

To change the grey you need to do this in your skin:

.statistics .even {
  background: YOURCOLOR !important;
  }

If you want to dig deeper into styling that page, be aware that there is also some padding styled in the sandbox as well that will need an !important to override it.

lannamichaels

Hi, all. I like the way that Archive 1.0 styles works and the box that contains tags and metadata information. I would like to isolate those parts of it so that I can layer it on top of another skin, or just use those settings for how a work looks and not have the rest of the Archive 1.0.

I tried to copy and paste css from the source code, but that didn't help.

If anyone could help me get the CSS settings to style works like Archive 1.0, that would be so helpful. Metadata, too, but Archive 1.0 somehow lost the commas between tags and so if you could also help get those back, that would be so awesome. :)

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

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.

facetofcathy

Just an FYI to all attempting to build skins that child selectors (>) are being converted to > by the parser. One would presume the < symbol is affected too.

It does this silently, so watch out, if you've tried to use one, it's not going to work.

Submitted to support just a few hours ago, so no idea on a timeframe for a fix.

Also, if you're interested in the ramblings of a near newb tackling the archive skin the hard way, feel free to read.

Also, also, if you think having the code for Archive 2.0 all in one document would be handy, I published my Google Docs version for anyone to use. I find it really handy to Ctrl + F to find out where various code is and what it does, even though I'm not using the default skin at all.

sarken

Once upon a time,

mumblemutter wrote a really awesome tweak to show all the fandoms on a user's profile page. But, alas, it was no longer working quite right. And since it is one of my can't-live-without modifications, I made a version for the new archive skin.

( Code under here. )

If it doesn't work in your browser, give me a holler and I'll see what I can do to help.

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

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 tag and would look like:
words

The charnameinline style is designed to be used with tags (name) 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.

jennyst

I've just thrown together a quick thing to collapse bookmarks a bit - it reduces a margin and hides the original summary:

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

I used

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.

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?

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!

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:

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:

body {
  margin: 0;
  padding: 0;
  background: rgb(244,244,244);
  color: rgb(0,0,0);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1em;
  text-align: left;
}

a,
a:link,
a:visited {
  text-decoration: none !important;
  border: none !important;
}

#header,
#footer {
  background: rgb(244,244,244);
  color: rgb(0,0,0);
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Helvetica, Arial, sans-serif !important;
}

/* ----- HEADER ----- */
#login-block,
#login-block a,
#login-block a:link,
#login-block a:visited,
#login-block p.greeting {
  color: rgb(136,136,136) !important;
  font-weight: bold;
}

#header .clear {
  background-color: transparent;
  background-image: none;
  border-top: 1px solid rgb(238,238,238);
}

#header h1,
#header h1 a {
  color: rgb(230,16,16) !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-weight: bold;
  text-decoration: none !important;
}

#header .navigation li a {
  border: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: rgb(136,136,136) !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-weight: bold;
}

#header .navigation li a:hover {
  background-color: rgb(250,250,250) !important;
}

#header .navigation .current {
  border: none !important;
  background: transparent !important;
  color: rgb(0,0,0) !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-weight: bold !important;
}

/* ----- DASHBOARD ----- */
#dashboard ul {
  border: none;
  background: rgb(244,244,244);
  color: rgb(136,136,136);
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 0.9em;
  font-weight: bold;
}

#dashboard ul li a {
  color: rgb(136,136,136);
  padding: 0.3em 0;
}

#dashboard ul li a:hover {
  color: rgb(136,136,136) !important;
  background: rgb(250,250,250) !important;
}

#dashboard .current {
  padding-left: 0;
  color: rgb(0,0,0) !important;
  background: transparent !important;
}

#dashboard .current:hover {
  color: rgb(0,0,0) !important;
  background: rgb(244,244,244) !important;
}

/* ----- MAIN ----- */
#main {
  border-top: 1px solid rgb(238,238,238);
  border-left: 1px solid rgb(238,238,238);
  background: rgb(248,248,248);
}

#main h3 {
  border-top: 1px solid rgb(238,238,238);
  border-bottom: none;
  padding-top: 0.4em;
  background: transparent;
  color: rgb(230,16,16);
}

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 )

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.

mumblemutter

This will hopefully become obsolete once tag clouds are introduced as an option (I've already made puppy eyes at support), but until then the following code will display all of a user's fandoms as a block of text, without having to click the "Expand full list" link.

( Read more... )

Note: This isn't terribly semantic, of course, since it forces elements to be displayed that should be hidden according to their class names. But hey, makeshift. Suggestions for improvements are definitely welcome.

(ETA: screenshot)

Profile

AO3 Skins

AO3

December 2024

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Syndicate

Page Summary

Style Credit

Style: Neutral Good for Practicality by timeasmymeasure

Expand Cut Tags

No cut tags

Page generated Jun. 16th, 2025 11:53 pm

AO3 Skins

Recent Entries

AO3 Work Skins

Making the table structure vsible

Flat Squares skin

Tag links

New stats page and custom skins (the grey came back, thought it was a gonner, but...)

Help with skins?

Skin: Describe v. 2.0

Child Selectors Being Eaten

Show All of User's Fandoms 2.0

Navigation buttons help

Work Skin: scripts

Collapsed bookmarks

Question

Skin: Describe

Bookmark notes border color

custom css for collections

!important

"Sunny Forest" skin

Header questions

Show all of a user's fandoms by default

Profile

December 2024

Syndicate

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags