themegaloo | How To Use Simple HTML for Fandom LJ Things!

Basic HTML for LJ

Or click here to view without formatting

So, once upon a time posting on LJ was simple: you had to do it with HTML. Then came the days of Rich Text Editor and everything suddenly got a little bit more complicated. You CAN use the the richtext editor to type up awesome things and format as you go, but as many have tried and can attest, copy-pasting into it can make some pretty weird stuff happen. Here are a few tips on how to not let that happen.

• Basic formatting
When you're writing something big that you intend to post to LJ, you probably are writing it in some sort of word processing program that allows for italics, bold, etc. The desire is to then copy/paste this directly into the Post to LJ box and have all your formatting still work, right? Right. Well. It doesn't. If you paste into the HTML version of the window, all your formatting will be removed. If you paste into the Rich Text Editor (RTE), you will typically get your formatting plus a whole lot of extra stuff that makes things look weird. Many communities aren't particularly bothered by them, but some are. My primary fandom is Merlin, the main fic comm for which (

merlinxarthur) has some pretty strict rules due to the heavy amount of traffic it gets. I love this, I worship this, it makes everything (usually) look so nice and pretty on my flist and is ever so easy to navigate. I will someday post a few more fics and get my very own tag.

Point of the matter is, when I write something in MS Word, for instance, I write in all the html tags for my formatting as I go. This is born of a long time using LJ, and I'm pretty most people would consider that mildly neurotic. I then paste it directly into the HTML editor and it's good to go. Another option, if this is not your thing, is to utilize a program like Semagic. You can work in HTML, WYSIWYG (What You See Is What You Get) or Web. I'm actually not sure what the web bit is, don't use it much myself but it's a pretty handy program. You do have to download dictionaries for the spell check, but that means you can use whatever dictionary suits your writing style.

• Swapping between RTE and HTML
At the upper right-hand corner of the Post an Entry box, there are two tabs: Rich text and HTML. Clicking on these tabs allows you to swap between the two different editors available on the LJ Web posting.

Don't mind the fact that I can't draw proper circles to save my life.

• HTML, because that's what this is really all about, isn't it?
When working on LJ, there are really only a handful of HTML codes that you'll use regularly. Bold, italics, underline, etc are the most commonly used tags in any body of writing, and LJ is all about the writing! The simple way of doing these goes a bit like this:

Bold	<b>Bold</b>
Italic	<i>Italic</i>
Underline	<u>Underline</u>
~~Strikethrough~~	<s>Strikethrough</s>

HTML doesn't set out to be difficult. Anything contained between the < and > is considered to be part of the code. Whatever you havee input as a tag will remain in effect until you close that tag. As such, if you wanted to say "I hate this," but emphasize one word in italics, you would type "I hate this," opening and closing the tag around the word you want to change.

[These are some of the most basic codes, and are very easy to remember. If you're looking at the HTML created by the RTE, you might notice that it will occasionally use and . Many Rich Text editors use these tags a default rather than and because they function slightly differently for those people who use a screen reader. A text in italics is generally emphasized, bold tends to imply a stronger voice. As such, , visually, is the equivalent of and is the visual equivalent of . There are several other tags that can be used to make your writing more accessible for a screen reader user, but that's not my goal here.]

• The LJ Cut
Possibly the most vital and difficult to work out of the LJ specific tags. But really, once you get the hang of them they're very simple. The easiest way to go about this is not through the button in the RTE, but through HTML. The code for an LJ cut is <lj-cut>. You can change the text of the LJ cut by altering it to <lj-cut text="Your Text Here">. Remember to put the dash between lj and cut, otherwise it won't work. If you want to have some of your entry remaining outside the cut, you can close the cut tag just as you close the formatting tags. Example: <lj-cut text="Click me for more">MAJOR BODY OF TEXT</lj-cut> Thanks for reading! You can also have multiple cuts in one entry, but remember that once you click one cut, you'll be on the main entry page and the rest of the cuts will be defunct, including any specified text.

