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.
jennyst: Jenny on a photo of space (Default)
[personal profile] jennyst
I've just thrown together a quick thing to collapse bookmarks a bit - it reduces a margin and hides the original summary:

Question

May. 23rd, 2011 04:18 am
vickyblueeyez: (Default)
[personal profile] 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: 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.
sarken: leaves of mint against a worn wall (Default)
[personal profile] 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?
cj: winter scene (winter of my discontent.)
[personal profile] cj
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!

!important

Sep. 26th, 2010 01:36 am
mashimero: my emoji (Default)
[personal profile] 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:

WIP preview

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:
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 )
twtd: (Default)
[personal profile] 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: ([profit] like a rom com except not)
[personal profile] 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)
mumblemutter: ([mm] getting schooled)
[personal profile] mumblemutter
I've been waiting forever for a fix that would make the navigation box wide enough to allow all list items to align properly (I've got my priorities straight, clearly) and this was the first thing I futzed with when the skins system went live. (Whee skins!)

In case it doesn't look the same to everyone else: for me the "My Dashboard" box was too narrow and items like "My Assignments (2)" or "My Related Works (2)" would break off into two lines, which looked messy to me. The following code fixes this:

#dashboard ul { width: 12.5em; } /* default: 10.5em */
#main.sidebar { margin: 1em auto 1em 14em; } /* default: 12em */


You can fiddle with the values until things look right to you. Assuming you care. :-D

(Psst, mod, I'm not sure how to tag this?)

Clean Blue

Aug. 25th, 2010 01:06 pm
cesy: "Cesy" - An old-fashioned quill and ink (Default)
[personal profile] cesy
This one is designed to give an idea how much you can change the design, like CSS Zen Garden. I've changed the colours to a blue theme, changed the shape of the buttons and moved a few bits around.

Read more... )
cesy: "Cesy" - An old-fashioned quill and ink (Default)
[personal profile] cesy
This should give something a bit like [personal profile] rb's EasyRead layout for Dreamwidth, with larger fonts, the side navigation turned into top navigation, and the filters removed so that the works listings use the full width of the page.

Read more... )
enigel: Sheppard playing a video game (SGA Shep geeky)
[personal profile] enigel
I called this Big Greeting Everywhere. [personal profile] cesy has already created a "larger greeting" skin, but for some reason it isn't working for me.

I wanted the username and the links (Post New and Import in particular) to be bigger - the former because that's the only link to the user dashboard on the home page, the latter because I would often miss my target and click elsewhere when trying to click Post New.

#greeting .login { font-size: 2em;}
#login a { font-size: 1.2em;}

You can play with the values until the greeting fits your requirements.
cesy: "Cesy" - An old-fashioned quill and ink (Default)
[personal profile] cesy
To use these, just paste the relevant code below into the "Custom CSS" box. I've tested them all in Firefox 3.6, but not in any other browsers - please let me know if they don't work for you.

Several different designs )

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.)
Page generated Jun. 24th, 2017 08:47 am
Powered by Dreamwidth Studios