elrhiarhodan: (Default)
[personal profile] elrhiarhodan posting in [community profile] ao3_skins
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?

Date: 2017-08-06 05:46 pm (UTC)
poulpette: cropped picture of an illustrated octopus (Default)
From: [personal profile] poulpette

What, exactly, do you want to indent? Is it the work itself, the first line of each paragraph or only some of those?

Date: 2017-08-07 05:41 am (UTC)
poulpette: (LOST - Desmond - Carribean Love)
From: [personal profile] poulpette
OK. I see what you you want now.

Well blockquote isn't supposed to be used for the sole purpose of indenting text, but rather quoting blocks of it. So in that you're not wrong in that they're not equivalent to a div tag.

From what I can see on their tutorial, AO3 does allow div tags, just maybe not styling them directly. Which is what you were doing using the style attribute in the tag.

Rather you should use classes to style your flashback div. Here's an exemple:

<div class="flashback">Replace this text with your flashback.</div>

You'll need to create a worksin, into wihich you'll define the style associated with the .flashback class like so:

.flashback {
    margin-left: 40px;

Once that's saved and done, you can pick that work skin for your work and you'll be in business :)
Edited Date: 2017-08-07 05:44 am (UTC)

Date: 2017-09-17 09:06 pm (UTC)
fuck_yeah: Cartoon octopus pushing buttons and pulling levels on panel (Default)
From: [personal profile] fuck_yeah
Another option with still using the blockquote option is to add the following to a workskin:
#workskin blockquote {
border-left: none;

And that'll remove the border, but it'll affect all your blockquotes.

Date: 2017-09-20 04:39 pm (UTC)
fuck_yeah: Cartoon octopus pushing buttons and pulling levels on panel (Default)
From: [personal profile] fuck_yeah
Oh that's easy! Just go here: http://archiveofourown.org/skins/new?skin_type=WorkSkin

And for Title put whatever you like, and in the CSS box just put the code I posted above and hit the "Submit" button. Then, when you go to the work in question that you want to have the indent, look for the spot that says "Select Work Skin" (Under "Choose a Language") and select the name of your new workskin from the dropdown menu. Then you can have your indents without the border. :)


ao3_skins: OTW logo with text "Emerging" (Default)
AO3 Skins

August 2017


Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Oct. 23rd, 2017 10:26 pm
Powered by Dreamwidth Studios