fancy html cheat sheet or assistance or something?

[twisted_miracle]

So, I am writing a fic, and in this fic, there will be two sections that I am hoping to format in a very fancy way indeed. I am almost certain I have seen others do this in fic, but not often!

I want to post a section of the fic formatted to look like a printed memo with a handwritten note on the corner in dark ink. The problem is that I do not know how! I looked around the net and found some instructions for how to do a "style sheet." Is that what I am talking about? I would love some help! Web links to good tutorials other people have already written are cool, as long as I am reading the right ones (lol, sigh) and they are clear enough for a relative newbie.

Help would be most appreciated!

Comments

[snowgall]

This sounds really cool, but one thing to keep in mind is where you plan to post. AO3 (as far as I know) allows only *limited* HTML in fics posted there. So something super fancy may or may not work on that platform.

There was a fic posted for the hd-eighthyear fest which used some fancy coding and it *did* work on AO3. Not exactly what you are describing, but take a look:

Dear Diary by awickedmemory

I'm tagging her, so hopefully she might pop in and give you some pointers :) If not, maybe try PM-ing her. It's my best suggestion ♥

[twistedm.livejournal.com]

Thanks, snowgall! I'm so behind, I didn't even know we could tag people on livejournal now. Sheesh. I am wanting to post it on AO3, so that's a good point. I think I saw stuff about "style sheets" in their help section, though. Hopefully awickedmemory will see this and have some pointers for me. :)

[snowgall]

Well I hope the tagging works!

In my experience it's a little spotty - sometimes I get notices that I've been tagged in a post or comment but other times I'll see that someone has tagged me but I never get an official message about it. I think it may be down to individual settings and whether the post was edited and the position of the stars or something :) which is why I suggested PM-ing her if she doesn't see this.

[awickedmemory.livejournal.com]

*BLAZES IN* HELLO-HELLO :D. snowgall's ping worked! ♥

So there are two ways you could do this. Yu could make an image and post it in the fic, which I think might actually work best for your needs because you want two different types of text there (one for the printed memo, and one with the note in the corner). That said, you can TOTALLY do this with a style sheet as well! It helps if you're a little familiar with CSS, but not essential. I assume by the way you put "style sheets" in quotes that you're in the less-familiar-with-it category? :) That's okay - a style sheet basically tells the computer how to visually display your text by rotating it, putting it in boxes, putting it in different colours, etc. Once you've got the basic code, a lot of the rest is just copy/paste and replacing the specific details. The problem is finding code that AO3 is happy with.

There is a specific Tumblr user who I consider my CSS goddess, and who I strongly recommend to anyone who wants to start using CSS in their AO3 fics: teekettle! If you Frankenstein this piece of code a bit (ignore the parts about background colour, basically), it'll show you how to do the rotated black text that would work for the memo on the corner. You would want to use this in conjunction with #workskin .wbox from this guide. I'm not actually sure if you can overlay the two pieces of code on top of each other, but I'm pretty sure you can?

Take a look at these two guides and see if it makes sense. :) If not, I'm happy to try and help, but I won't have time until this weekend at the very earliest - do you have a specific deadline, or are you pretty flexible on timelines?

[twistedm.livejournal.com]

thank you so much!
you are quite right that i am not familiar with these style sheet things!
i am not writing this to deadline, so i am flexible. i am happy to try to figure out the learning from those links. probably tomorrow.

whee!

[awickedmemory.livejournal.com]

You're very welcome! Let me know if you have any questions, and if you have a Tumblr, teekettle is very kind and helpful as well!

[twistedm.livejournal.com]

I have tried to copy teekettle's instructions and failed miserably. :(
I do not have a tumbler so I will have to find some other way to ask for help. Or maybe just try this again in the morning when I am less tired! Sigh.

[awickedmemory.livejournal.com]