**If you are working in Rich Text and the LJ cut seems to hate you, here's a little tip: If you just hit the LJ cut button, it may or may not work. The way the FAQ tells you to do it is to SELECT (highlight with your cursor) everything that is going behind the cut, then click the button and change the text as desired in the pop-up box.

• Links
Links are one of the most vital tags on the web. Without links, nothing would be, well, linked. In a fandom sense, many people post fic, art, meta, etc in their personal journals and then "crosspost" to different communities, linking back to the original post in their journal. This can be done for a variety of reasons, most frequently to keep all feedback and comments in one location. It's a generally accepted practice, so long as your original post that you're linking back to is public.

So how's it done? There are a few different answers to that.

First of all, it's important to know the URL of the page you're linking to. For the purpose of this post, I'm going to assume you're linking to an entry in your journal. You can link directly back to your journal, but you'll find that as you post more things to your journal, the post you initially meant to link back to gets burried. Each LJ post has its own distinct page. If you've just posted, this is especially easy.

See the link that says "View Entry?" It's highlighted in yellow. This page pops up right after you've hit post. If you click the "View Entry" link, it will take you directly to that entry's unique URL. This entry, for example, is http://themegaloo.livejournal.com/298903.html. ; In a personal journal, this URL will always be http://journalname.livejournal.com/uniquenumber.html. In a community, it will be http://community.livejournal.com/communityname/uniquenumber.html. When on this page, the URL is in the address bar of your browser. You can select it and then copy it in order to paste it elsewhere.

If you posted the entry some time ago or have simply lost this page, never fear! You can still get to your entry's page, though the method is slightly different, depending on which layout you're using. Many layouts have a "link" link incorporated at the bottom of every post along with the post a comment // # of comments links. Others do not. In these cases, you can typically click the SUBJECT of your post and it will take you to the entry page. If that fails and the post has comments, you can click on the read comments link, which may contain some extra information at the end of the link, but ultimately will not change anything. If the post contains an LJ cut, this will also bring you to the entry page, but to the top of the cut-text rather than the top of the post. Finally, clicking the "leave a comment" link will bring you to the reply page for the entry.

What do these URLs look like? I'm going to use one of my own posts to demonstrate this.

Main Page	http://themegaloo.livejournal.com/296344.html
Comment Page	http://themegaloo.livejournal.com/296344.html?nc=69
Reply Page	http://themegaloo.livejournal.com/296344.html?mode=reply

Those are your basic pages and when you're linking, you typically want to link the first one. Delete everything after the .html if you get one of these pages in your address bar. However, Livejournal also provides two other pages for each entry. Sometimes with custom comment pages, people just can't read things as well, so the following pages exist:

My Style	http://themegaloo.livejournal.com/296344.html?style=mine
Light Formatting	http://themegaloo.livejournal.com/296344.html?format=light

The first link will force the page to show up in your own layout: if you do not have custom comment pages enabled on your journal, it will show up in the default LJ view. The light formatting page is similar to the default LJ view, except with, as implied, lighter formatting. You can make any entry link into one of these links by adding the ?style=mine or ?format=light after the .html of the link.

Of course at this point, I still haven't even showed you how to make a link in HTML. That, in itself, is a pretty simple bit of code, though harder to remember than the formatting codes.

<a href="URL">Link Text</a>

Like the bold and italics tags, you also have to close a link tag. Otherwise everything gets linked and that's just not very visually appealing! "A HREF" actually translates out to "Anchor HypertextREFerence" but really all you need to know is that a link = a href. The URL is the link we just found and you copied. So let's say I wanted to link to my latest fic, the light formatting version (I understand that my layout can be slightly distracting!) This is what I would type into the HTML Editor: <a href="http://themegaloo.livejournal.com/296344.html?format=light">Hit Them With a Shoe</a>. The result is a link which looks like this: Hit Them With a Shoe. Simple, right?

