The text editor allows you to edit your pages using familiar icons such as Bold and Italics.

When you save the page, the text editor converts you changes into HTML, which is what web pages are displayed as.

This type of text editor is called WYSIWYG - What You See is What You Get.

The downside to having such control over a website is that each page can be made to look different. That means it is possible to end up having a website looking like a jumbled mess. For that reason, we recommend keeping the pages consistent across your site.

There are many buttons on the text editor that you will not have seen before. If you hold the mouse over the icon a tool tip will pop up and tell you what it does.

From time to time you may have difficulty getting the page looking the way you want for unexpected reasons. This can be due to unnecessary HTML code. If you are brave you can edit the HTML directly and try and remove it, or contact us.

If you are going to work on a page and would like to view more of the page at the same time, click on the Full Screen mode. This icon is normally fifth or sixth from the left on the bottom row (position may vary), and looks a bit like a TV screen.

To return to normal mode, click on the icon again.

If you prepare pages in Microsoft Word it is important that you use the "Paste from Word" button.

This is because Microsoft Word will paste it's own version of HTML otherwise. Word's HTML is very long and messy, and can cause your pages to look different in different browsers as well as have problems editing the page in future.

In Joomla 1.5 the Paste from Word button is sixth from the left in the second top row of buttons.

In Joomla 1.0 the Paste from Word button is forth from the right in the top row of buttons. [Help to determine which version of Joomla you are on]

The steps are:

1. Go to the page that you want to edit (Help on editing a page)
2. Copy the text from Microsoft Word (Select it and press Ctrl C on Windows machines or Apple C on Macs)
3. Switch back to the text editor and click on the Paste from Word button
4. Depending on the internet browser that you are using it will either put the content directly into the page or put it into a dialouge box first

If you are having trouble getting the pasting to work properly, follow the Pasting text process instead.

Note: the following is designed for Windows machines. You can do it from Macs with the appropriate programs and shortcuts.

To ensure that no weird formatting comes into your document from other documents (eg Word), you can convert the content into pure text and paste it directly into the HTML for the page.

To do this:

1. open up Notepad or equivalent on your computer (Start Menu > All Programs > Accessories > Notepad) Notepad is a simple text editor.
2. Copy the information from your formatted document (eg Word) and paste it int the text editor. Select it again and copy it (this washes out any formatting from word)
3. In the page you want to edit, click on the "Edit HTML source" button.(More information...)
4. Scroll down until you can see the correct place to put your new content.
5. Press Ctrl V to paste.
6. Press on Update
7. Format it appropriately
8. Save
9. Go and view it in your internet browser

Your website has built in styles such as headings. The main types are Heading 1 and Heading 2.

To apply the built-in formatting to a heading, select the heading and use the drop down in the text editor on the right side of the buttons. It normally says "Paragraph", and if you click on the drop down you will see the built in styles that you can use.

1. Put the cursor where you want the image to go
2. Click on the "Insert/Edit Image" button - normally the third from the left in the bottom row
3. If the picture is already loaded into the website, simply click to the right of the filename and then press Insert. You may have to select a subfolder (to the left of the filenames) to locate the picture first.
4. If the picture is not loaded into the system, click on the Upload icon (Green upward facing arrow with a gray computer box in the background - second from the right in the middle of the screen). Then press Browse, find the file, press Open, and then OK. Then select that image and press Insert.
5. See Working with Images below for more information on manipulating images

• Change the alignment - center, right, top, bottom or left aligned picture
• Change the tooltip
• Display a certain size

Change the alignment - center, right, top, bottom or left aligned picture

By default, most images are inserted to be aligned to the left. You can change this as follows:

1. Select the image
2. Press on Insert/Edit image button
3. In the alignment drop down choose the appropriate setting
4. Press insert

Change the tooltip

When you put your mouse cursor over an image, the image title comes up.

To change it to whatever you like:

Tip: you can put keywords into the image title

Display a certain size

You can force a picture to be displayed at a certain size by:

1. Select the image
2. Press on Insert/Edit image button
3. Change the dimensions to make it smaller or bigger
4. Press insert

Please note, this will not resize the image, just force it into a bigger or smaller display area. This can make the image look grainy or pixelated.

Insert a link to another page on your site

1. Select the text and/or image that you want to be the link
2. Press on the Insert/Edit link icon (looks like a chain link, and is normally the first or second icon on the left in the bottom row of buttons)
3. In Joomla 1.5: Under Link Browser, press the cross next to Content to expand it - this gives a list of all of the sections
4. In Joomla 1.0: At the bottom of that page is "Joomla! Content Links" - Select link type as "Article" (in this location pages are considered articles)
5. Choose the section that the page is in
6. Choose the category that the page is in
7. Choose the page
8. To have this link open in a new window, choose the correct option in the Target drop down list
9. Press on Insert

Insert a link to a page on another website

Firstly, get the website URL that you want to link to. The URL is the website address, including the http:// . The easiest way to do this is to go to the actual page, and then copy the address from the address bar.

1. Select the text and/or image that you want to be the link
2. Press on the Insert/Edit link icon (looks like a chain link, and is normally the first icon on the left in the bottom row of buttons)
3. Paste the Website URL for the desired site that you copied from the website browser
4. To have this link open in a new window, choose the correct option in the Target drop down list
5. Press on Insert

Insert a link to a certain place on a page on your site (anchor)

First, create an anchor at the right place on the page you want to link to, and write down exactly what you have used (Exact upper and lower case as inserted)

