Change Parts of the Header

UPDATED May 15, 2006 - Code now IE6.0 compatible.

UPDATED Nov 15, 2006 - New, more flexible code.

Introduction

I hesitated about spreading this series of tricks for a while, because if people start messing with them too much, something's bound to crash, but I spent a few minutes last night organizing them into nearly fool-proof and generally harmless javascripts, so nothing irreversible will happen in any of these cases.

If you get to a point where the edit button is no longer visible, remember that you can just type in the normal page address and append "?edit=1" to the end of it to get to edit mode.

All the scripts can either be placed in the SideBar to run on all pages, or somewhere on any of your pages to use them on an individual basis. Also, use only one of these scripts at a time, as they use the same variables and get confused when more than one of them is around (I could have avoided this, but I wanted to simplify and shorten the code as much as possible).

The code automatically deciphers wiki name and page name from the URL, so even if you change either of these, the code still works.

Without further ado, here's how to change the headers. At the end, there's also a bonus on changing the document title.

Top

Replace the Wiki name with text

This script takes the little text in the header that names the wiki and changes it to some other text of your choice. Just change Your String Here to the string that you want.

<script language="javascript">
document.getElementById("header").getElementsByTagName('h2')[0].innerHTML = "Your String Here";
</script>

Top

Replace page name with text

This takes the second half of the header, the name of the page, and changes it. This is particularly useful when your page name is really long and is messing up the header formatting.

<script language="javascript">
document.getElementById("header").getElementsByTagName('h3')[0].innerHTML = "Your String Here";
</script>

Top

Replace | with something else

Maybe sometimes you've wondered why that little bar between the wiki name and page name is there--it's coded into the CSS and doesn't show up even if you look at the page source. Luckily, I've figured it out. All you have to do is change ReplaceChar to the character you want ("" if you want empty space).

<script language="javascript">
var ReplaceChar = "***";
var temp = document.getElementById("header").getElementsByTagName('h3')[0];
temp.innerHTML = ReplaceChar + temp.innerHTML;
document.getElementById("header").getElementsByTagName('h3')[0].style.border = "0px";
</script>

Top

Replace all text with one string

Maybe you want to just change the whole thing to one title. Use this script to do that, with Your String Here being your string.

<script language="javascript">
document.getElementById("header").getElementsByTagName('h3')[0].innerHTML = '';
document.getElementById("header").getElementsByTagName('h3')[0].style.border = '0px';
document.getElementById("header").getElementsByTagName('h2')[0].innerHTML = 'Your String Here';
</script>

Top

Replace Wiki name with a banner

I get this request the most. It's self-explanatory--just put in your image source for bannersource and let the script run. One warning though: your height must be 60 pixels or less (no length limit other than being reasonable) using Hyperreal. I don't know the size requirements of other skins and I'm too lazy to figure it out. (Some simple CSS allows different dimensions, but that is outside the scope of this tutorial)

I suggest using this in conjunction with the "Shorten page names automatically" script below, as banners tend to be long and sometimes, so do page names.

<script language="javascript">
var bannersource = "http://pbwikifanclub.pbwiki.com/f/12258112.gif"
document.getElementById("header").getElementsByTagName('h2')[0].innerHTML = '<div style="margin-left:-12px;margin-top:-16px"><img src="'+ bannersource + '"></div>';
</script>

Top

Shorten page names automatically

If the page name is too long, it messes up the header formatting and text. This code automatically adjusts that and should be compatible with all the other code I've presented, so I would suggest throwing this in the SideBar and having it run wiki-wide, especially if you're prone to massive page names. Set fnmaxlength to some maximum length and you're set.

<script language="javascript">
var maxlength = 8;
var filename = document.getElementById("header").getElementsByTagName('h3')[0].innerHTML;
if (filename.length > maxlength)
document.getElementById("header").getElementsByTagName('h3')[0].innerHTML = filename.substring(0,maxlength)+ "...";
</script>

Top

Change entire header section with HTML

All the solutions so far were designed to affect the header minimally. The search bar is still there, and only text (or an image) is being added or modified. But if you REALLY think you're up to it, you can in fact change the HTML inside the header with the following script

<script language="javascript">
var myHTML = 'MY CODE HERE';
document.getElementById("header").innerHTML = myHTML;
</script>

Top

Change page title

This is only tangentially related, but allows you to page the title of the page in the window bar.

<script language="javascript">
document.title = "YOUR TITLE HERE"
</script>

Top