I'm going to be frantic with finishing two fest submissions over the next two weeks and then I'll be out of the country starting Dec 8th, but I'll try to take a look at the code before I leave! Keep me in the loop as you try out teekettle's suggestions! My username is my gmail as well if you need to get a hold of me that way - LJ notifications can get a bit buried. :)

[awickedmemory.livejournal.com]

Is this something like what you want?



That's what I was able to put together using teekettle's code (minus the green text, which is just a reminder to myself or anyone who might look at my scrapbook, lol). The only downside is that I cannot for the life of me figure out how to get rid of the enormous space between the handwritten note and the start of the rest of the text (in this case, "I am a memo header").

[twistedm.livejournal.com]

That is almost exactly what I was hoping against hope to create, yes! Yes, that's a lot of space at the top, and I was hoping it would be more parchment coloured, but otherwise, that looks really good. You used around 4 different fonts! I would want two, I guess. Maybe three?

I either did nothing to my fic at all when I added teekettle's html, or I put a box around the whole thing, every chapter. I honestly couldn't tell if I was seeing something specal or not when I looked at the AO3 preview. Either way, of course, I don't want the whole thing to look like a memo, just one chapter.

[awickedmemory.livejournal.com]

The parchment colour is no problem - it's just a matter of changing one item in the code to be the colour you would like. :) I don't know how to decrease the gap between the two fields, unfortunately, as there's nothing in the text or code that should be making the gap.

It's actually just two different fonts! The handwriting is in Comic Sans just because that was the default font from teekettle's code, so I didn't change it. :P The body and header are both Courier, which is also teekettle's default font - I just changed the size of the header. And the green text was me adding it into the screenshot just as a note about what the image is. ;) It's not part of the code.

So I simplified teekettle's code down to just two chunks: one for the white box with Courier memo font, and the other for the handwritten bit:

#workskin .wbox {
  background-color: #ffffff;
  border-color: #000000;
  border-width: 2px;
  border-style: solid;
  margin-left: 0px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
  padding-left: 5px;
  font-family: "Courier New", Courier;
  text-align: center;
  font-size: medium;
  display: table;
  color: #000000;
}

#workskin .handnote {
  display: block;
  color: #000000;
  text-decoration: none;
  font-family: "Comic Sans MS", "Chalkboard SE", sans-serif;
  height: 9em;
  width: 9em;
  padding: 1em;
  text-align: right;
  margin-left: auto;
  margin-right: 5px;
  margin-bottom: auto;
  -webkit-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  transform: rotate(6deg);
}

Then, for the segment of text you want looking like that, you'd upload your chapter text as:

Normal fic text here lalala! I am not in a memo!
<div class="wbox">
<p class="handnote">Handwritten note here</p>
<h2 align="center">I am a memo header</h2>
<p>I am a memo body. I may be a pretty long block of text. I will set the width of the entire white box that this message is contained in.</p></div>
Normal fic text here lalala! I am not in a memo!

A BREAKDOWN:

• p = paragraph, i.e. a regular line of text
  
• div = a block, to tell the code "Hey, there's going to be a whole chunk of stuff modified here, not just one line"
  
• class = tells the code which part of the style sheet it's going to be drawing code from

<div class="wbox"> tells the browser, "Everything starting from <div> and ending in </div> is going to use the code from .wbox"
<p class="handnote"> tells the browser, "Make the one line in between <p> and </p>use the code from .handnote"
<h2> tells the browser, "Make this text Header size 2" (you can also do h1 or h3 instead; I just picked h2 at random)

This way, everything before <div class="wbox"> and after </div> is just going to be in regular text.

From here, it's just replacing the specific style sheet elements that you want to fiddle around with, like fonts or background colours or border colours. :)

[twistedm.livejournal.com]

These are not complicated instructions, but I apparently cannot follow them. I have done what the web pages say, and the instructions are very simple! "Cut and paste" should not be beyond my abilities! But I have this:
http://archiveofourown.org/works/5280080