Making a What's New Window and Other Wikilet Tricks


by WilkieMon


This tip uses Super Sekrit Feature II: Wikilets


Caution: "This feature is ALPHA, which means that it's not linked to from anywhere and will almost certainly be dramatically changing without warning. It may break periodically, too. You've been warned!"


That said, are you ready to rumble?



Suppose you want to maintain a list of major changes to your wiki (or a list of members, or extended text of some sort, or whatever) and display them in a scrolling window on a page, something like this or this. To make this work:

  1. Create a "background" page containing the text to be displayed.
  2. Use one of the following "Wikilet" codes on the main page

The "iframe" code gives you more control over the display while the "script" version gives an arguably prettier display.

Background Page

The background page is just another wiki page containing the content you want displayed in the window.


If your content is a listing of highlights, I suggest you order the list with most recent / relevant info at the top.


The background page for this example is: WilkiMon_WhatsNewBackground

Iframe Technique


The basic iframe format is given above.


The format of the src="http://USERNAME.pbwiki.com/YourPage?raw=bare" string is critical!

You can modify how the window is displayed by including additional attributes inside the <> brackets:

Here is a full list of attributes you can play around with: http://www.w3.org/TR/html401/present/frames.html#h-16.5


The one thing I have not figured out how to control is the background color inside the window. Depending on the skin you use, you may or may not appreciate the default green. (Personally, I do not care for it in conjunction with the Minimalist skin I use on my wiki.)

Addition by vietmusic: It is possible to change the background color through a javascript at the bottom of the source file referenced in the <iframe>. The appropriate code is:


<script language="javascript">document.body.style.background="white";</script>


Of course, white can be any of the valid CSS colors, or if you prefer, you can use hex numbers as described in Abernaith's tip on changing background colors.


This line of code:


<iframe src="http://pbwikifanclub.pbwiki.com/WilkiMon_WhatsNewBackground?raw=bare" width="600" Height="80"></iframe>


Creates this window:



Toggle to Page View to see what the window brings accross and what it leaves behind.


In a "Second Sidebar"

Vietmusic posted this tip for creating a second sidebar: http://forums.pbwiki.com/viewtopic.php?t=1629


This can be used in conjunction with the iframe for a pretty neat result. The following block of code yields the result to the right:


<div id="SideBar" style="clear:right; float:right; margin-right:0px; margin-left:10px"> <div class="SideBarTitle">Star Trek</div> < iframe src="http://pbwikifanclub.pbwiki.com/WilkiMon_WhatsNewBackground?raw=bare" width="200" Height="200"> </iframe> </div>

Script Technique

The script technique provides an arguably cleaner look than the iframe technique, but I have not figured out how to control the size or any other element of the window.


The format of the src="http://USERNAME.pbwiki.com/YourPage?raw=bare" string is critical!

This line of code:


<script src="http://pbwikifanclub.pbwiki.com/WilkiMon_WhatsNewBackground?raw=js"></script>


Creates this window:


Known Glitches

I have found a couple of unexpected things when the iframe technique is used to create the display window. (I have not tested these with the script method yet … check back later for an update.)