Quick Tutorial: Help with Editor

Discussion about this site, including these forums (eg, suggestions, comments, queries). Topics may be manually deleted occasionally (eg, after suggestions dealt with, or changes bedded in).

Quick Tutorial: Help with Editor

Postby walkinTas » Thu 09 Sep, 2010 5:06 pm

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.

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
You do not have the required permissions to view the files attached to this post.
walkinTas
Lagarostrobos franklinii
Lagarostrobos franklinii
 
Posts: 2934
Joined: Thu 07 Jun, 2007 1:51 pm
Region: Tasmania

Re: Help with Editor - Subject

Postby walkinTas » Thu 09 Sep, 2010 5:07 pm

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.
You do not have the required permissions to view the files attached to this post.
walkinTas
Lagarostrobos franklinii
Lagarostrobos franklinii
 
Posts: 2934
Joined: Thu 07 Jun, 2007 1:51 pm
Region: Tasmania

Re: Help with Editor - Font Formatting

Postby walkinTas » Thu 09 Sep, 2010 5:08 pm

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
Lagarostrobos franklinii
Lagarostrobos franklinii
 
Posts: 2934
Joined: Thu 07 Jun, 2007 1:51 pm
Region: Tasmania

Re: Help with Editor - Quoting

Postby walkinTas » Thu 09 Sep, 2010 5:08 pm

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]

IMHO wrote:Quoted text

Code: Select all
[quote="Plato"]Life must be lived as play[/quote]

Plato wrote:Life must be lived as play
You do not have the required permissions to view the files attached to this post.
walkinTas
Lagarostrobos franklinii
Lagarostrobos franklinii
 
Posts: 2934
Joined: Thu 07 Jun, 2007 1:51 pm
Region: Tasmania

Re: Help with Editor - Code

Postby walkinTas » Thu 09 Sep, 2010 5:09 pm

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
Lagarostrobos franklinii
Lagarostrobos franklinii
 
Posts: 2934
Joined: Thu 07 Jun, 2007 1:51 pm
Region: Tasmania

Re: Help with Editor - Lists

Postby walkinTas » Thu 09 Sep, 2010 5:10 pm

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
Lagarostrobos franklinii
Lagarostrobos franklinii
 
Posts: 2934
Joined: Thu 07 Jun, 2007 1:51 pm
Region: Tasmania

Re: Help with Editor - URL

Postby walkinTas » Thu 09 Sep, 2010 5:11 pm

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
You do not have the required permissions to view the files attached to this post.
walkinTas
Lagarostrobos franklinii
Lagarostrobos franklinii
 
Posts: 2934
Joined: Thu 07 Jun, 2007 1:51 pm
Region: Tasmania

Re: Help with Editor - Img

Postby walkinTas » Thu 09 Sep, 2010 5:12 pm

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]

Image

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.
You do not have the required permissions to view the files attached to this post.
walkinTas
Lagarostrobos franklinii
Lagarostrobos franklinii
 
Posts: 2934
Joined: Thu 07 Jun, 2007 1:51 pm
Region: Tasmania

Re: Help with Editor - BBCode

Postby walkinTas » Thu 09 Sep, 2010 6:58 pm

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.
You do not have the required permissions to view the files attached to this post.
walkinTas
Lagarostrobos franklinii
Lagarostrobos franklinii
 
Posts: 2934
Joined: Thu 07 Jun, 2007 1:51 pm
Region: Tasmania

Re: Quick Tutorial: Help with Editor - Using Youtube tab.

Postby michael_p » Fri 20 Jan, 2012 12:53 pm

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.
One foot in front of the other.
User avatar
michael_p
Athrotaxis selaginoides
Athrotaxis selaginoides
 
Posts: 1146
Joined: Sun 15 Nov, 2009 6:58 pm
Location: Macarthur Region of Sydney.
Region: New South Wales
Gender: Male


Return to Forum & Site

Who is online

Users browsing this forum: No registered users and 1 guest