Using BBCodes
From e107 Wiki
e107 Wiki: English | Русский | Deutsch | Français | Magyar | Português | Български | Česky | Nederlands | Ελληνικά | Italiano | Norske | Polska | Slovenščina | Español | Svenska | Translate: Wiki | Page
Using BBCodeText may be entered either using the TinyMCE WYSIWYG editor, or through a simpler system where formatting is achieved through use of special sequences called BBCodes. BBCode is almost always the only option in the forum. This section decribes the use of BBCodes most likely to be required by a user (as opposed to an administrator), and is applicable in many places throughout an E107 site (although some codes may be inappropriate in certain places). The standard bbcodes use all lower case letters for the codes. In addition to the list specified here there may be other codes specific to a particular site.
Summary of BBCodes
Controlling the LayoutThere are some simple controls for text formatting and appearance, which are invoked using the buttons immediately underneath the text entry box. Some less common features require that the actual codes are typed in. There are two ways of using these buttons: a) You can select as you type b) You can ‘block’ a section of text (by ‘wiping’ the mouse over it) and then click on the button.
[b][/b] This particular example is for bold text. The text to be displayed in bold must end up between the brackets, thus: [b]Text in bold[/b] (Think of it that [b] turns on bold, and [/b] turns it off).
Text appearanceThe available options are largely self-explanatory: Bold Italic Underline In addition there are two drop-down boxes to select text colour and size.
Formatting TextIf you do nothing, all text is ‘left justified’ - similar to normal writing. You have options to centre (sorry - its spelt wrong on the screen and in the bbcode) or right justify. The ‘blockquote’ (‘bq’ or ‘[]’ button) is used to highlight text.
ListsYou can create various forms of list. Unordered listThe preferred style is either [list] line 1[*]line 2[*]line 3[*]line 4[*]line 5[*]etc [/list] or [list] line 1 [*]line 2 [*]line 3 [*]line 4 [*]line 5 [*]etc [/list] The [list] line 1 *line 2 *line 3 *line 4 *line 5 *etc [/list] style is legacy. Ordered listEither [list=<list type>] line 1[*]line 2[*]line 3[*]line 4[*]line 5[*]etc [/list] or [list=<list type>] line 1 [*]line 2 [*]line 3 [*]line 4 [*]line 5 [*]etc [/list] Valid list types
List example 1: The following code typed in [list=upper-roman]*list item 1 *list item 2[/list] will display: I list item 1 II list item 2 List example 2: The following code typed in [list]*list item 1 *list item 2[/list] will display: • list item 1 • list item 2 Adding links to other web pagesYou can add links to other web pages (both within and outside your web site) within your text. Use the ‘Link’ button, which inserts: [link=hyperlink url][/link] You can then edit this to look like this: [link=http://www.multimap.com/map]Display text[/link] or this:
[link={e_BASE}page.php?23]Display[/link]
[link={e_BASE}news.php]Latest News[/link]
The first format is used for external web pages (i.e. those outside your site). The second format is used for pages within the site - these may be pages which have been added using this system, or pages which have been manually added. Another possibility is to present a website as a clickable link like this: [link]http://www.somewhere.org[/link]
A link which opens a new windowIf you want a link to automatically open in a new window (which will usually be the case if it takes the user away from your site), this is a simple addition to the previous example (v0.7.9 or higher required): [link=http://www.multimap.com/map external]Display text[/link] or [link=http://www.multimap.com/map rel=external]Display text[/link]
[link=external=http://www.multimap.com/map]Display text[/link] Adding emailing linksAdding a link to create an email is very similar to that for creating a link to another web page. [link=mailto:youraccount@yourdomain.com]Your Name[/link] you could also use bbcode email: [email=youraccount@yourdomain.com]Your Name[/email] Adding ImagesThese can be inserted using the ‘img’ button, which inserts the following: [img][/img] As with other features, the name of the image file (which must usually include its location) is inserted between the brackets, thus: [img]mypicture.jpg[/img] Tip: It is often better to create a thumbnail (tickable option) which you insert in the text. Then anyone interested can click on the thumbnail to see the detailed text.
Specifying the location of an image or pageThere are various 'constants' you can put in front of the filename, which save you having to type the full URL to your site (and they will also continue to work if you should move everything on your server). Examples are: {e_IMAGE} - the e107_images directory {e_IMAGE}/custom - for images used on custom pages (have to be uploaded by webmaster) {e_FILE} - the files directory {e_PLUGIN} - the plugins directory {e_BASE} - the 'root' E107 directory
[link={e_BASE}news.php]Latest News[/link]
There is more explanation and a full list here Hyperlink an imageCombine an image with a link to make the image clickable to a link. [link=http://mysite.com/mylink.php][img]mypicture.jpg[/img][/link]
Floating text round an imageYou can add floating style element to the 'img' bbcode to do this: [img style=float:right]path/to/image.png[/img] Example: create a left outlined image with text floating on the right side of it with a margin of five pixels. [img style=float:left;margin-right: 5px]mypicture.jpg[/img] Scaling an imageResizing an image can also be done with the style element: Example: resize the image to a height of hundred pixels (if not specified, the width will resize automatically to the ratio of the originating image). [img style=height:100px]path/to/image.png[/img] Adding 'alt' tagYou can add an 'alt' tag to an image thus: [img alt=testing description]/images/photo.jpg[/img] Placing the 'code' tag inside a scrolling divYou may want to place the contents of anything inside the [code][/code] tag inside a scrolling div. This will ensure the layout of your pages is maintained regardless of the length and width of the code posted. In order to do this, all you have to do is add a code_highlight css class to your current theme's style.css. As an example, you can add this:
.code_highlight {
padding: 4px;
margin: 2px;
height: 100px;
overflow: scroll;
background: #e9e7e7;
}
Adjust it to match your needs and theme. Using flashYou can add Flash movies by referring to their URL. [flash=200,100]http://www.yourdomain.tld/images/some.swf[/flash] Generates the equivalent in HTML: <object type='application/x-shockwave-flash' data='http://www.yourdomain.tld/images/some.swf' width='200' height='100'> <param name='movie' value='http://www.yourdomain.tld/images/some.swf' /> </object> In 2.0 a new parameter is possible: param_name=setting You can add as many parameters as needed with &-sign e.g.: param_name=setting¶m_name=setting [flash=200,100,wmode=transparent]http://www.yourdomain.tld/images/some.swf[/flash] In HTML that will add to the above HTML coding before the closing object tag: <param name='wmode' value='transparent' /> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
