custom style tutorial - using div layers (aka a sidebar layout)

This tutorial explains how to create a custom style using div layers, what many people call a sidebar layout. Though there are many customizations you can make, I will be mentioning only the ones I feel are more important to users in general. This is the method I used to teach myself how to do this (I didn't have a tutorial to work from, so I did a lot of guesswork). Once you are familiar with this method, it can be modified to create scrollboxes - I will write a tutorial on that later.

Before starting this tutorial, it helps if you are familiar with how custom styles work. You can find a beginner's tutorial here.

Start by creating a new "Most Recent Events" page style based off of Generator. The create a style page is located at http://www.livejournal.com/styles/create.bml. You should come to a page with the following message:

Your style has been created and has been temporarily named yourusername-lastn-new. You can begin editing it by pressing the button below.

Click the edit style button. You will now be taken to the edit style page. At the top, you will see a box with your style name in it. Rename your style now, before you forget, because you will be unable to create new styles if you don't do this.


Scroll down to the Customizable Variables section.

LASTN_OPT_ITEMS - this changes the number of entries that will appear on the page. Choose a number between 1 and 50.

LASTN_DATE_FORMAT - this changes how your date and time will appear. You can look at various date/time overrides for free users to get an idea of how you can modify this. One tutorial you may find useful is located here.

LASTN_TALK_READLINK - this changes how your "read comments" link looks.

LASTN_TALK_LINKS - this changes how your "leave a comment" link looks. To add memories and edit links to your entries, you would add the codes to this section (codes can be found here).

LASTN_EVENT_PRIVATE - this changes how your entry security, subject line, etc looks on a private post.

LASTN_EVENT_PROTECTED - this changes how your entry security, subject line, etc looks on a friends only or custom filter post.

LASTN_CURRENT - this changes what your mood/music text says. You can find information about changing it in howto's memories.

LASTN_EVENT - this changes how your entry security, subject line, etc looks on a public post.

LASTN_RANGE_MOSTRECENT - this changes what your "viewing: most recent entries" text says, specifically the "most recent entries" part.

LASTN_RANGE_HISTORY - this changes what your "# entries back" text says.

LASTN_SKIP_BACKWARD - this changes what your skip backward link says.

LASTN_SKIP_FORWARD - this changes what your skip forward link says.

LASTN_SKIP_SPACER - this changes the divider between your skip backward and forward links.

LASTN_SKIP_LINKS - this changes how your nottom navigation (skiplinks) table looks as a whole.


Now go to the LASTN_PAGE section, which is almost at the bottom of the page. This is where you will be doing all the major modifications to your style.


There's going to be a lot of coding in here that you don't need, mainly tables that aren't necessary for this kind of layout. Find the following section of codes and delete it.

<table width="600" cellpadding="2" cellspacing="0"
border="0"
summary="">
<tr><td bgcolor="%%color:stronger_back%%" align="center">
<table width="100%" cellpadding="3" cellspacing="0"
border="0"
summary="">
<tr class="caption">
<td class="caption"><b>%%title%%</b></td>
<td class="index" align="right">[<b>entries</b>|<a class="index" href="%%urlfriends%%">friends</a>|<a class="index" href="%%urlcalendar%%">calendar</a>]</td>
</tr></table>
<table width="100%" cellpadding="3" cellspacing="0"
border="0"
summary="">
<tr>
<td class="shadowed" align="center">
<table cellspacing="5"
cellpadding="0"
border="0"
summary="" style="margin-left: auto; margin-right: auto;">
<tr>
%%userpic%%
<td>
<div align="center"><b>%%name%%</b></div><p>
<table cellspacing="0"
cellpadding="0"
border="0"
summary="">
%%website%%
<tr>
<td class="meta">[</td>
<td class="meta" align="right"><b>userinfo</b></td>
<td class="meta" align="center">|</td>
<td class="meta"><a href="%%cons:siteroot%%/userinfo.bml?user=%%username%%">livejournal userinfo</a></td>
<td class="meta">]</td>
</tr>
<tr>
<td class="meta">[</td>
<td class="meta" align="right"><b>calendar</b></td>
<td class="meta" align="center">|</td>
<td class="meta"><a href="%%urlcalendar%%">livejournal calendar</a></td>
<td class="meta">]</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr></table>
</td></tr>
</table>
<p>

Once you've deleted that, go back to the div tag (<div align="center">) that was immediately before the section of codes you just deleted. For the purposes of learning how to make this type of style, change it to the following example:

<div align="left" style="width: 190;border: 1px solid #006393;background-color: #002A46;position: absolute; left: 575px; top: 100px;padding: 1px;">
<center><br>%%userpic%%
<br>
<a href="http://www.livejournal.com/userinfo.bml?user=%%username%%">user info</a>
<br><a href="http://www.livejournal.com/users/%%username%%">recent entries</a>
<br><a href="%%urlfriends%%">friends</a>
<br><a href="%%urlcalendar%%">calendar</a>
<br><a href="http://www.livejournal.com/tools/memories.bml?user=%%username%%">memories</a>
</center>
<br>
</div>

You just added your sidebar, which contains your navigation links. Now you need to create the div layer for the entries. After the above section of codes and before the %%events%% variable, add another div tag.

<div align="left" style="width: 520px;border: 1px solid #006393;background-color: #002A46;position: absolute; left: 25px; top: 100px;padding: 1px;">

If you want a scrolling entrybox, you would make this minor change:

<div align="left" style="width: 520px;height: 350px;border: 1px solid #006393;background-color: #002A46;position: absolute; left: 25px; top: 100px;padding: 1px;">

To finish it up, replace all coding after the %%events%% variable with the following codes:

<br><br>
<table cellspacing="0"
cellpadding="0"
border="0"
summary="">
<tr>
<td class="meta" align="right" class="index"> <b>viewing:</b></td>
<td class="meta" align="center" class="index"> </td>
<td class="meta" class="index">%%range%%</td>
</tr>
%%skiplinks%%
</table>
</div>
<p>
</body>
</html>


And that's it! From there you can use CSS to add background images, change scrollbar colors, change your font, and all of the other things that can be done with overrides. (You would add the CSS towards the top of the LASTN_PAGE section. )If you would like to add a header to your layout, create a third div layer and position it above your entries/sidebar. You would use something like the following:

<div align="left" style="width: 800px;height: 209px;border: 0;overflow: hidden;background-image: url(HEADER URL);position: absolute; left: 0px;top: 0px;">
</div>

You would also add an image map with a third div layer, but by using a slightly different method.

<div align="left" style="width: 800px;height: 209px;border: 0;overflow: hidden;position: absolute; left: 0px;top: 0px;">
All image map coding, including <img> tags goes here.
</div>