samjohnsson: It's just another mask (Default)
[personal profile] samjohnsson
One of the Support requests we've had a couple times recently is true r-t-l support for languages such as Hebrew and Arabic. While we're looking for easier ways to do it, we've currently got a workaround that you can use on any text-based work you post.

To make yourself a workskin:
1) Log in.
2) Go here: (you can reach that link by going to your Home, then clicking Skins, then the ‘New Skin’ button).
3) Change the Type to ‘Work Skin’ (this step is very important).
4) Write in a title you will recognize and a description.
5) Copy and paste the following into the CSS box:

#workskin #chapters .userstuff .rtl {
font-family: "Guttman David", Arial;
unicode-bidi: embed;
direction: rtl;

Then make sure you select the skin when posting a work in a rtl language, in the ‘Custom Stylesheet’ dropdown, and use
<div class="rtl">TEXT</div>
around your text (you can change “rtl” to anything, as long as you change it in both places: your skin and your text).

The skin should:
* set the directionality for the document to RTL
* replace the font with Guttman David, and fall back to Arial if the reader doesn't have GD. (Chosen for the example as it's one of the more consistent Hebrew fonts, according to our respondents.) Watch out that you don't get "smart" quotes around the font names.

If you have any questions, leave them here or give us a shout at the Support page!
sarken: woman at a desk, partially obscured by smoke ([misc] recklessly the pages are filled)
[personal profile] sarken
A couple weeks ago, I was playing around with skins and came up with a way to truncate the text of longer freeform tags. Basically, stick this CSS in a site skin and it'll turn "This is my very very very very long freeform tag" into "This is my very very very ver..."

You can change max-width: 15em to a smaller number if your personal definition of long is different. This only applies to freeform tags in the blurbs, so there's no need to worry about long character names or relationships getting cut off, and you can still see the full tag on the work itself. If you want to truncate it there as well, change .blurb ul.tags li.freeforms to .blurb ul.tags li.freeforms, .meta dd.freeform li

ETA: Updated to work in Chrome in addition to Opera, Firefox, and Safari.
ninetydegrees: Drawing: chibi version of me (chibi)
[personal profile] ninetydegrees
All my previous styles have been updated to work with the new skin so check for updates if you have them installed.
I've also made a few more for little things which didn't work for me:

-- Offwhite Background: I don't know if it used to be the default background or the one of the skin I used but this is what I had and my eyes missed it.

-- Redesign Boxes: the inset thing really doesn't work for me so this will make the boxes look like they did before (popping out instead of sunken), with sharper and darker borders to better separate elements.

-- Redesign Header: the right side of the header (icon, 'post new' and 'log out') looks weird for me so this swaps things around: the two buttons go up with the other buttons in the bar and look like them (same style, same font size), the icon goes below the bar and is shrunk to 75%.

Edit: comments here and there have made me edit this style to make it a little smarter. It gives you additional choices now such as the possibility to hide your personal icon entirely and/or the AO3 logo, and to move content up a bit to make up for the lost space.

If you notice any issue, please let me know.

I won't bring any of my styles over on AO3 because I don't think the interface is easy to use but, if it works better for you, don't hesitate to install these using AO3's interface. Just copy/paste the code, I guess.
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)
[personal profile] ninetydegrees
Sorry to post again so soon! I've just made another Stylish style which turns the rating, warnings, category and status icons back into text. If words make more sense to you than visuals you may find it useful. If you're interested, the style is here. As always, feedback and suggestions are welcome.
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)
[personal profile] ninetydegrees
I've made a simple style to make reading works on AO3 even easier than it already is (in my opinion, of course). You can choose the font type and size, the leading (vertical space between lines) the text alignment and the size of the side margins. I debated over adding text and background colors too but I feel these fit better with a full site skin. My style only applies to work text.

If you're interested, you can find it here. Feedback and suggestions are welcome!

Note: Stylish is a Mozilla Firefox extension but it can also work with other browsers.
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)
[personal profile] ninetydegrees
I've got one invite if you or somebody you know needs one. You can PM me if you don't want to give email addresses in comments.

I've made two little Stylish styles you may find useful:
-- one to switch all font faces to sans-serif (this won't assign a specific font, just switch to your browser's default sans-serif one). It's here.
-- and another one to restore the background color for relationships the archive used to have. I use it to make it easier to spot het/slash fics as opposed to gen/friendship fics, and the listed pairing(s) of the fic. It's here.

Note: Stylish is a Mozilla Firefox extension but it can also work with Google Chrome. Installation instructions are here.

(Dear admins, I didn't know what tag system you wanted to use so I've left tagging to you. :)

June 2017



RSS Atom

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Oct. 21st, 2017 05:46 pm
Powered by Dreamwidth Studios