elrhiarhodan: (Default)
elrhiarhodan ([personal profile] elrhiarhodan) wrote in [community profile] ao3_skins2017-08-06 12:43 pm
Entry tags:

Block indent

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?
poulpette: cropped picture of an illustrated octopus (Default)

[personal profile] poulpette 2017-08-06 05:46 pm (UTC)(link)
Hi,

What, exactly, do you want to indent? Is it the work itself, the first line of each paragraph or only some of those?
poulpette: (LOST - Desmond - Carribean Love)

[personal profile] poulpette 2017-08-07 05:41 am (UTC)(link)
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 2017-08-07 05:44 (UTC)
fuck_yeah: Cartoon octopus pushing buttons and pulling levels on panel (Default)

[personal profile] fuck_yeah 2017-09-17 09:06 pm (UTC)(link)
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.
fuck_yeah: Cartoon octopus pushing buttons and pulling levels on panel (Default)

[personal profile] fuck_yeah 2017-09-20 04:39 pm (UTC)(link)
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. :)