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

[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. :)