You are here: CFCL Wiki>Help Web>WikiTut>WikiTutTricks (27 Apr 2011, vlb)Edit Attach

Wiki Tricks

(If you got here via search, you may prefer to start at the Wiki Tutorial page.)

By default, Wiki automatically links anything that looks like a link. This includes anything that starts with http://, email addresses containing @, or WikiWords. To make it obvious that something is a link, wrap the URL, email address, or WikiWord in double brackets: [[....]]. The double brackets also allow you to rename the linked text. Note: double brackets are required if Wiki auto-linking is turned off.

Examples:
  • [[WikiTut]] - a page in the current Wiki web
  • [[WikiTut][The Tutorial]] - a page in the current Wiki web, with customized link text
  • [[WebFoo.WebHome]] - a page in the current Wiki web, specifying another web
  • abc@company.com - a clickable email address (easy; see below)
  • [[mailto:abc@company.com=][send me mail]] - a clickable email address with customized link text
  • http://twiki.org - a clickable URL (easy; see below))
  • [[http://twiki.org][The TWiki.org home page]] - a clickable URL with customized link text

You can define a link reference (also known as an anchor name) within a Wiki topic and link to that. To define an anchor write #AnchorName at the beginning of a line. The # is required; the anchor name must be a WikiWord. To link to an anchor name use [[TopicName#AnchorName]] or [[TopicName#AnchorName][Click here]]. You can omit the topic name if you are linking to an anchor within the same topic, e.g., [[#AnchorName][Click here]].

By default, all Wiki headers become anchors. Spaces are replaced with _; extra punctuation is removed. For example, this section can be reached as http://wiki.cfcl.com/bin/view= to get the same result. The Wiki.BugzillaLinkPlugin provides a shorthand for bug links, plus it places a nice "bug" icon next to the bug: %BUG{123}%

Alternatively, use
[[Bug:123]]
(no "bug" icon).

Include Bugzilla Summary Data

Demo of how to use %INCLUDE% variables to grab an Bugzilla summary table and include it in a Twiki page, with a bit of css to make it pretty.

Pages With Style

Styled Text

Highlight keywords in bold, italic, or even bold italic. Highlight computer text and commands with a monospaced (fixed-width) font.

Every Wiki edit page has formatting help at the top.

Colored Text

Many colors (e.g. RED , BLUE , PURPLE ...) are defined as Wiki variables in DefaultPreferences.

%RED% RED %ENDCOLOR%, %BLUE% BLUE %ENDCOLOR%, %PURPLE% PURPLE %ENDCOLOR%

Dingbats (those cute little graphics)

HELP TWikiPreferences defines easy variables for many small icons or dingbats that you can use on your pages. ALERT!

  • %H%   HELP
  • %I%   IDEA!
  • %M%   MOVED TO...
  • %N%   NEW
  • %P%   REFACTOR
  • %Q%   QUESTION?
  • %S%   PICK
  • %T%   TIP
  • %U%   UPDATED
  • %X%   ALERT!
  • %Y%   DONE

You can add new variables to get to your favorite images. These are popular:

   * Set Red = %ICON{led-red}%
   * Set Yellow = %ICON{led-yellow}%
   * Set Green = %ICON{led-green}%

Then, when you use %Red% you get led-red.

Be careful NOT to use ALL CAPS. Do not override %RED%, %YELLOW%, or the other ore-set color variables.

See Wiki Doc Graphics for an even larger set of available images (not all have special variables defined).

Override Page Styles

Wiki "skins" (PatternSkin unless you've changed it) are predefined to have a set of styles - headers are a certain size and color, etc. If you don't like the look, however, you can change it. Wiki (and PatternSkin) are customizable - across webs, pages, or just one or two words.

You can control font, size, and colors, along with other styles of a page (or set of pages), by specifying your own CSS styles or stylesheets. You can make small "surgical" changes by using the CSS <div> or <span> directives. If you want to use a style in many locations, define a class. If you're unfamiliar with CSS, there are many books and tutorials available. Try one of these:

Overriding the Default Stylesheet

The default Wiki skin is called PatternSkin. It's CSS-based and tweakable.

If you want to make a lot of changes, you can include your own stylesheet, overriding (or adding to) the regular CSS styles for the Wiki "skin". A user stylesheet can be specified for an entire web (use caution!) or for a single topic page. Here's how to add your own CSS stylesheets to modify the default (PatternSkin) stylesheets (c.f. Pattern Skin CSS Cookbook)

  • Create a CSS file with your changes.
  • Give it a name that indicates what it is, e.g. blueheaders.css.
  • Attach it to a topic
  • Then, in every topic where you want to use those styles, set the USERSTYLEURL variable appropriately:
   * Set USERSTYLEURL = %PUBURLPATH%/%INCLUDINGWEB%/TopicWithStyle/stylefilename.css

Watermarks (Background Images)

If you want a page to be marked specially, e.g. as "DRAFT", "BETA", or "DEPRECATED", you can add a watermark (stamp) by specifying a background image for the page using CSS.

(Note: You cannot have dynamic (image) references in an external file (i.e. /pub/Help/WikiTutCSS will not be resolved). The path must either be hardcoded in an external css file, or written directly into the content of a topic.)

Instructions and Example:
  • Attach the image file to this topic, WikiTutCSS.
  • Edit the page for the topic that will be using the different background.
  • Add the appropriate CSS code, e.g.
   <style type="text/css" media="all">
     .bgrnd-deprecated {
        background-image:url("%PUBURLPATH%/%INCLUDINGWEB%/Help/WikiTutCSS/deprecated.gif");
     }
   </style>
  • Then wrap the page text in
    tags.
   <div class="bgrnd-deprecated">
   ---+ Header ...
   ...
   </div>

Or, do it this way
<div style="background-image: url('%PUBURLPATH%/Help/WikiTutCSS/deprecated.gif');">
   ---+ Header ...
   ...
   </div>

Example

See an example page.

Tip: Set Variables

For example, to make deprectaing pages easier, you can define a DEPRECATE variable. Then use
    %DEPRECATE%
    text to be highlighted
    %ENDDEP%
to mark part (or all) of a page as deprecated.

Font Size and Style, Highlighting, ...

Standard CSS works anywhere in Wiki. See WikiTutCSS for more examples.

Color Cells in a Wiki table

Add color to your table data with CSS.

You can also trigger a color change in a table based on cell content (e.g. status)! See WikiTutColorTable for details.

Status Item
Yellow One
Green Two
Red Three

Override the Top Bar

Override the Left Bar

Using Variables

Variables are set using

  • Set VARIABLE = Value

Note that the format must be followed exactly. Each "Set" command is a bullet list item
  1. three spaces (or six or nine or...)
  2. *
  3. one space
  4. Set VARIABLE = value

Wrap Variable Settings in HTML Comments

If you don't want to have them show up on the final page, wrap your Wiki variable "Set" commands inside an HTML comment, as:

<!--
    * Horizontal size of text edit box:
       * Set EDITBOXWIDTH = 80 
-->

Custom Variables

You can create and set custom variables using the same syntax as above for Preference variables. Here are some examples:
    * Set CHK = <img src="%ICONURL{checkmark}%" alt="check" width="16" height="16" />

   * Set ST_PENDING = <span style="background-color: #FFFF33;">      
   * Set ST_IN_PROGRESS = <span style="background-color: #00FF33;">
   * Set ST_FLAGGED = <span style="background-color: #FF6633;">
   * Set END_ST = </span>

   * Set HILITE = <span style="background-color: #FFFF66;">
   * Set HILITE_YELLOW = <span style="background-color: #FFFF66;">
   * Set HILITE_GREEN = <span style="background-color: #6F6;">
   * Set HILITE_BLUE = <span style="background-color: #00FFFF;">
   * Set HILITE_PINK = <span style="background-color: #FFCCFF;">
   * Set HILITE_PURPLE = <span style="background-color: #EEDDFF;">
   * Set ENDHI = </span>

   * Set STRIKE = <span style="text-decoration: line-through;">
   * Set UNDER = <span style="text-decoration: underline;">
   * Set ENDSPAN = </span>

   * Set DEPRECATE = <div style="background-image: url('%PUBURLPATH%/Help/WikiTutCSS/deprecated.gif');"> %GRAY%
   * Set ENDDEP = %ENDCOLOR% </div>

   * Set INDENT = <span style="margin-left: 40px;">
   * Set ENDENT = </span>

   * Set TEMPLATECHK  = %CALC{"$IF($FIND(Template, %TOPIC%),$NOP(%)INCLUDE{%WEB%.BoilerplateTemplateStop}$NOP(%))"}%
   * Set TEMPLATECHK_EDIT = %CALC{"$IF($FIND(Template, %TOPIC%), $NOP(%)INCLUDE{BoilerplateTemplateStop}$NOP(%), [[%SCRIPTURL{"edit"}%/%WEB%/%TOPIC%?action=form][Edit form data]] )"}%

Override the Window Title

By default, Wiki uses the topic name (as shown in the URL) for the title shown in the Browser window. Most of the time, this is acceptable. But if the page has a name like ProjectDetail20080321r5 or TeamContactPage7 you could wish for something more obvious. This works especially well for pages created by Wiki applications.

We've installed a "skin cover" that allows you to choose what to display as the page title.

  • Be sure to enable the skin in your web's WebPreferences topic:
      * Set SKIN = mediaops, pattern

Then, in any page where you want to control the title, add something like this:
   <!--
      * Set TOPICTITLE = My Customized Title
   -->

Example:
   <!--
      * Set TOPICTITLE = %FORMFIELD{"PersonName"}% %TOPIC%
   -->

How Old is this Page?

Personalize Your Experience

Create a Personal Sidebar

screenshot Click the "create" link in the left sidebar to customize Wiki with your own personal navigation links. You'll be provided with a default "personal" LeftBar page which you can save as is or edit to taste.

  Customise this topic; ...

  %STARTINCLUDE%
   * *My links*
   * [[Main.VickiBrown][My home page]]
  <div class="twikiSmall">
  <a href="/bin/edit/Help/%TOPIC...">;edit</a>
  </div>
   * Searchexec.WebHome
  %STOPINCLUDE%

Hey, that's cool! Can I replace the "standard" side bar with just my own?

Yes; read how...

Set Preference variables

As mentioned above, the Wiki has many Preference variables that you can configure. You'll see some of these on your Wiki home page, e.g.

    * Horizontal size of text edit box:
       * Set EDITBOXWIDTH = 80 
    * Vertical size of text edit box:
       * Set EDITBOXHEIGHT = 40 
    * Release Edit lock (always)
       * Set RELEASEEDITLOCKCHECKBOX = checked="checked", 

Personalize Your Home Page

Every Wiki user has a personal Home Page. You can add links, clippings, sample Wiki code, your schedule... anything you want.

Make Editing Easier

Use a Fixed-width Font

It can be easier to proofread what you've written in a fixed-width font. Also, because Wiki uses spaces to control formatting, e.g. in bullet lists, using a fixed width font can help you avoid mistakes.

Check the lower right-hand corner of any Wiki "edit" page and you should see two small "buttons", each containing the letter "i" - one in monospace font and the other in proportional font. Click the monospace "i" and your text area will change to use a fixed-width font.

screen shot

For more control, set the EDITBOXSTYLE preference variable in your home topic.

    * Style text edit box:
       * Set EDITBOXSTYLE = width: 99%; font-family: monaco, monospace; font-size: 110%; font-weight: 600; 

vim

A vim syntaxfile for Wiki is hosted at sourceforge (http://sf.net/projects/vim-twiki). Install the syntax file locally under
   /usr/local/share/vim/vim62/syntax/twiki.vim
You can create a vim alias to set the syntax type automagically when editing a Wiki file, e.g.
          alias viki='vim -c ":se syntax=twiki" $*'

Or, use the -u option to vim to force reading a special .vimrc (details left as an exercise to the student). Run man vim for details.

What's New?

Get Notification by Email When a Topic Changes

Wiki.MailerContrib, an upgrade to the standard Wiki notification system, supports per-topic notification. This means that it's possible to subscribe for notifications for only those pages you care about and not the entire contents of a web. Just add your Wiki username and the list of topics you want to receive notifications for, to the WebNotify topic of your web.

Examples:
   * VickiBrown: EngineeringLibrary, News*
   * vlb@company.com: AllNews

The page to edit for requesting Help web notifications: WebNotify

Additional info and technical details can be found at: WebChangesAlert and MailerContrib

Topic attachments
I Attachment Action Size Date Who Comment
Fixed_width_text.jpgjpg Fixed_width_text.jpg manage 3 K 17 Aug 2007 - 20:18 VickiBrown screeenshot
create_personal_sidebar.jpgjpg create_personal_sidebar.jpg manage 33 K 17 Aug 2007 - 20:17 VickiBrown screenshot
firefox_twiki_addon.jpgjpg firefox_twiki_addon.jpg manage 10 K 17 Aug 2007 - 20:17 VickiBrown screenshot
Topic revision: r29 - 27 Apr 2011, vlb
This site is powered by Foswiki Copyright © by the contributing authors. All material on this wiki is the property of the contributing authors.
Foswiki version v2.1.6, Release Foswiki-2.1.6, Plugin API version 2.4
Ideas, requests, problems regarding CFCL Wiki? Send us email