One more thing. Many people in fandom like to do something called "the fake lj cut" where the link is really a link to their own journal, but resembles an LJ cut. All that this requires is a combination of what we've already been over. Your basic LJ cut is formatted in bold between parentheses, also bold, with a space separating the link from the parentheses on either side. Complicated? Not really, it just sounds that way. It would look like this: ( Hit Them With a Shoe )

To code this, you would simply type ( <a href="http://themegaloo.livejournal.com/296344.html">Hit Them With a Shoe</a> )

Easy!

• LJ User and Community Links
These are pretty simple, but I'll go ahead and list them out just so you've got them handy:

<lj user="username">
<lj comm="communityname">

LJ will automatically correct if you use the wrong one of these.

However! If you want to get a bit fancy, you can make it so that the name listed is not the username or community name by adding another bit of code (people ask me for this one all the time). My name, for instance, is Meg. Thus the journal name. If I wanted to write

themegaloo instead of

themegaloo, well, you can do that! All you have to do is type <lj user="themegaloo" title="Meg">, replaced with your own username and inserted text, of course.

• Special Characters
You may be wondering how I keep using the < and > without them automatically going to html. Well, there's a trick for that! It's called HTML special characters and is how people make those cute hearts and stars. For a full list of these, click here. There are about a million. Here are some of the ones I've found most useful:

<	<
>	>
•	•
♥	&hearts;

These can be very fun to play with, and useful for things like these!

• Pictures
How do I insert a picture? First thing's first is to make sure you aren't hotlinking. Hotlinking means using the URL of an image on someone else's sever. The more people that look at an image, the more bandwidth it uses, the more likely it is to stop showing up. Photobucket.com is a free website where you can maintain several galleries of images, tinypic.com and imageshack.us are other common websites used which do not require you to register. All three output the HTML code for inputting an image into an HTML document when you upload, but for reference's sake:

<img src="URL">, where the URL is the direct link to the image, ending in .gif, .jpg, .png, .bmp etc.

• So I copy and pasted and it's all a mess- what should I keep?
The simple answer is that anything that isn't , , or <a href>, you probably don't need. If you see   somewhere, it's just a space. Your big no-no is going to be all that nonsense in the tags. If you see a font tag and you aren't trying to make your font bigger, delete it. Things this can change are size, color, background color, etc. Why shouldn't you have these? Because when you're posting, people usually aren't going to read your journal from your journal page. It may look just fine to you, but if, say, your journal has a black background and white text and my reading page has a white background and black text and you've specified the font be white... Well, we've got magically disappearing text now! Most people want the stuff that shows up on their friendslist to be uniform and legible, not to change size and color or to suddenly have a strange background color or swap fonts. If you want all your journal entries to be in purple text, I would suggest changing it under Customize Journal Style rather than formatting the font on every entry. (Need help with this? Talk to me!) The best way to go about posting to LJ is to leave everything as un-formatted as possible, which is why I've stuck to the basics here.

Really, the mess of spare code that gets shoved in from copy-pasting into a RTE is why I write in my formatting by hand. It's cleaner and I know exactly what's going on. If you completely can't fathom how to work such things, I would highly suggest working in a program like Semagic under the WYSIWYG mode, which allows you to save, or utilizing something which will clean your code for you, rather than trying to sift through the mess that most word processors, especially Microsoft Word, tosses in. For reasonably small documents, check out this link. Another option is here. I've never used these myself, so if you do give them a try, let me know how they work!

If all this HTML stuff still escapes you, here's another idea: Paste your text into the HTML editor. Having done this, there will be no formatting other than line breaks. You can then swap to the Rich text editor by clicking the tab, your text will remain and you can highlight and edit the text as needed to bold, links, etc.

• What I Want To Do Isn't Here...
I'm happy to help with some simple problem solving or give you the HTML codes you need. Feel free to leave a comment and I'll get back to you as soon as possible with an answer!

• Bonus Pointer: Turning off Custom Comment Pages
Go here and scroll down until you see "Disable customized comment pages for your journal." Change the "No" to "Yes" and poof! Everything's in that nice, black and white default LJ style once you click onto your entries.

EDIT: Now with expanded, extra HTML help beyond the basics, here!