Quick Tutorial: Help with Editor

[walkinTas]

The editor in phpbb is very basic, but if you are new to forums, or haven't used text markup before, then this little tutorial might help you get started. Hopefully the following examples will be easy to follow. Click these links if you are looking for a specific topic.

• Subject Line
• Fonts
• Quotes
• Code
• Lists
• URL
• Img
• Youtube

For more information on using the Editor, click on BBCode under the Smiles (in the Editor) where it says 'BBCode is ON'.

BBCode.png

You can also visit http://www.phpbb.com/community/faq.php

[walkinTas]

Subject

subject.png

Every new post must have a subject. When you reply to a post the subject line is automatically the same as the original post, but you can change it. Forum etiquette normally states that it is not polite to hijack a thread. Thread hijacking is the process of replying to an existing thread with an unrelated topic - going off-topic.

However, sometimes it may be useful to change the subject heading in a thread while staying on-topic. This whole topic is an example of different headings within the one overall topic.

[walkinTas]

Character Formatting

Code: Select all

[b]bold[/b] [i]italics[/i] [u]underline[/u] [s]strikethrough[/s]

bold italics underline strikethrough

These are straight forward and achieve the expected results. They can also be nested in any combination - just highlight the text and click the desired buttons.

Code: Select all

[i][b]bold and italics[/b][/i] [b][u]bold and underline[/u][/b] [u][i]underline and italics[/i][/u] or even [u][i][b]all three[/b][/i][/u] and with [b][i][u][s]strikethrough[/s][/u][/i][/b]

bold and italics bold and underline underline and italics or even all three and with strikethrough

Font Size

Code: Select all

[size=100]normal[/size], to [size=150]large[/size], [size=200]huge[/size], [size=85]small [/size]and [size=50]tiny[/size]

Using the drop-down list you can change the font size from normal, to large, huge, small and tiny.

Code: Select all

 [size=40]forty [/size], [size=50]fifty [/size], [size=60]sixty[/size], [size=70]seventy[/size], [size=80]eighty[/size], [size=90]ninety[/size], [size=110]110[/size], [size=120]120[/size], [size=130]130[/size], [size=140]140[/size], [size=175]175[/size] and [size=200]200[/size]

You can also use any other font size e.g. forty, fifty , sixty, seventy, eighty five, ninety, 110, 120, 130, 140, 175 up to 200. Type a number after the "size=" - not text.

Font Colour
Font colour is straight forward. Just click font colour and choose your favorite colour.

Code: Select all