1. Select the text and/or image that you want to be the link
2. Press on the Insert/Edit link icon (looks like a chain link, and is normally the first icon on the left in the bottom row of buttons)
3. In Joomla 1.5: Under Link Browser, press the cross next to Content to expand it - this gives a list of all of the sections
4. [Help to determine which version of Joomla you are on]
5. In Joomla 1.0: At the bottom of that page is "Joomla! Content Links" - Select link type as "Article" (in this location only pages are considered articles)
6. Choose the section that the page is in
7. Choose the category that the page is in
8. Choose the page
9. The page URL will now have been put into the URL box
   • Click into the URL box, go all the way to the right end of the URL and add a hash sign # followed by the anchor name, for example http://www.butterflyinternet.com.au/administrator/index2.php?option=com_content&sectionid=0&task=edit&hidemainmenu=1&id=58#anchor
10. Press Insert
11. Save the page and test the link

Insert a link to a certain place on the current page (anchor)

First, create an anchor at the right place that you want to link to, and write down exactly what you have used.

Go to where you want to link from:

1. Select the text and/or image that you want to be the link
2. Press on the Insert/Edit link icon (looks like a chain link, and is normally the first icon on the left in the bottom row of buttons)
3. There is a drop down box next to Anchors
4. Select the anchor that you want to link to
5. Press Insert
6. Save the page and test the link

Insert a link to a file (eg PDF or picture)

This is useful if you want to clients to download a PDF.

1. Load the file into your web server through the media manager (More help...)
2. Get the URL of the file that you want to download. (More help...)
3. Go to the content item that you want to link from (Or create it - More help...)
4. Paste the URL of the file
5. Change the text to whatever you want the link to

Advanced: You can also make the image a link to the file. A simple way to do that is to upload the image that you want to be the link, and then drag it in to the middle of the text that is the link, and then fix up the link text.

This if for when you want to create a link on your webpage for a site visitor to click on to email you.

When the link is clicked on the visitor's email program (such as Microsoft Outlook) will open up with an email to the address you specify with the subject line that you enter.

To create the link:

Select the text and/or image that you want to be the link (Note: the link text does not have to be the email address]
Press on the Insert/Edit link icon (looks like a chain link, and is normally the first icon on the left in the bottom row of buttons)
1. In Joomla 1.5 there is an envelope with a green cross to the right of the URL box at the top of the screen, click on that
2. [Help to determine which version of Joomla you are on]
3. In Joomla 1.0 under Email address
4. Enter the Address that you want to be emailed to
5. Insert the subject line if you desire
6. In Joomla 1.5 Press OK
7. In Jooma 1.0 Press Create
8. The program will automatically create the correct URL for this action into the URL box
9. Press Insert
10. Save the page and test the link

Anchors are useful to create links that point straight to a section on a page.

1. Click the point that you want the anchor to point to
2. Click on the Anchor item
   • Joomla 1.5: the 11th icon from the left in the second top row
   • Joomla 1.0: second last button on the right of the second row
3. Insert the name for the anchor
4. Don't use any spaces
5. Write down exactly what you name it - links must point exactly to that spelling with lowercase and uppercase letters exactly matching
6. Press "Insert"

Create a link to an anchor on the same page

Create a link to an anchor on a different page

Tables are a useful for displaying information as well as controlling the layout of a page.

Plan the number of rows and columns that you want in your table.

Put the cursor where you want the table and click on the "Insert new table" button (Grid with pencil in the second or third row).

Insert the number of Columns and rows. If you are using the table for presentation purposes and don't want visitors to see the table, set the border to 0.

If you don't nominate a width the table will simply be as wide as the contents need it to be. If you aren't sure how wide you want the table, put it in at 300, insert the table, review how it looks and alter it as necessary.

On the Advanced tab you can specify the background image, colour and border colour if desired.

When you are finished, press "Insert".

Note: if you can't see the table it is because the borders are set to zero. Put the cursor above the table and select until underneath it - this will highlight the table.

Note: you can drag and drop text and images into tables.

To Insert a row before, Insert a row after, delete a row, Insert a column before, Insert a column after, delete a column, simply put the cursor in the appropriate cell and press the button in the toolbar.

The functions of the other buttons are as follows:

Insert/edit table: Allows you to change any of the initial table settings, such as borders and background colours.

Table row properties: Change the text alignment (horizontal and vertical), height of the row, background image and colour for the row you are currently on, or you can change these settings for all odd, even or all rows.

Table cell properties: Change the text alignment (horizontal and vertical), width and height of the cell, background image, colour and border colour for the current cell, row or entire table.

To edit the source code of a page, go to the content item, and then:

• For Joomla 1.5 press show/hide above the text editor
• For Joomla 1.0 in the text editor click on the "Edit HTML Source" button which is in the middle of the top row (it says "HTML" on the button) or press show/hide above the text editor
• [Help to determine which version of Joomla you are on]

When you are finished editing the code press "Update" (not necessary in Joomla 1.5) and then "Save" or "Apply" (Mandatory if you want to save the changes).

The HTML on the page is directly what makes the page look the way it does.

Information contained in < > brackets are HTML tags. Common tags are:

<b> bold </b>

<i> italics </i>

<p> paragraph </p>

<h1> heading 1 </h1>

<h2> heading 2 </h2>

For a full list of HTML tags, review http://en.wikipedia.org/wiki/HTML_element or search on Google.

If you notice a lot of rubbish, you can often delete out much of it. For example, Microsoft Word inserts a lot of superflous HTML when pasting into the text editor.

If you have trouble getting formatting to look correct, it can be that there are extra tags in the area you are working with that are blocking your formatting.

You can edit the HTML code, press Update and if the page turns out badly then press cancel to prevent the page changing. As an added precaution, you could also copy the page first and edit the page copy. That way if it works you can use it and if not delete that page.

When editing HTML code, be very careful about deleting out any special programming. If you are not sure, don't touch it.