Header

  1. Header
    1. Introduction
    2. Replace the Wiki name with text
    3. Replace page name with text
    4. Replace | with something else
    5. Replace all text with one string
    6. Replace Wiki name with a banner
    7. Shorten page names automatically
    8. Change entire header section with HTML
  2. Change page title


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 functions 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.


Replace the Wiki name with text

This function 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>
header.replaceWikiName("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>
header.replacePageName("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">
header.replaceDivider("***");
</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">
header.replaceAllText('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">
header.replaceWithBanner("http://pbwikifanclub.pbwiki.com/f/12258112.gif");
</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">
header.shortenLongName(3);
</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">
header.changeHTML('MY CODE HERE');
</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>
document.title = "YOUR TITLE HERE";
</script>

Run this script / Reset

Top

This page and all it's contents were written, directed, produced, packaged and distributed by Jason Nguyen (vietmusic).


Page Information

  • 11 months ago [history]
  • View page source
  • You're not logged in
  • No tags yet learn more

Wiki Information

Recent PBwiki Blog Posts