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

Halp...

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,

Cottonballz
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.
Page generated Oct. 23rd, 2017 10:12 pm
Powered by Dreamwidth Studios