[sticky entry] Sticky: Welcome

Aug. 23rd, 2010 08:26 am
cesy: "Cesy" - An old-fashioned quill and ink (Default)
[personal profile] cesy
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.)
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.
meicdon13: (Default)
[personal profile] meicdon13
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:


May. 8th, 2016 03:32 am
jenrose: (Default)
[personal profile] jenrose
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?
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
meicdon13: (Default)
[personal profile] meicdon13
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!
seabroth: (Default)
[personal profile] seabroth
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:

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!

AO3 bad default layout

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.

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! :)
[personal profile] cottonballzofdeath
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,

smallbrownfrog: (Snape sunset arch)
[personal profile] 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: (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... )

Tag links

Feb. 20th, 2013 05:02 pm
cesy: "Cesy" - An old-fashioned quill and ink (Default)
[personal profile] cesy
[livejournal.com profile] 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: four equal blocks of purple and orange shades with a rusty orange block centred on top (Default)
[personal profile] 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: Jonny Lee Miller with his finger in his mouth. (jl is pondering what you are pondering)
[personal profile] 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: 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.
facetofcathy: four equal blocks of purple and orange shades with a rusty orange block centred on top (Default)
[personal profile] facetofcathy
Just an FYI to all attempting to build skins that child selectors (>) are being converted to &gt; 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: text: great sleep-deprived novel ([misc] nanowrimo)
[personal profile] sarken
Once upon a time, [personal profile] 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: 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.
Page generated Apr. 29th, 2017 03:32 pm
Powered by Dreamwidth Studios