Main
+ Back to the main site.

live.in.the.era

 

DIV-layer layouts for LiveJournal and LJ-clones: Part Two
+ This tutorial goes step-by-step on creating a two-column DIV layout from conception to implementation for LiveJournal and similar sites. Graphic-intensive. This is the second part of every LJetc. layout tutorial on the site; that is, how to actually get your layout on your journal of choice. You will need:

+ A layout. You can either create one of your own by following the tutorials from the tutorials page, or by using a pre-made layout from the layouts section of this website (or one someone else has created for you). Be sure it has at the very LEAST the LJ-system-specific "%%entries%%" tag where you will want your journal entries to go.
+ An account on LiveJournal or an LJ-clone that will allow you to create and edit styles. On most sites, this requires an early adopter, paid, or permanent account.
+ A basic knowledge of HTML. This tutorial uses HTML extensively, but as long as your layout has already been created and can be displayed WITHOUT your journal (like a regular webpage), you should be fine. A basic knowledge means how to insert images, make text bold, underlined, italicized, linked, etc. and the ability to recognize these tags.
+ A place online to store the images used in your layout that allows direct-linking. I can NOT help you with that. Get'cho own XD;;
+ Also helpful is SOME sense of aesthetics. I'm sorry, but some of the layouts I've seen over at LJ make me cringe. Neon green is NOT a good choice for a background, I don't care HOW colourblind you are XP

Getting Started
+ Now we have all our layout, and if we were making a regular webpage layout, we would be done. However, since this is a layout for a journal, we have a few more steps before it's ready for presentation. If you have a pre-made layout from the Layouts section of this site, this is where you will begin your journey to having your own spiffy layout.

+ Just a FYI, this is what our layout currently looks like in Internet Explorer (actually, this is half the size of what it actually looks like. Semantics, semantics XD;). On the sidebar is "%%userpic%%" which will be replaced by our journal-site with your default user icon (if you have one, if not, it'll disappear). In the main box we have our VERY important "%%events%%" tag -- without this tag, your layout will not work. Period. Below it, centered, is the "%%skiplinks%%" tag, which will be replaced by LJ (or the clone you're working with.. for sanity's sake, we'll be referring to it as "LJ" from now on, whether you're using it, DeadJournal, ParaJournal, Blurty, AboutMyLife, uJournal, whatever.) with the code to go back or forward however many entries per page. Below that is a link to an anchor at the top of the page to easily reaccess the top of the page when it's scrolled down all the way. The only REQUIRED tag is the "%%events%%" tag, which will be replaced by your actual journal entries.. without it, there is NO point for this tutorial, and I am NOT kidding XD;

+ Be sure you're logged into your account. You won't be able to do squat without being and staying logged in. Trust me on this here. This tutorial WILL be using LiveJournal's layout as a base, but the layout on the LJ-clones is NOT so different that things aren't generally in the same place. If there's a case where a specific link is not blatantly obvious on a journal site's layout, I will make mention of it. Look and you'll find, trust me.

+ In the second header on ANY regular LiveJournal page (the index, the comment pages, ANYTHING), titled "Your Settings", there's a link to "Edit Style". On DeadJournal, this is under "Tombstone Prefs" (and there's actually a link to the page we're going to after this, "Style Create"), on Blurty it's simply "Styles" all the way on the right on the top bar. This is our magic wand. Click it.

+ I don't even know WHY I feel obligated to have a picture of this, but there we are. Click on "create a style" (unless you're at DeadJournal and have already clicked on "style create" in which case you're ahead of the game).

+ Though you can use whatever you want, essentially speaking, for a base layout, I prefer to use Punquin Elegant w/sidebar. It's availiable on all (as far as I've seen) LJ-clones, and really lends itself well to having DIV-styles created from it. The other good one I've seen is Refried Paper, which is newer than Punquin and so might not be availiable on the older clones (but DeadJournal, which is the oldest I'm aware of that still exists, DOES have it -- hoorah for upgrading your software every so often XD;) You can create whatever type of style you want -- Calendar is the only one that would NOT work with the layouts we've made, for mildly obvious reasons. We'll be doing your main journal layout because that's what I'm most familiar with and what most people want to learn to do.

+ If you're actually allowed to create and edit styles, you'll get a success screen. If not, it will tell you your account type cannot create styles, in which case... there's not much you can do ^^; If you already have a style created, and haven't renamed it from the default, you won't be able to create a new style until you rename it. But if you're all good, click that "Edit Style" button and we'll continue.

+ The first thing you should notice about this "Edit Style" screen is that it is FULL of tables. There'll be a text entry box that says "(yourusername)-lastn-new". You cannot create any more lastn (Most Recent Events) styles until you rename this one. I think "xella-lastn-new" is a kind of boring name for things ANYWAY, so let's give it a new name. I'm going to call my style "OUYM Tutorial" so I can easily recognize it in my list of styles (which is incredibly long, as I rarely if ever delete these things XD;;). You name yours whatever you want -- preferrably something you'll be able to instantly recognize, especially if you plan on creating more than one. If you're creating a layout for someone else to use, you will have to mark it "public", which will allow people to enter the Style ID number in the box next to the "create style" dropdown on the "create a style" page from earlier. I tend to forget that, and people then go "TT It won't let me copy it~ *cry*" and I make a fool of myself XD;

