Make your wiki easier to read

Add a table of contents using <toc> (or <toc!> or <toc!!>) at the top (and bottom?) of pages that have a fair amount of content. If the table looks too big, use <div style="font-size:90%;"><toc></div>.

Return to top links

<top> makes a nice "top" link at the bottom of a page (or within a page for that matter).

Section links

Anchor links to sections within the page can also be made: [PBwikiTips#Whiteboxorama|White-box-orama] which will display like this, White-box-orama.

Make your wiki easier to edit

Spread it out

Use the fact that PBwiki ignores extra blank space (spaces and lines) to make the wiki source more readable and easier to edit. Your fellow wikians will love you for it (=participate more).

Use lists instead of tables*

Have a table you want to put on your wiki but afraid editing it will be too complicated for everybody? Consider converting the table to a list. For example, here's a snippet from a syllabus:

9/2/2005

Reading: Hacker 453-359, Griffith 500-503
Journal topic: Compare Hacker and Griffith's approaches to modernism
Quiz prep: The five key characteristics of modernism

If you'll be adding more "rows" in the future, think about putting a list "template" at the top or bottom of the page for users to copy, paste, and fill out. For the above example, one could use

Date

Reading:
Journal topic:
Quiz prep:

Add a guestbook

Pbwiki doesn't have this feature yet, but some of us here have gotten free guestbooks that work really nicely. Go to Steven Burn's website at UR I.T. Mate.

Looks

Adding blank lines to the viewed page

Pbwiki ignores extra carriage returns (enters) and spaces so adding extra space in between sections can force us to resort to the HTML <BR> command. A pbwiki master named Winfield found that this trick works without HTML needed.

If you include brackets with a space in the middle like this [ ] on a line by itself pbwiki will leave the line blank and not put a link or anything. So if you want to space something down by three lines just put:

[ ]
[ ]
[ ]

White-box-orama

Extend the indented white-box look (created when starting a line with blank space) over multiple separated paragraphs by putting a space on the line(s) between the paragraphs. Here's an example:

I was running to the bus for the umpteenth time this month. Life was taking a turn for the worse, and little things were making it obvious. I couldn't get out of bed in the morning, I couldn't get the peanut butter to spread without tearing the bread, I couldn't even get down the sidewalk without tripping.

This, oddly enough, was going to be an uncharacteristic day as I was soon to discover--one uncharacterized by anything that had come before and unlike anything that was to come afterwards. But first I had to endure the humiliation of sprinting down Main Street after the bus, glasses fogging over, backpack sending seering jolts of pain down my back with every other step.

Stylish Dividers Under Headers

Here's a real treat! A classy underline right below section headers without an awkward space between the two. Isn't it great? By vietmusic:

I wanted to have underlines that ran the length of the screen underneath the headings, producing a pretty and efficient heading. The problem is that if I included the <div> inside the heading, it showed up in the <toc> also, as an ugly underline. The solution I find was to write it on the line below and float it up to the right place, as shown here:

<div style="border-bottom: 1px solid black;margin-top:-15px"></div><div style="float:right;margin-top:-25px;"><top></div>

Incidently, that also includes a floated <top>, which is nice for longer articles.

see http://vietmusic.pbwiki.com/Editing%20Notes for an example

Removing the SideBar from some pages.

tip from vietmusic at http://vietmusic.pbwiki.com

<script language="javascript">
document.getElementById("SideBar").style.display="none";
</script>

put it at the very bottom, and it'll get rid of the SideBar.

Editing CSS

For premium users only. You can edit your CSS styles and upload a file into your "Files". See http://pbwiki.com/cssfaq.php for the official FAQ.
See also, the CssSnippets page for actual CSS snippets that do specific jobs.

For more help on your CSS, see also the new Sticky titled, Understanding Your CSS - Some Helpful Links, in the Tips Forum at http://Yummy.PBWiki.com

Using HTML

Remove white space from HTML

White space is the extra blank space (spaces and empty lines) that most people add to code to make it more readable. PBwiki normally interprets white space by, for example, replacing newlines with XHTML breaks (<br \>). Unfortunately, this causes a problem when it comes to inserting your own code: the breaks, etc. that PBwiki adds prevent browsers from being able to understand what you intended. Various freely available programs can, however, remove white space easily from an existing HTML page; a good example of this is the freeware program HTML Compress.

Forcing links to open in a new browser window

To force a single link to open in a new browser window, use <a href="url" target="_blank">.
To force all the links on a page to open in new windows, you can add <base target="_blank"> to the first line of the wiki page. While invalid HTML, it should work in most--if not all--browsers.

Redirecting visitors from one page to another

This is a great boon to people who aren't particularly fond of their FrontPage as the opening or Home page of their wikis. jmcnichols has come up with a brilliant way to get around the dilemma of wanting to have a main page that you could name as you please (since you cannot rename the FrontPage):

<meta http-equiv="refresh" content="1; url=ENTER PAGE NAME HERE">

where 1 is the time in seconds before redirecting. I set mine to 3 and used the FrontPage to notify the visitor of the redirect, allowing them to click through it if they preferred. The page code:

<meta http-equiv="refresh" content="2; url=Home">
<br>

You will be automatically redirected to this wiki's Home Page in two seconds.

If that isn't fast enough for you, click [Home|here].

Links with no underline and changing the link color

From David Weekly: this is a link
<a href="http://yummy.pbwiki.com/" style="color:red; text-decoration:none;">this is a link</a>
PBwiki/HTML hybrid code:

This takes you to PBwiki Central's FrontPage

[FrontPage|<div style="text-decoration:none;">This takes you to PBwiki Central's FrontPage</div>]

with color:

This takes you to PBwiki Central's FrontPage

[FrontPage|<div style="text-decoration:none;"><font color=blue>This takes you to PBwiki Central's FrontPage</font></div>]

Getting noticed by social networks

You can add some links to your public wiki that will allow visitors to recommend it. The code for the recommend links is on the SocialLinks page.

Advertisement free search box for your wiki visitors

A friend told me that the normal search box on wiki's doesn't work unless you are logged in as an editor of the wiki. Naturally, this can't be done by visitors. You can add this code to your wiki for visitor searches. It will only work if Google has indexed your wiki. The code is at ScroogleSearch.

Colored cells in html tables

Here is some sample code for colored table cells.

<table><tr><td style="background-color:blue"><font color="white">Colored table cells?</font></td><td style="background-color:brown"><font color="yellow">You have to use a style attribute.</font></td></tr></table>

Colored table cells?

You have to use a style attribute.

Add clickable picture links

You can add pictures that are links to other wiki pages or other places on the net. Some sample code is shown below, using either mixed wiki code and html or pure html. These examples assume you have uploaded the picture to your wiki.

[http://this.url.com|<img src="/f/thisPicture.jpg">]

Also for thumbnails linked to a fullsize picture.

This code is ONLY for the images hosted/uploaded at your wiki. Also, you can 'tweak' this code to work with outside image hosting, if you have the correct URL. The URL would go inside "the brackets", instead of the file /f/path as shown, below.

This code should work in most browsers :
(Replace your file/picture names where 'fullsize' and 'thumbnail' are, accordingly)

Wrapping text around pictures

We have to use HTML to get this to work. See WrapTextAroundPicture for an example.

Put the TOC in a table

Here's the code for put the Table of contents, or <toc> command into a table beside some text. Tip from Bill Clark.

<table><tr><td>Text of your page
continue
continue
continue
continue
continue
done.
<td valign=top><toc!!!></table>

Adding footnotes denoted by an asterisk

Abernaith came up with some code that works for footnotes.

I made a footnote using html...

http://abernaith.pbwiki.com/Fanfiction_GO-AnS#ftn.01

Here's the code for my footnote: (it's only an asterisk. haven't bothered to figure out how to make it with other characters, or multiple characters though.)

On the text: blah blah blah<sup><a name="1" href="#ftn.01">*</a></sup> And on the bottom of the page: <div class="footnote"><p><sup><a name="ftn.01" href="#1">*</a></sup>more about blah blah blah

Maybe you can try this in your Sandbox, see how you like it.

Adding a calendar

See the SimpleCalendar page which uses WikiStyle code.
Here's the code for the new and fantastic calendar plugin for pbwiki.

---

Usability Tips

Finding hot pages quickly

Here's a tip from Larry in the forums.

Over the years I developed a simple shorthand method to mark sections within my files that I want to find fast. I use "plus" symbols.

Let me explain: As you add pages and data to your PBwiki it may get harder to find things, particularly if you work on a number of projects at the same time.

I mark my "Hot" entries, or a section of a page I want to find quickly with a variation of a priority scheme. I use two to five + signs, as in +++++. The more plus signs, the higher the priority.

Then I use the PBwiki search box to find them.

The cool thing is you can copy the resulting URL of the PBwiki search and save it as a link in the SideBar (or elsewhere). It a makes finding things a little faster.

example:

[http://YOUR_WIKI.pbwiki.com/FindPage?SearchFor=%2B%2B%2B|Find +++]

You get the idea. Voila!

Top

*This was written before the addition of super simple WikiStyle tables--you might want to give them a try first :)

PBwiki Central

PBwikiTips