This tutorial will allow you to add an "indented" effect to your entry tables using padding.

Requirements:
Any LJ account (free, paid, or otherwise) using the Generator journal style.

Overrides:
.entrybox table td{
padding-left: 30px;
padding-right: 30px;
}
.entrybox table td.caption, .entrybox table td.index, .entrybox table td.meta, .entrybox table td.comments, .entrybox table table td{
padding: 0;
}
These codes should be added to your existing GLOBAL_HEAD or LASTN_HEAD overrides.

Editing:
Change the bolded numerical values to change the amount of indentation. (Larger values will result in larger indentations.) Do not change padding: 0;.

Permalink + Add to Memories

This tutorial will allow you to change the lock and eye icons that accompany protected and private posts. Note that this will NOT work in Internet Explorer — you will need to be using an alternate browser (like Firefox, Netscape, or Opera) to see this effect. IE users will see the default security icons.

Requirements:
Any LJ account (free, paid, or otherwise); an image host; an alternate browser.

To Start:
In your favorite image program, create two 16x16 pixel images — one for protected entries and one for private entries. Once you have created the images, save them and upload them to your image host.

Overrides:
.caption img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 16px 16px 0;
background: url(http://yourdomain.com/lock.gif);
}
.caption img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 16px 16px 0;
background: url(http://yourdomain.com/eye.gif);
}
These codes should be added to your existing GLOBAL_HEAD or LASTN_HEAD overrides.

Editing:
Replace the bold URLs in the above code with the URLs to your own lock and eye images.

Permalink + Add to Memories

This tutorial will allow you to move your entry and sidebar text above your image map header, while leaving the header visible in all browsers.

Requirements:
Any LJ account (free, paid, or otherwise) with a header image.

Overrides:
.shadowed img.x{
z-index: 1!important;
z-index: -10;
}
table, .shadowed div{
z-index: 80;
}
html>body table{
position: relative;
}
These codes should be added to your existing GLOBAL_HEAD or LASTN_HEAD overrides.

Editing:
If you have used the tutorial linked above to add your header, editing of this code is not necessary.

If you have used a different method, you will need to change the class called x in the above overrides to reflect the class of your header image. For example, in your LASTN_WEBSITE, you may see a code like:
<img src="yourimage.gif" class="header">
In this case, you would replace x in the above overrides with header.

Permalink + Add to Memories

This tutorial will allow you to add an update form to your journal, as seen in S2 styles like Component.

Requirements:
Any LJ account (free, paid, or otherwise) with a website listed in the userinfo.

Overrides:
LASTN_WEBSITE<=
<form method="post" action="http://livejournal.com/update.bml" name="updateForm">
<input type="hidden" name="usejournal" value="test_sommeil">
<span class="posttime">
<input type="text" value="mm" name="mon" maxlength="2" /> /
<input type="text" value="dd" name="day" maxlength="2" /> /
<input type="text" value="yyyy" name="year" maxlength="4" /> at
<input type="text" value="00" name="hour" maxlength="2" />:
<input type="text" value="00" name="min" maxlength="2" /><br />
</span><span class="subjectpost">
<input type="text" maxlength="100" value="Subject" name="subject" /><br />
<textarea wrap="soft" name="event">Post</textarea></span><br />
<input type="submit" value="Post Question" />
</form>
<=LASTN_WEBSITE

In addition, add this to your existing GLOBAL_HEAD or LASTN_HEAD overrides:
span.posttime input{
width: 35px;
}
span.subjectpost input, span.subjectpost textarea{
width: 250px;
}
span.subjectpost textarea{
height: 50px;
}

Editing:
Replace the bold text in the first code with the name of the journal you want the form to post to. If you have an existing LASTN_WEBSITE override, you will need to merge it with this code.

In the second code, the first number represents the widths of each of the date and time input boxes. The second number represents the widths of the subject and post input boxes. The third number represents the height of the post input box. You may edit these numbers as you find suitable to your layout.

Other Overrides:
You may wish to put this update form within a custom navigation box or sidebar. If you use either of these codes in conjunction with the update form code, remember to merge them.

Permalink + Add to Memories

This tutorial will explain how to use CSS hacks to make your layout compatible with Mozilla and other non-IE browsers.

Requirements:
Any LJ account (free, paid, or otherwise).

Method 1 - The Child-Selector Hack:
In CSS, the > character means "child of" — so, in technical terms, the selector html>body means "a body tag that is the child of an html tag." However, all that's necessary to know for this hack is that Mozilla and other browsers understand child selectors. Internet Explorer doesn't, and so will completely ignore them. This makes it possible to write one set of code for IE, and another set for other browsers.

In order to use the child-selector hack, you need to simply duplicate a piece of code and add html>body in front of the second instance. The first instance of the code will apply to Internet Explorer, while the second instance will apply to all other browsers. For example, the following code will make text within font tags red in Internet Explorer, and blue in other browsers:
font{
color: red;
}
html>body font{
color: blue;
}

