You are here: Foswiki>Sandbox Web>WikiUsers>JamesNoakes>JamesNoakesSandbox>ExamplesPage (03 Apr 2009, JamesNoakes)

Examples Page

Bulleted List Example
Numbered List Example
Opening Links
Tips & Tricks
Tables and boxes
Text styles
Calendar
Editable Table
Editable Table Input Gathering Form
Input Gathering UserCommentsTemplate Code

Here are useful examples and templates:

Bulleted List Example

Point 1
Point 2
- Sub Point a
  - Sub Point b

Numbered List Example

First Item
Second Item
Third Item

Opening Links

To open a link in a new browser click here

To open a link in the same browser click here.

Click the globe to open in a new browser, or to open in the same browser click here

Tips & Tricks

This topic has loads of tips: TWikiTipsOfTheDay

To indicate that text is not a Wikiword/Topic prefix it with a !

Hence rather than seeing VoIP? you see VoIP

Insert a Table of Contents with this code: %TOC%

Add comments to your wiki code using this format:
```

```

Here is the code for a comment box:

%COMMENT%

Here is the code for a bullet box:

No such template def TMPL:DEF{PROMPT:bulletwsig}

Tables and boxes

Here is the code for an editable text box:

#	Description	Fruit
1.	Item 1	Apples
2.	Item 2	Pears
3.	Item 3	Oranges
4.	Item 4	Grapes
5.	Item 5	Bananas

Here is an example of the Table PlugIn with pull down boxes
Type:
Level:
Date:
Title:
Description:
Entered By :		on...

Here are 3 different table examples:

Here is example number 1

Here is example number 2	Here is column 2 in example number 2
Here is Row 2 Column 1	Here is Row 2 Column 2

Here is example number 3


Here is example number 3

Text styles

You can write in bold or in small font

You can write blue text or green text etc.

alternatively...

You can also use the up-to-date style attribute - ex: style="color:#ff0000" - placed in most HTML tags. span is an all-purpose choice: "CoLoR. Only old (like 3.x IE & NS) browsers have a problem with style.

"colorCode" is the hexadecimal RGB color code, which is simply Red, Green and Blue values in hex notation (base 16, 0-F). For pure red, the RGB components are 255-0-0 - full red (255), no green or blue. That's FF-0-0 in hex, or "#ff000=" for Web page purposes. For a basic color selection (you can StandardColor names instead of hex code in the =font tag only):

Black: "#000000" Green: "#008000" Silver: "#c0c0c0" Lime: "#00ff00" Gray: "#808080" Olive: "#808000" White: "#ffffff" Yellow: "#ffff00" Maroon: "#800000" Navy: "#000080" Red: "#ff0000" Blue: "#0000ff" Purple: "#800080" Teal: "#008080" Fuchsia: "#ff00ff" Aqua: "#00ffff"

You can enter Red colour or you can: write this text in blue if you wanted to.

Warning: Can't find topic Main.InstructionBox

And block quote

Calendar

Here is a very useful Calendar form:

The code requires %INCLUDE{"JSCalendarInLineCode"}% to be added at the top of the Wiki page

More info can be found here

Editable Table

Entered By	Entered On	Option	Level	Date (yyyy/mm/dd)	Opportunity Title	Opportunity Description
JamesNoakes	2009/03/25	Opt 2	Level 1	2009/03/01	Test 1	Test 1 Description
JamesNoakes	2009/04/02	Opt 1	Level 3	2009-04-01

Editable Table Input Gathering Form

No such template def TMPL:DEF{PROMPT:Infogathering}

The above form is based on the following code which should be added to the UserCommentsTemplate Topic:

Input Gathering UserCommentsTemplate Code

Gather information

%TMPL:DEF{PROMPT:Infogathering}%
%TABLE{ valign="top" }%
| <b>Add a new Opportunity to the table above</b> ||||
|  Type: | <select %DISABLED% id="Type" name="Type"> \
<option value="Opt 1" selected="selected">Opt 1</option> \
<option value="Opt 2">Opt 2</option> \
<option value="Opt 3">Opt 3</option> \
</select> |||
|  Level: | <select %DISABLED% id="Level" name="Level"> \
<option value="Level 0">Level 0</option> \
<option value="Level 1">Level 1</option> \
<option value="Level 2">Level 2</option> \
<option value="Level 3" selected="selected">Level 3</option> \
</select> |||
|  Date (yyyy/mm/dd): | <input type="text" id="cal_val_here3" name="Date" /> <input type="image" src="%PUBURL%/%TWIKIWEB%/JSCalendarContrib/img.gif" onclick="javascript: return showCalendar('cal_val_here3','%Y-%m-%d')" /> |||
|  Opportunity Title: | <input %DISABLED% type="text" size="80"  name="OpportunityTitle" value="" /> |||
|  Opportunity Description: | <input %DISABLED% type="text" size="80"  name="Opportunity Description" value="" /> |||
|  Entered By : | <input %DISABLED% type="text" size="30" name="EnteredBy" value="%WIKIUSERNAME%" /> | &nbsp; on... <input %DISABLED% type="text" size="12" name="EnteredDate" value="%SERVERTIME{$year/$mo/$day}%" /> | &nbsp; <input %DISABLED% type="submit" value="%button|Add%" /> |
%TMPL:END%

%TMPL:DEF{OUTPUT:Infogathering}%%POS:BEFORE%| %URLPARAM{"EnteredBy"}% | %URLPARAM{"EnteredDate"}% | %URLPARAM{"Type"}% | %URLPARAM{"Level"}% | %URLPARAM{"Date"}% | %URLPARAM{"OpportunityTitle"}% | %URLPARAM{"Opportunity Description"}% |
%TMPL:END%