[color=#8000FF]Blue Text[/color]

Blue Text

You can replace the colour code '#8000FF' with any RED (80) GREEN (00) BLUE (FF) code combination. Each colour can be any hexidecimal number between 00 and FF. e.g.

Code: Select all

[color=#A25683]this colour[/color]

this colour

[walkinTas]

Quoting
Most people wishing to quote another post would start their reply by clicking the "Quote button".

quote.png

If desired, you can then edit the quoted text before typing your reply. Just be careful not to delete the markup - the [ quote ][ /quote ] before and after the text. Etiquette again: editing quotes should be limited to removing some text or blank lines to make the quote smaller or to highlight the relevant part of the quote. Never add text. When removing text some people place three dots ... where the deleted text was, or some place the word [snip] to show that text has been deleted and this quote is a snippet of the original text.

Quoting text is simply a matter of highlighting the text to be quoted and clicking the quote button to wrap the text in markup.

Code: Select all

[quote]Quoted text[/quote]

Quoted text

Quoting a forum member (or anyone else) is simply a matter of adding the members name to the opening markup (or any other name).

Code: Select all

[quote="IMHO"]Quoted text[/quote]

Quoted text

Code: Select all

[quote="Plato"]Life must be lived as play[/quote]

Life must be lived as play

[walkinTas]

Code
There are examples of code blocks all the way through here. Placing text between the [ code ][ /code ] markup creates the monospaced text seen in the examples. This text can be highlighted with the 'SELECT ALL' button and copied & pasted at will.

[walkinTas]

Lists
Three buttons are provided to assist you to create itemised lists. [ list ][ /list ], [ list= ][ /list ] and [ * ] will created ordered and unordered lists as per the following examples.
Use [ list ][ /list ] to create a simple unordered list. Placing each item on a new line.

Code: Select all

[list]Plum
Apple
Orange
Grape[/list]

Plum
Apple
Orange
Grape

Using LIST like this can also be helpful if you just want to indent text.

Code: Select all

Some text in a paragraph. [list]An indented paragraph.[/list] Some more text in another paragraph.

Some text in a paragraph.

An indented paragraph.

Some more text in another paragraph.

Use the [ * ] button in association with [ list ][ /list ] to add bullets to your list. This is called an 'unordered' list.

Code: Select all

[list][*]Plum [*]Apple [*]Orange [*]Grape[/list]

• Plum
• Apple
• Orange
• Grape

You can also use the [ list= ][ /list ] in association with [ * ] to create an unordered list with a different bullet. e.g. a circle or a square. Disc is the default.

Code: Select all

[list=circle][*]Plum [*]Apple [*]Orange [*]Grape[/list]

• Plum
• Apple
• Orange
• Grape

Code: Select all

[list=square][*]Plum [*]Apple [*]Orange [*]Grape[/list]

• Plum
• Apple
• Orange
• Grape

Code: Select all

[list=disc][*]Plum [*]Apple [*]Orange [*]Grape[/list]

• Plum
• Apple
• Orange
• Grape

You can also use [ list= ][ /list ] in association with [ * ] to create an ordered list. You can have numbers [ list=1 ], upper or lower case letters [ list=A ], [ list=a ] or roman numerals in upper or lower case [ list=I ] [ list=i ]

Code: Select all

[list=1][*]Plum [*]Apple [*]Orange [*]Grape[/list]

1. Plum
2. Apple
3. Orange
4. Grape

Code: Select all

[list=a][*]Plum [*]Apple [*]Orange [*]Grape[/list]

1. Plum
2. Apple
3. Orange
4. Grape

Code: Select all

[list=A][*]Plum [*]Apple [*]Orange [*]Grape[/list]

1. Plum
2. Apple
3. Orange
4. Grape

Code: Select all

[list=i][*]Plum [*]Apple [*]Orange [*]Grape[/list]

1. Plum
2. Apple
3. Orange
4. Grape

Code: Select all

[list=I][*]Plum [*]Apple [*]Orange [*]Grape[/list]

1. Plum
2. Apple
3. Orange
4. Grape

You can also nest lists to multiple levels as shown below:

Code: Select all

[list=1][*]Plum [list=a][*]cherry [list=i][*]Opata [*]Alace [*]Heaver [*]Prolific [/list] [*]damson [/list] [*]Apple [list=a][*]Johnathan [*]Delicious [list=i][*]golden [*]red [/list] [/list][*]Orange [list=a][*]Naval [*]Valencia[/list] [*]Grape  [list=a][*]Sémillon [*]Pinot Noir [/list][/list]

1. Plum
   1. cherry
      1. Opata
      2. Alace
      3. Heaver
      4. Prolific
   2. damson
2. Apple
   1. Johnathan
   2. Delicious
      1. golden
      2. red
3. Orange
   1. Naval
   2. Valencia
4. Grape
   1. Sémillon
   2. Pinot Noir

[walkinTas]

URL
Use [ url ][ /url ]to turn a website address into a hyperlink (clickable link to the site).

Code: Select all

[url]http://www.google.com[/url]

http://www.google.com will take you to google.

A subtle variation of this is [ URL='website address'] text [ /URL] used to create a link with words to click on rather than displaying the website address.

Code: Select all

[url=http://www.google.com]Go to Google[/url]

Will display the hyperlink 'Go to Google'. As you can see the opening markup includes the website address.

You can also link to other posts in the forum. To do this, go to the post you wish to link to (the easiest way is to open bushwalk.com in a second browser window or tab). When you find the post you wish to link to, right-click on the post heading. In FIREFOX choose 'Copy Link Location' from the right-click menu. In IE EXPLORER choose 'Copy Shortcut' from the right-click menu.

Now return to your editing and past the link into your editor window.

Code: Select all

[url]http://bushwalk.com/forum/viewtopic.php?f=12&t=4468[/url]

http://bushwalk.com/forum/viewtopic.php?f=12&t=4468 is a link to this topic.

Code: Select all

[url=http://bushwalk.com/forum/viewtopic.php?f=12&t=4468]Help with Editor[/url]

Help with Editor is also a link to this topic in the [ URL=] format.

Do not automatically parse URLs: When you type a URL directly into your post in the format of 'http://www. ... .com', by default it will be converted to a hyperlink. Below your post editor you will see option. If this option is selected when posting, these URLs will stay as a standard string of text and won't be converted to hyperlinks.

disableparsing.png

[walkinTas]

img
The [ img][ /img] markup tags are used to include an image in your post. Remember that you should not include large images in general posts nor make general posts with lots of images because these may effect members with slower links. The gallery is the right place to post messages with lots of images.

Also, forum rules ask you to keep image width to a maximum of 800 pixels and a maximum of 1MB in size. You are also asked not to post anything that breaches copyright laws.

To link to a picture on another Server or website, use the [ img]http:// ... picture.jpg [ /img] syntax. The website address (URL) should end in the name of a picture in a recognized web format. i.e. .jpg, .png or .gif.

Code: Select all

[img]http://www.google.com.au/intl/en_com/images/srpr/logo1w.png[/img]

You can upload an image to the bushwalk.com server with the 'Upload attachment' option at the bottom of your editor window. The uploaded image will display at the bottom of your post. You can place the image in-line if you wish it to display part way through the post.

Code: Select all

[attachment]uploadAttach.png[/attachment]

uploadAttach.png

You can add a caption to your image using the 'File Comment' textbox.

fileComment.png

If your image is on another server or website, you may wish to upload a smaller version of your picture and use it as a link to the the larger picture. Nesting the [ img]http:// ... /picture.jpg[ /img] code inside the [ url=] [ /url] code will allow your picture to be used as a link to a website (or another picture).

Code: Select all

[url=http://www.google.com.au/intl/en_com/images/srpr/logo1w.png][attachment=0]google.png[/attachment][/url]

google.png

Nik has a post that offers some more help with uploading images in your post.

[walkinTas]

BBCode

But you can only see all of this if you don't disable the BBCode.

disableBBCode.png

I you tick "Disable BBCode" as per the above example, non of the markup shown here will work.

[michael_p]

YouTube



To embed a youtube video you need to copy and paste the group of letters after the "?v=" and before the first "&" in between "youtube" tags. Using the above video for example. The whole URL is: "http://www.youtube.com/watch?v=OYjv06x6A10". You only need to paste the "OYjv06x6A10" bit in between the youtube tags. See code example below:

Code: Select all

[youtube]OYjv06x6A10[/youtube]

mod: copied from here.