This override lets you have complete control over the contents of the navigation box at the top of your journal. If you want to remove the navigation box, you want to go here. Anyway, back to this tutorial: it only works in the Generator style for free accounts in S1. For other styles, you can only add links to your navigation (see here). Back to Generator...

You MUST - repeat MUST - have a website listed in your User Info

SO many people forget this, it's unbelievable! It doesn't have to be *your* website; it can even be http://www.livejournal.com as long as you have one listed --> Manage --> Info --> Webpage URL & Webpage Name.

Still don't understand? Do it by pictures.

Note: When this tutorial refers to GLOBAL_HEAD, it generally means LASTN_HEAD as well.

You put all this in your overrides box at the bottom of the modify journal page: http://www.livejournal.com/modify.bml

The override for changing just certain words from the default setting can be found here in the Support section. You can also add links to your navigation here. However, the overrides that follow will allow for you to completely change the look of your navigation box.

This tutorial has lots of different options, so if you're looking for one particular thing use these links n.b. these won't work for Mozilla users, you'll just have to make do with scrolling I'm afraid ;)

Hiding Navigation Links
Hiding Top Right Links
Reducing Space In Navigation Box
Hiding Journal Name Without Changing In User Info
Replacing Journal Name Without Changing In User Info
Hiding User Icon
Dash On Navigation Box
Align Links
Custom Navigation On Friends, Calendar & Day Pages

Hiding Navigation Links

First off, the actual override. This override does NOT go in your GLOBAL_HEAD, it is a separate override - do not merge it with anything else!

LASTN_WEBSITE<=
<style type="text/css">
<!--
table table table table .meta {visibility:hidden;position:absolute;top:1px}
table table table table table .meta {visibility:visible;position:relative;top:1px}
-->
</style>
<tr><td colspan="5" width="100%">
<table style="float:right" cellspacing="0" border="0" cellpadding="0">
<tr><td class="meta">
<span id="navigation">

your links/words/images or whatever goes here

</span>
</td></tr></table></td></tr>
<=LASTN_WEBSITE

The part that is underlined will create a border around your links. If you want one, then want to add a colour, change the "0" to a number and then add this code straight after it: bordercolor="#HEXCODE" then keep the cellpadding one straight after it.

The override defined in yellow hides the original navigation links.
The override defined in green relates to hiding your usericon, and is explained further down.

Hiding Top Right Links

Then there are the following options:

This override hides, but does not change, the [entries|friends|calendar] links at the top right, and should be merged in the GLOBAL_HEAD:

table table tr.caption td.index{
visibility:hidden
}

This override hides, but does not change, the "(name's) Journal" part at the top left (or the title if you've defined one) and should be merged in the GLOBAL_HEAD:

table table tr.caption td.caption{
visibility:hidden
}

Reducing Space In Navigation Box

To change what these say, you can basically hide them and then recreate the links in your own fashion. If you use both of these overrides, you will still have the top bar there - this is often not wanted by users as it leaves the impression of extra space in the navigation box. To reduce this extra space, do not use those 2 overrides at all and instead use this override merged in the style tags of your LASTN_WEBSITE:

tr.caption {
display:none
}

If this still doesn't work, it's because you haven't entered your links into the table coding above.

Hiding Journal Name Without Changing In User Info

Also, if you want to hide the part that says the name from your userinfo in the navigation box above the regular links, you can use this override, merged in the style tags of your LASTN_WEBSITE:

.shadowed td div {
visibility: hidden;
position: absolute;
top: 1px
}

Replacing Journal Name Without Changing In User Info

To replace this with something else, use the caption override after the closing style tag (</style>) in your LASTN_WEBSITE override i.e.

LASTN_WEBSITE<=
<style type="text/css">
<!--
table table table table .meta {visibility:hidden;position:absolute;top:1px}
table table table table table .meta {visibility:visible;position:relative;top:1px}
-->
</style>
<caption>your text here</caption>
<tr><td colspan="5" width="100%">
<table style="float:right" cellspacing="0" border="0" cellpadding="0">
<tr><td class="meta">

your links/words/images or whatever goes here

</td></tr></table></td></tr>
<=LASTN_WEBSITE

Hiding User Icon

Another option in this override is to hide your usericon in your navigation box. You cannot move the icon elsewhere. To remove it you can do this by either having no default icon, or through this override merged in your GLOBAL_HEAD:

.shadowed img {
display:none;
}

If you want images in your navigation bar, or if you have a header or image map that's in the LASTN_WEBSITE, they won't show up because the above code makes them disappear. Therefore you need to make sure you have this bit in the style tags of your LASTN_WEBSITE:

.shadowed span#navigation img {
display: inline;
visibility: visible;
position: relative;
}