Of course, this hack isn't limited to changing text colors. You can set any page property for IE browsers and alter it for other browsers. This is especially useful, because sometimes a layout will align perfectly in one browser, and be a pixel or two off in another browser. With this hack, you can set the correct alignment in Internet Explorer, and then override the numbers using the html>body selector in order to set the correct alignment for other browsers, without breaking the positioning in IE.

Method 2 - The !important Hack:
In CSS, if you define something (say, a font size) twice, the last value given will be the one used. This can be overridden by ending the line with !important — a line ending in this will be used, regardless of whether the same thing is defined later in the code. However, like the child selector, Internet Explorer doesn't understand !important. Therefore, you can write one line of code ending in !important, then another that doesn't. The first code will apply to Mozilla and other browsers, because they understand the !important rule, and the second code will apply to IE, because it doesn't understand and takes the rule that comes last.

This code does the same thing our first example did — it sets text within font tags to red in IE, and blue in other browsers:
font{
color: blue!important;
color: red;
}

As you can see, the advantage to using this hack is that it's more compact than the child-selector hack above. However, some people find this method more confusing. It's mainly a matter of preference — both methods accomplish the same thing, so use whichever one makes more sense to you.

Other Overrides:
Once you've used these hacks to achieve consistent layout in all browsers, you may find a horizontal scrollbar appearing in browsers other than IE. You can fix it with theonlykow's removal code.

Permalink + Add to Memories

This tutorial will allow you to change the user and community symbols that appear when you use an <lj user=""> or <lj comm=""> tag in your journal. Note that you will be replacing both user and community symbols with a single image, meaning their new symbols will be the same.

Requirements:
Any LJ account (free, paid, or otherwise); an image host.

To Start:
In your favorite image program, create an image that you would like to use to replace the user symbols. Note that the image should be 17 pixels wide. Its height is dependent on the height of your text — in most cases, a height of 13 to 16 px is adequate. Once you have created the image you'd like, save it and upload it to your image host.

Overrides:
Add these to your existing LASTN_HEAD or GLOBAL_HEAD overrides:
span.ljuser{
background-image: url(http://yourimagehost.com/yourimage.gif);
background-repeat: no-repeat;
background-position: left middle;
}
span.ljuser img{
visibility: hidden;
}

Editing:
Replace the URL shown in bold with the URL of your image. If you are using an image format other than GIF, make sure to use the correct image extension.

Permalink + Add to Memories

This tutorial will allow you to add a scrollbar to every entry in your Tabular Indent layout.

Requirements:
Any LJ account (free, paid, or otherwise) using the Tabular Indent journal style in S1. This code will NOT work as intended with any other style.

Overrides:
div{
overflow: auto;
width: 300px;
height: 100px;
}
div div{
width: auto;
height: auto;
}

Editing:
Merge this override into your GLOBAL_HEAD (or LASTN/FRIENDS/DAY_HEAD). Change the numerical width and height values to whatever you'd like; do not change height: auto;.

Other Overrides:
You may be interested in the colored scrollbar override provided by howto; to color the scrollbars in your entries, replace body in that code with div.

Permalink + Add to Memories

This tutorial will allow you to put your datestamp on a new line below your subject line.

Requirements:
Any LJ account (free, paid, or otherwise) using the Generator journal style.

Overrides:
LASTN_DATE_FORMAT<=
</td></tr><tr><td class="index2">
%%m%%/%%d%%/%%yy%% - %%12h%%:%%min%% %%ampm%%
</td></tr><tr><td class="index3">
<=LASTN_DATE_FORMAT

In addition, add this to your existing GLOBAL_HEAD or LASTN_HEAD overrides:
.entrybox td.index, .index3{
display: none;
}

Editing:
To change the way the date and time are displayed, edit the bold part of the code above. A full list of variables you can use to format your datestamp are available in LiveJournal's DATE_FORMAT documentation.

Other Overrides:
Other datestamp overrides will work with this method as well. However, you must remember to replace any instances of .index in the code with .index2.

You may be interested in centering your datestamp, layering your day behind the datestamp, or having your day as an image — all of which will work with this code when they are edited as described above. For more information about basic customizations of your date/time, see this tutorial.

Permalink + Add to Memories

This tutorial will allow you to replace the day of the week in your timestamp with a custom image.

Requirements:
Any LJ account (free, paid, or otherwise); an image host (try Photobucket or Villagephotos).

To Start:
In your favorite image program, create seven images, one for each day of the week. Save them accordingly — Monday.gif, Tuesday.gif, and so on. Make sure that image names begin with a capital letter. Upload all seven to your image host.

Overrides:
LASTN_DATE_FORMAT=><img src="http://yourimagehost.com/%%daylong%%.gif">

Editing:
Replace the URL shown in bold with the URL to your image host. For example, mine would be http://photobucket.com/albums/v108/laurex. Make sure to leave the %%daylong%% bit intact. If you are using an image format other than gif (such as jpg, png, or bmp), change it to the correct image extension.