Table of Contents <toc> Text size Fonts Color Links Escaping code (or using wiki special characters as normal characters) Indenting paragraphs Blank space between sections Enhanced SideBar

 

 

 

This page is a continuation of WikiStyle. It contains formatting tips for a little more control, including some basic HTML. (HTML is wiki supported, but, except for simple commands, like <small> [see 'Text size' below]. You might want to use simple commands so people don't have to wade through too much code.)

 

 

 

Table of Contents <toc>

Note: toc is also a plugin when you are using the Point and Click editor. The instructions here are for the Classic Editor.

 

A page's table of contents can be generated and inserted anywhere within that page by using <toc>.

 

 

 

While in edit mode, place <toc> at the top of the page (or just above where you have a list - ONLY ONE <toc> PER PAGE. ).

 

<toc> allows all title case(s) and subtitle cases (using !, !!, or !!!) <--- This is the easiest setting, since it allows all toc settings.

<toc!> allows only title case(s) (one !)

<toc!!> allows title cases and the next subtitle cases (two !!)

<toc!!!> is the same as <toc> both of these allow all settings (using !, !!, or !!!).

 

Place ONE exclamation mark before the 'your title word(s) or phrase' that you want to appear in the toc;

Place TWO exclamation marks before the 'your subtitled word(s) or phrase' that you want to appear in the toc;

Place THREE exclamation marks before the 'your sub-subtitled word(s) or phrase' that you want to appear in the toc.

(You do not need any spaces between exclamation marks and words.)

 

Type your titles like these EXAMPLES, without any spaces or special HTML ...

 

!Title Case EXAMPLE (ONE ! (exclamation mark) placed before or against title word(s) becomes a title case.)

!!Subtitle EXAMPLE (TWO !! placed before/against title word(s) becomes a subtitled case (this auto-indents under the title case.)

!!!Sub-subtitle EXAMPLE (THREE !!! placed before/against title word(s) becomes a sub-subtitled case (this auto-indents under the subtitle case.)

 

Your toc should look like this ...

 

 

 

 

Text size

• Smaller letters/words can be made by adding <small> before them and </small> after them.
• Larger letters/words can be made by adding <big> before them and </big> after them.
• For a larger section of text (like a list or page), use <div style="font-size:smaller;"> (or <div style="font-size:larger;">) before the text and </div> after. For more control, substitute a percentage for the word "smaller" or "larger" (for example, <div style="font-size:90%;">).
• Use font size commands, like this: <FONT size=2>and close with </FONT> or, like this:<font size=3> and remember to close the </font> command - using the same capitalization at each end of the command.

 

 

 

Fonts

• Change the look of text "to fit the occasion" <FONT FACE=Verdana size=3> or, "to fit your mood" <FONT FACE="Times New Roman" size=3>.

 

 

 

Color

• One way to make letter/words colored is to add <span style="color:COLOR;"> before them and </span> after them. Insert one of the following words for "COLOR": black, silver
  (silver), gray (gray), white (white), maroon, red, purple, fuchsia, green, lime (lime), olive, yellow (yellow), navy, blue, teal, or aqua (aqua). Use <div> instead of <span> if you're trying to make a section (instead of just a word or sentence) a different color.
• Use font color commands, like this: <FONT color=navy>. Font commands can be compiled or separate commands: <FONT color="#3300FF" size=2> and remember to close the </FONT> command.

 

 

 

Links

• You can link to a section on a page by placing a # between the name of the page and the name of the section. Omit any spaces and punctuation (including parentheses) from the section name. For example, you can link directly to the "Text formatting" section on the WikiStyle page by typing [WikiStyle#Textformatting]: WikiStyle.

 

 

 

Escaping code (or using wiki special characters as normal characters)

• You can escape code with <verbatim> (longer sections) or <raw> (shorter sections) tags.

  For example, to use square brackets in a sentence, you would write <raw>[blah blah]</raw> to appear as [blah blah]. Otherwise, you would see blah blah like this, which appears as a broken wiki-link when it is not a link at all.

 

 

 

Indenting paragraphs

• To indent a paragraph, put <p style="text-indent:10px;"> before the paragraph and </p> afterwards. Vary the number of pixels (here 10) to increase or decrease the indentation.
• You can also opt for the <ul> tag for "unordered list". Usually it's for making lists that use bullets instead of numbers or letters, together with the <li> tag. Here's an example:

 

CODE:

Shopping List

<ul>
<li>macaroni & cheese</li>
<li>small bag potatoes</li>
<li>six-pack Dr. Pepper</li>
</ul>

 

LOOKS LIKE THIS:

Shopping List

• macaroni & cheese
• small bag potatoes
• six-pack Dr. Pepper

But the <ul> tag itself can also be used to indent paragraphs, or even lots of paragraphs. Take a look at this code intended for two paragraphs:

 

CODE:

Random News
<p>
<ul>I like chicken lasagna.</ul>
<ul>Tomorrow is my birthday.</ul>
</p>

LOOKS LIKE THIS:

Random News

I like chicken lasagna.

Tomorrow is my birthday.

 

Teaming <ul> with <p> makes for neater, less complicated indentations. A pleasantly surprising side-effect is that you don't need to worry about spaces between paragraphs, as <ul> allows for a little margin top and bottomwise, which ultimately makes life a little easier. :)

Blank space between sections

• One way to add blank space between sections is by placing (one or more) <br /> between them.
• A slightly more complex way is to use a margin at the top of one section (or at the bottom of the other, or at both the top and the bottom of sections). To achieve more or less separation with the following examples, vary the number of pixels.
  • To add a margin to the top of a section, one could put <div style="margin-top:30px;"> before it and </div> after it.
  • To add a margin to the bottom of a section, one could put <div style="margin-bottom:30px;"> before it and </div> after it.
  • To add a margin to the bottom and top of a section, one could put <div style="margin-top:15px; margin-bottom:15px;"> before it and </div> after it.

Enhanced SideBar

Currently available on Educational Wikis, the Enhanced SideBar offers three tabs: QuickStart, RecentActivity, and SideBar

• Two of these tabs can be edited: QuickStart and SideBar. The SideBar is actually the old version SideBar with some changes (for example, it is now white).
• Changes to all of these tabs are made in the SideBar page
• To change the background color (this one is light green):

  • Code:
    <style><raw>
    #displaycontent div.sidebar_v2 {
    width:225px;
    background:#eaf3d9;
    }
    </raw></style>
    

• To change the names of the tabs :

  • Code:
    <script>
    function switchTitles(obj) {
    var tags = obj.getElementsByTagName('a');
    for (var i=0;i<tags.length;i++) {
    if (tags[i].title) {
    if (tags[i].title.indexOf('QuickStart')!=-1) tags[i].innerHTML = qs_new;
    if (tags[i].title.indexOf('Recent Activity')!=-1) tags[i].innerHTML = ra_new;
    if (tags[i].title.indexOf('SideBar')!=-1) tags[i].innerHTML = sb_new;
    }
    if (i>2) break;
    }
    }
    var qs_new = 'Your';
    var ra_new = 'Own';
    var sb_new = 'Input';
    switchTitles(document.getElementById("sb_qs"));
    switchTitles(document.getElementById("sb_ra"));
    switchTitles(document.getElementById("sb_sb"));
    </script>
    

 

• To make the whole thing disappear on certain pages:

  • Code:
    <script>
    document.getElementById('sb_qs').style.display = "none";
    document.getElementById('sb_ra').style.display = "none";
    document.getElementById('sb_sb').style.display = "none";
    </script>
    

 

(Code from vietmusic at http://vietmusic.pbwiki.com via forums)

 

 

Top