This part overrides the invisibility code for the usericon, so you can just enter images as normal. If you have a header or image map, you need to add this:

<img src="http://www.headerimageurl.gif" class="x" style="visibility: visible; display: inline;">

Next, you need to have this part before your new links (if you are adding links):

<span id="navigation">
new links here
</span>

Ref: Images not showing

Dash On Navigation Box

If you use the above code, you might be left with a small "dash" where your icon used to be. This is the userpic border. That color is controlled by the Stronger Accent field in the Custom Colors. Make it the same colour as Weak Accent and it'll disappear.

Align Links

To center everything, just add a <center> tag like so:

<center>your links/words/images or whatever goes here</center>
To align to the left/right or to justify, just add a <p align> tag like so:

<p align="left">your links/words/images or whatever goes here</p>

Changing left to right or justify as appropriate.

Note that none of these will work unless you have the correct overrides for hiding the links found here and everything is inside the table overrides.

Custom Navigation On Friends, Calendar & Day Pages

If you wish to have the same view on all your pages, you just copy the override you have created for the LASTN page and replace LASTN with DAY, FRIENDS, or CALENDAR to get the view on each page.

---

Example

So, say I want: links with images next to them, no usericon to appear on the journal page but I wish to retain my default icon, all the links to be in the center, the top bar to disappear completely and my caption to be removed and replaced with some text. To get this, I would use the following code:

In my LASTN_WEBSITE:

LASTN_WEBSITE<=
<style type="text/css">
<!--
table table table table .meta {visibility:hidden;position:absolute;top:1px}
table table table table table .meta {visibility:visible;position:relative;top:1px}

tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px
}
.shadowed span#navigation img{
display: inline;
visibility: visible;
position: relative;
}
-->
</style>
<caption>my new caption text goes here</caption>
<tr><td colspan="5" width="100%">
<table style="float:right" cellspacing="0" border="0" cellpadding="0">
<tr><td class="meta">
<span id="navigation">

<center><img src="http://imageurlhere.jpg"> <a href="http://www.livejournal.com/userinfo.bml?user=_imperfectx&mode=full">userinfo</a> <img src="http://imageurlhere.jpg"> <a href="http://livejournal.com/users/_imperfectx/friends">friends</a> <img src="http://imageurlhere.jpg"> <a href="http://livejournal.com/users/_imperfectx/calendar">calendar</a></center>

</span>
</td></tr></table></td></tr>
<=LASTN_WEBSITE

And in my GLOBAL_HEAD I would put:

GLOBAL_HEAD<=
<style type="text/css">
<!--
.shadowed img{
display:none;
}
-->
</style>
<=GLOBAL_HEAD


---

Extra help

You can find out how to merge overrides here.

For help on making links, see this tutorial.

If you wish to start a new line, hitting return won't work: you'll need to add a break tag --> <br>

This is my first line <br>
And this is my second line <br>
And this is my third line

If you want to change the font size you can either:

Wrap the desired part in a font tag e.g. <font size="#">your links etc here</font> - this is best if you're wanting different sizes for different words/links/page views as you can do it as many times as you want on whatever words you want.

Or, use the font code from here to make the font the same size for all the bits in the navigation box. You'll want to use the top banner main navigation links part to change the size.

Big props to alkalynex for practically all of these overrides!!