Transnotes Wiki

 

Style Notebook

Page history last edited by Julio Juncal 2 yrs ago

This page contains code useful to style this wiki. Do not delete.

 



PBwiki Coding - For the terminally lazy

OK, so you don't like to get your hands dirty, and you don't

want to do coding. No problem.

 

The basic stuff can all be done by clicking the appropriate

buttons on the toolbar while you're in editing mode. It looks

similar to the formatting bar in Word.

 

No, it's not WYSIWYG -- far from it, in fact, since you'll

see the code it inserted for you -- but at least you don't

have to worry about remembering what code does what.

 

To input new text, here's what you do:

 

  1. Click on the "Edit page" button at the top of the page.

  2. Once you're in editing mode, you'll see the window where

    you type your text.

  3. Once you finish typing your text, or while you're at it, apply

    formatting by selecting the text you want formatted and then

    clicking on the appropriate formatting button on the toolbar

    at the top of the editing window.

    Formatting available via the toolbar buttons:

    bold, italic, underline, strikeout, bulleted list, numbered

    list (like this one), horizontal line, table and centered text.

  4. Periodically, or at least at the end of your input, click on one

    of the "Preview" buttons on the top or bottom left-hand side

    of the editing window to see what your text will look like.

  5. Finally, click on the "Save" button, also found on the bottom

    left-hand side of the editing window, to save your work and

    exit editing mode.

  6. That’s it! "Easy peasy," as the "Naked Chef" always says. ;-)

 

To edit existing text, just follow the steps listed above. There’s

one big difference, though: you’ll see the previously entered text

with its codes. The persons who edited the page before you may

have used more advanced code than what's available via the

formatting toolbar, and they may have also used HTML code, so

be very careful to make sure you don’t accidentally delete those

codes -- unless you mean to delete the formatting in question,

that is...


PBwiki Coding - Basics

 

If you like to get your hands a bit dirty, you'll find that

coding some basic formatting is really very easy in PBwiki!

 

I'll show you the code, in case you want to input it manually

as you type your text, but remember that the basic stuff can

be done by clicking the appropriate buttons while you're in

editing mode, as explained in the previous section.

 

Ready? Here we go!


Underline, bold, italic, highlighting

 

To get underlined text, type this:

__underlined__

 

For bold, the code is:

**bold**

 

And for italics, try this:

''italics'' (that's two apostrophes before and after, not quotes)

 

A kind of highlighting of words and phrases, like this,

can be achieved simply by coding this:

|like this|


Mixing styles

Now, let's get bold and fancy, and mix it up with those styles!

 

both underlined and bold

__**both underlined and bold**__

 

bold, italic, and boxed!

**''|bold, italic, and boxed!|''**


Bulleted and numbered lists

And now for a bulleted list:

 

  • first level
    • second level
      • third level
  • back to first

 

* first level

** second level

*** third level

* back to first

 

And a numbered list:

 

  1. line one
    1. line two
      1. line three
  2. line four

 

Looks like this under the hood:

 

# line one

## line two

### line three

#line four


PBwiki Coding - Intermediate to Advanced

 

HTML Reference

 


Superscript

 

<sup>1</sup>


Aligning pictures with wraparound text

 

<img src="http://static.flickr.com/59/212942190_8f6c74ebe4_m.jpg" align="left" hspace="20">

 

The operative part of the code, for alignment, is this: align="left" hspace="20"


Styling Footnotes

 

For the footnote reference:

 

<A href="#_ftn1" name=_ftnref1><sup>1</sup></A>

 

For the footnote text:

 

<A title="" href="#_ftnref1" name=_ftn1><sup>1</sup></A>


Code for boxes

 

<div style="margin-left:35px;"> <span style="font-size:1.1em; font-weight:bold;">Date</span> **Reading:** **Journal topic:** **Quiz prep:** </div>

 

Some random text

This text is in a separate callout,

since it has a space in front of it.

 

 

David Weekly made this.

 

http://coceve.com/ is his company.


Copyright symbol

 

How to make a Copyright C Symbol on a PC Keyboard (©):

 

Hold down Ctrl and Alt at the same time and press CCtrl+Alt+C


Alternative code for tables

 

Use this code:

 

<table border = "1"> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </table>

 

to get this:

 

Cell ACell B


Pictures

 

Here's the code:

 

[http://pbwiki.com/sandwch2.jpg]


 

Definition Lists

 

Definition lists are a cool HTML formatting tool. I am using one here to indent this text from the heading directly above. As the name implies, they are intended for lists of terms and definitions, but you may find them useful for formatting dialogue, FAQ’s or other uses. The basic format is:

<dl> <dt> Term 1 <dd> Definition 1 <dt> Term 2 <dd> Definition 2 </dl>

 

which looks like this:

 

Term 1

Definition 1

Term 2

Definition 2

 

 


 

Linking words to Answers.com

 

You can easily link words, names or phrases on your site to Answers.com explanations, as in the following examples:

 



Template for Input

 

In edit mode, copy the block below from "!! Tool" to "<top>" (inclusive) and paste it at the appropriate place on this page, then:

  • replace "Tool" with the name of the tool
  • replace the "x" in the fields with the pertinent information
  • "Web Site" row: input the URL where indicated.

 

Tool

 

Description x
Trial x
Price x
Web Site URL
Forums/Lists GroupName mailing list at x
Updated x
Reviews Found here

 

views

Comments (0)

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