| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Finally, you can manage your Google Docs, uploads, and email attachments (plus Dropbox and Slack files) in one convenient place. Claim a free account, and in less than 2 minutes, Dokkio (from the makers of PBworks) can automatically organize your content for you.

View
 

vietmusic_ChangeHeader

Page history last edited by PBworks 14 years, 7 months ago

 

 

 

Change Parts of the Header

 

by vietmusic

 

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>

 

Run this script / Reset

 

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>

 

Run this script / Reset

 

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>

 

Run this script / Reset

 

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>

 

Run this script / Reset

 

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>

 

Run this script / Reset

 

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>

 

Run this script / Reset

 

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>

 

Run this script / Reset

 

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>

 

Run this script / Reset

 

Top


 

 

 

 

 

 

 

 

 

Comments (0)

You don't have permission to comment on this page.