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:

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. 24th, 2017 08:52 am
Powered by Dreamwidth Studios