Chapter Text
Begin test.
Testing preformatting stuff like this. is within a "pre" (<pre></pre>) and does not need <br/> stuff in there to go down a line or to keep spacing more than one space:)
Also note that "pre" does NOT have to go within a set of <p></p> (it seems to get removed).
and then trying to test <a thing> here <and here> as well.
<p>and then trying to test <a thing> here <and here> as well.</p>
and then trying to test <a thing> here <and here> as well.
<pre>and then trying to test <a thing> here &60;and here> as well.</pre>
< OR < is a < (and #60 gets converted to lt)
> OR > is a > (and #62 gets converted to gt)
& is a &
Also note that <a href=""></a> and <img src=""></img> are also useful, as are <p align="center"></p> and <br/> and other style stuff.
<p align="center"> <a href="http://s1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/?action=view¤t=LJBanner.jpg"></a> <img src="http://i1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/LJBanner.jpg" border="0" alt="Photobucket" /></p>
does this:
See these pages for more info:
Tutorial: Styling Works -- http://archiveofourown.org/admin_posts/119
Sliding Doors -- http://archiveofourown.org/works/149319?style=disable
Tutorial: HTML Sanitizing and Parsing -- http://archiveofourown.org/admin_posts/92
HTML pre tag -- http://www.w3schools.com/tags/tag_pre.asp
HTML ASCII -- http://www.w3schools.com/tags/ref_ascii.asp
HTML Symbol -- http://www.w3schools.com/tags/ref_symbols.asp
Done with test.
Chapter 2
Summary:
Rewritten version of the "first chapter" of my brief notes on editing under AO3. Ignore this if you're subscribed to my fanfic.
Chapter Text
Begin test with a <hr />
:
That short line is absolutely pitiful, though, and AO3 doesn't seem to support "width" arguments for hr
at all. *frown*
Sooooooooo...
Long line via strikeout or delete.
The code:
<p> <strike>-----------------------------------------------------------------------------------------</strike> <del>-----------------------------------------------------------------------------------------</del> </p>
looks like:
-----------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------
...which is marginally better, at least.
We can center it, too:
<p align=center> <strike>-----------------------------------------------------------------------------------------</strike> <del>-----------------------------------------------------------------------------------------</del> </p>
looks like:
-----------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------
And to go full-width for the default AO3 template, we do:
<p align=center> <strike>-------------------------------------------------------------------------------------------------------------------------</strike> <del>-------------------------------------------------------------------------------------------------------------------------</del> </p>
which looks like:
-------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------
Long line via headings h3 and h6.
We can also cheat via some of the heading types (a.k.a. heading h3
and h6
).
The code:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
looks like:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Note that there is no h7
or h8
defined in AO3.
Take advantage of this via:
<h3> </h3> <h6> </h6>
which looks like:
Much cleaner, no? :)
Some table HTML that doesn't work on AO3 but would work elsewhere.
AO3 doesn't do background color in tables, but if it did, you could use the following html to get a thin black rectangular block across the entire screen:
<table style="width:100%" bgcolor=#000000> <tr> <td></td> </tr> </table>
You can try out this (or any other) html code here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table.
And now another three <hr />
's to separate things out! :)
Preformatting (pre) blocks and inline "code".
The code:
<p> <code> <pre>Testing preformatting stuff like this. is within a "pre" (<pre></pre>) and does not need <br/> stuff in there to go down a line or to keep spacing more than one space:)</pre> </code> </p>
looks like:
Testing preformatting
stuff like
this. is within a "pre" (<pre></pre>)
and does not need <br/> stuff in there to go down a line
or to keep spacing more than one space:)
The code:
<pre>Testing preformatting stuff like this. is within a "pre" (<pre></pre>) and does not need <br/> stuff in there to go down a line or to keep spacing more than one space:)</pre><p>Also note that <code>pre</code> does NOT have to go within a set of <p></p> like <code>code</code> does (it seems to get removed).</p>
looks like:
Testing preformatting stuff like this. is within a "pre" (<pre></pre>) and does not need <br/> stuff in there to go down a line or to keep spacing more than one space:)
Also note that pre
does NOT have to go within a set of <p></p> like code
does (it seems to get removed).
Testing < and >
You may be wondering by this point why, exactly, I'm using these "<" and ">" things. Well, they show those special characters < and > explicitly in the text (and they're "special" in that they're used to start and end html tags ...which means that trying to write them directly in your HTML when you want to show them as symbols in your text will cause formatting problems, no? :) --Here, explicitly, is an example of how you do it.
The code:
<p>and then trying to test <a thing> here <and here> as well.</p>
looks like:
and then trying to test <a thing> here <and here> as well.
The code:
<pre>and then trying to test <a thing> here &60;and here> as well.</pre>
looks like:
and then trying to test <a thing> here <and here> as well.
Characters to write in the HTML edit box for things to work correctly.
<
OR <
gives a < in-text (and the #60
part gets converted to lt
by AO3 once the document's HTML text has been saved).>
OR >
gives a > in-text (and the #62
part gets converted to gt
by AO3 once the document's HTML text has been saved).&
gives a & in-text (thus &lt;
gives a < in-text and &gt;
gives a > in-text).
Paragraphs, paragraph alignment, embedding an image, breaks
Also note that <a href=""></a> and <img src=""></img> are also useful, as are <p align="center"></p> and <br/> and other style stuff.
Embedding images (explicit example).
The code:
<p align="center"> <a href="http://s1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/?action=view¤t=LJBanner.jpg"></a> <img src="http://i1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/LJBanner.jpg" border="0" alt="Photobucket" /></p>
does this:
Reference links.
See these pages for more info:
Tutorial: Styling Works -- http://archiveofourown.org/admin_posts/119
Sliding Doors -- http://archiveofourown.org/works/149319?style=disable
Tutorial: HTML Sanitizing and Parsing -- http://archiveofourown.org/admin_posts/92
Technical Questions FAQ | What HTML can I use on the archive? -- http://archiveofourown.org/faq/technical-questions?language_id=en
Skins and Archive Interface FAQ -- http://archiveofourown.org/faq/skins-and-archive-interface?language_id=en
Show Skin | Archive 2.0 Skin (Default Skin) -- http://archiveofourown.org/skins/873
HTML pre tag -- http://www.w3schools.com/tags/tag_pre.asp
HTML ASCII -- http://www.w3schools.com/tags/ref_ascii.asp
HTML Symbol -- http://www.w3schools.com/tags/ref_symbols.asp
Done with test. Let's end with a final <hr />
...
Chapter 3
Summary:
More lunatic "editing under AO3" notes-stuff. Ignore this if you're subscribed to my fanfic.
Chapter Text
In the process of trying to figure out if there's a good way to do "spoiler" text (and/or hidden or hide-able text) without making a CSS stylesheet. Meh.
Roll over mouse with popup text boxes
The code:
<p> <a title="Here is the text, not a clickable link without an 'href' inside the 'a' tag...">Roll mouse over "link" for popup text</a> </p>
looks like:
Roll mouse over "link" for popup text
The code:
<p> Roll mouse over symbol for popup text<a class="help symbol question modal" title="Here is the text, which is clickable (oddly) but doesn't seem to navigate anywhere. Clicking again anywhere gets you out of the greyscreen."> <span class="symbol question"> <span>?</span></span></a> </p>
looks like:
Roll mouse over symbol for popup text ?
The code:
<p>Roll mouse over symbol for popup text as before:<br /> Spoiler alert<a class="symbol question" title="Here is the text, not a clickable link without an 'href' inside the 'a' tag..."> <span class="symbol exclamation"><span>!</span></span></a> </p>
looks like:
Roll mouse over symbol for popup text as before:
Spoiler alert
!
Both this code:
<p>Roll mouse over text -- not symbol(s) -- for popup text this time:</p> <p><span class="symbol exclamation"><span>!</span></span> <a title="Hmmmm, I bet you were pretty dissatisfied by that last so-called "spoiler"... So let's show you how a multi-line spoiler is done this time! Isn't this fun? ;)"><b>SPOILERS WITHIN!</b></a> <span class="symbol exclamation"><span>!</span></span> <-- Only mouse-over this text if you are dying to know what awaits you! </p>
and this code:
<p>Roll mouse over text -- not symbol(s) -- for popup text this time:</p> <p><span class="symbol exclamation"><span>!</span></span> <a title="Hmmmm, I bet you were pretty dissatisfied by that last so-called "spoiler"... So let's show you how a multi-line spoiler is done this time! Isn't this fun? ;)"><b>SPOILERS WITHIN!</b></a> <span class="symbol exclamation"><span>!</span></span> <-- Only mouse-over this text if you are dying to know what awaits you! </p>
looks like:
Roll mouse over text -- not symbol(s) -- for popup text this time:
! SPOILERS WITHIN! ! <-- Only mouse-over this text if you are dying to know what awaits you!
The code:
<p><span class="symbol exclamation"><span>!</span></span> <a title="Also note that the title does seem to do auto-wrap-around, when we have super-super-super-super-super-super-super-super long sentences going on, thank goodness. Here's another example. Or two. Or three. Of sentence stops. Or four! Or five? Or... six. seven. Eight. Notice how the text doesn't do a full-stop until the written line ends :) We can, however, force lines down more quickly if we want to, if and when we have run-on sentences! :)"><b>SPOILERS WITHIN!</b></a> <span class="symbol exclamation"><span>!</span></span> <-- Only mouse-over this text if you are dying to know what awaits you! </p>
looks like:
! SPOILERS WITHIN! ! <-- Only mouse-over this text if you are dying to know what awaits you!
Attempts to use default CSS options via <span class="">
The code:
<p> <span class="white"> <span>test text is not white, sigh</span></span> </p>
looks like:
test text is not white, sigh
The code:
<p> <span class="hidden"> <span>test text hidden</span></span> </p>
looks like:
test text hidden
From the Sliding Doors example, actual CSS changes to the #workskin:
The code:
/* SPECIAL CASES */ #workskin .spoiler { background: #333; color: #333; } <p> <span class="spoiler" title="This is a warning that is also a spoiler. Highlight to read.">You just totally spoiled yourself, dude.</span> </p>
looks like:
You just totally spoiled yourself, dude.
Pages Navigation
yukiscorpio on Chapter 1 Sat 26 Apr 2014 07:32PM UTC
Comment Actions
josephina_x on Chapter 1 Mon 26 Jan 2015 08:33AM UTC
Comment Actions
opensummer on Chapter 1 Wed 14 Mar 2018 07:28AM UTC
Comment Actions
josephina_x on Chapter 1 Wed 25 Nov 2020 04:02AM UTC
Comment Actions
owlettica on Chapter 1 Sun 03 Jan 2021 10:23PM UTC
Comment Actions
DarthKrande on Chapter 1 Sun 21 Feb 2021 06:11PM UTC
Comment Actions
RavenSilverwolf on Chapter 1 Sat 26 Jun 2021 07:02PM UTC
Last Edited Sat 26 Jun 2021 07:04PM UTC
Comment Actions
Test (Guest) on Chapter 1 Wed 23 Feb 2022 05:31PM UTC
Comment Actions
FireBatVillain on Chapter 1 Thu 11 Aug 2022 06:51AM UTC
Comment Actions
Pokypic on Chapter 1 Mon 03 Apr 2023 11:21PM UTC
Comment Actions
Pokypic on Chapter 1 Mon 03 Apr 2023 11:22PM UTC
Comment Actions
Pokypic on Chapter 1 Mon 03 Apr 2023 11:23PM UTC
Comment Actions
Test (Guest) on Chapter 1 Tue 16 Jan 2024 07:27AM UTC
Comment Actions
meowposter (Guest) on Chapter 1 Fri 16 Feb 2024 09:27PM UTC
Comment Actions
sailorkooks on Chapter 2 Fri 23 Sep 2016 12:52PM UTC
Comment Actions
josephina_x on Chapter 2 Wed 25 Nov 2020 04:04AM UTC
Comment Actions
BlueSeraphos on Chapter 2 Mon 13 Aug 2018 10:00AM UTC
Comment Actions
josephina_x on Chapter 2 Wed 25 Nov 2020 04:03AM UTC
Comment Actions
Umbrae Storm (Goldengirl01) on Chapter 2 Mon 21 Jun 2021 03:30AM UTC
Last Edited Mon 21 Jun 2021 03:32AM UTC
Comment Actions
Test (Guest) on Chapter 2 Tue 16 Jan 2024 07:41AM UTC
Comment Actions
CodenameCarrot on Chapter 3 Sat 10 Oct 2015 11:16AM UTC
Comment Actions
josephina_x on Chapter 3 Sat 07 Nov 2015 08:03AM UTC
Comment Actions
La_Temperanza on Chapter 3 Mon 25 Jan 2016 07:50PM UTC
Comment Actions
d_aia on Chapter 3 Tue 18 Oct 2016 08:12PM UTC
Comment Actions
josephina_x on Chapter 3 Wed 25 Nov 2020 04:03AM UTC
Comment Actions
d_aia on Chapter 3 Wed 25 Nov 2020 01:03PM UTC
Last Edited Wed 25 Nov 2020 01:05PM UTC
Comment Actions
WillowWispFlame on Chapter 3 Thu 09 Jul 2020 06:00PM UTC
Comment Actions
ScruffyDefiant on Chapter 3 Sun 16 Aug 2020 07:27PM UTC
Comment Actions
josephina_x on Chapter 3 Sun 16 Aug 2020 07:31PM UTC
Comment Actions
Netrixie on Chapter 3 Sat 29 Aug 2020 07:12PM UTC
Comment Actions
josephina_x on Chapter 3 Wed 25 Nov 2020 04:01AM UTC
Comment Actions
Pages Navigation