+ About 1/4 of the way down the page, there are two headings, "LASTN_TALK_READLINK" and "LASTN_TALK_LINKS" which, if you've ever played with the overrides for, should probably sound familiar. They're the ever-loved, ever-hated comment links, and if you used Punquin as your base layout-of-choice, right now your layout will be saying ( 1 comment | comment on this ) for your comment lins, which isn't bad.. if you're a free account. But as we're totally customizing our journals, let's just customize this, too. I've got a dream-theme going on (as this is the layout for my dream journal on Blurty), so I want to change it to look like .: 1 whisper on a cloud × whisper daydreams in my ear :. To do this, I change

<a href="%%%urlread%%"> %%messagecount%%&nbsp;comment%%mc-plural-s%%</a>&nbsp;|&nbsp;

to

<a href="%%urlread%%">%%messagecount%% whisper%%mc-plural-s%% on a cloud</a> ×

in the LASTN_TALK_READLINK box. Let me break down for you WHY I did what I just did. The "%%urlread%%" is the LJ-code for the URL of your "read these comments" page for any given entry. The "%%messagecount%%" is replaced with the number (1, 2, 649) of comment that entry has. %%mc-plural-s%% only appears when there's more than one comment, when it adds an "s" to wherever it is: 1 dream, 2 dreams. Like that. If you wanted something that ended in "es" when it was plural, you would use %%mc-plural-es%%, and if you wanted something that would be ending in "ies" as a plural, you would use %%mc-plural-ies%%. Notice that LiveJournal mentions all these tags right above the text box, so you can't forget them ^^ Very handy.

+ Directly below the TALK and READLINK boxes is LASTN_SUBJECT. This is what the subject of your journal entry (if there is a subject) will look like. If you want it to display in a colour that's different from your regular text colour, replace "%%color:page_text_em%%" with the HEX code ("#123456") or the name ("red") of that colour, if not, delete the whole <font> tag, making sure to also delete the </font> tag.

+ The next box is the HTML for what your entries that are private (only you can see them) will look like, and the one after that is the HTML for what your entries that are friends-only and custom friends-only will look like. If you want to make absolutely no distinction between any of them, feel free to delete ALL the HTML in them. Otherwise, just delete the <FONT FACE="Verdana,Arial,Helvetica" SIZE="2"> and </FONT> tags -- especially if you're using a pre-made layout from this site or a layout you made using a tutorial from this site, we've already specified what our text face and size is, and this is not only redundant but will make it display funkily later. Get rid of 'em.

+ There are more <FONT> and </FONT> tags in LASTN_CURRENT, which is the code for what your current music or mood will look like. Get rid of those FONT tags!

+ I don't usually bother with LASTN_ALTPOSTER, but if you're creating a style for a community, I would suggest deleting the <FONT> and </FONT> tags in there, as well. As mine is a personal journal, I'm not even going to touch it.

+ LASTN_EVENT is the default code for your entries. Go through and get rid of all those nasty <FONT> and </FONT> tags, because they're nasty. Ooh, nasty!

+LASTN_NEW_DAY will appear at the top of your DIV column with your entries, and whenever there's a new day, while LASTN_END_DAY will appear after all your entries for a given day (For example, NEW_DAY, three entries from Saturday, END_DAY, NEW_DAY, two entries from Friday, END_DAY, NEW_DAY, five entries from Thursday, END_DAY, end of page). Hopefully you're familiar enough with HTML by now to be able to code this the way you want if a simple line break and the date isn't enough for you, but if it's fine or you're not, just remove the FONT tags again.

+ Here's the moderately tricky part. There are four or five unlabeled boxes with what seems to be random jibberish in them (note: Blurty.com has labelled these boxes). Actually, they're the code for the tags mentioned all the way at the beginning of this page, the "%%skiplinks%%" tag, which will be replaced by LJ with the code to go back or forward however many entries (the default is 20, all the way at the top of the edit style page, you can choose how many you really want) per page. The first box (not pictured) is simply filled with %%numitems%%, that is, the number of items you're going back. Leave it be, as I haven't yet seen a reason to change it. The box below it (the first on the screenshot above) is the code to go BACK however many entries. Below that is the code to go FORWARD however many entries (this won't appear if you're on your main and most recent page), and below that is the "skip spacer"; that is, what you want to be between the previous and next links. Usually I'll just changed "previous %%numitems%% entries" to "go back in time" or some other such thing. Customize it more or less depending on your preference. The final box is how you want those three boxes to be laid out -- again, I just leave it as-is.

+ If you did absolutely NOTHING else in creating your style, or had time to do ONE thing on this page, this would be it. About 7/8 of the way down the page is the longest text box there. The heading for this box is LASTN_PAGE, and that's almost exactly what it is. Copy the HTML for your layout that you made earlier -- yes, ALL of it -- and paste it ALL into this big box. Make sure to replace "top.jpg" with "http://www.yoursite.ext/whereitis/top.jpg" in your IMG and BACKGROUND tags. Keep scrolling down.. hit "Save Style" and.. you're done! If anything looks odd or out of place, check to make sure all your FONT tags are gone.

A Word of Advice
+ If your journal is entirely friends-only, you will see NO entries on the link they offer you to click to preview your style. Friends-only and Private entries will not show up on this preview page. They WILL, however, show up IN your journal when you set your new style to be your "Most Recent Events" selected style in "Modify Journal" on your sidebar. If you want to see the finished layout in action, my dreamjournal, Dream On on Blurty, used PRECICELY this tutorial (so yours should come out something like it if you follow what I say ^^).

+ This tutorial completed: March 1, 2003
+ Back to Tutorials