Adding and Editing TEXT

Having logged in at the Front End of e.g you will be able to submit, edit, or add new content to the website depending on your level of access e.g. as AUTHOR, EDITOR, PUBLISHER, or ADMINISTRATOR.

HOW DO I EDIT A PAGE? [Requires Editor or higher status.] When NOT logged in, clicking the TOOLS BUTTON [arrow 1 image A below] will show icons for PRINT and EMAIL only. Once logged in, an EDIT icon will appear - see image B.


Once logged in, navigate to the page you want to edit. Clicking EDIT [arrow 2 image B] on any page opens that page in edit mode - see image C. Notice also that when logged in the Login Box alters to include a LOG OUT button [X in image B]. When you have finished ALL your editing, click this button to LOG OUT otherwise files you have been working on remain 'locked' and unopenable by other users. Think of it as a file taken from a filing-cabinet; if you don't put it back no-one else will have access to it. Using the LOG OUT button effectively replaces all files where they should be. Notice arrow 9, which will be explained at the end.


Image C shows the page ready for editing. AFTER clicking EDIT, note the array of editing icons. Their use should be more-or-less familiar from word-processing. The icons are rather small, but hovering over them on the actual webpage will reveal their function. You can either use the WYSIWYG editor as shown below or edit the HTML direct or in CODE EDIT MODE [image D]. To switch between WYSWYG and the other types of editing either click 'TOGGLE EDITOR' [3] or CODE EDITOR [4]. Note also the icon indicated by arrow 5 which will be explained shortly. To revert to WYSWYG click 'TOGGLE EDITOR' or CODE EDITOR again.


There are slight differences between 3 and 4 shown in the next 2 images. Image D shows the result of using the TOGGLE option


Image E shows the result of using the CODE EDIT icon - 4.


One difference is that clicking 4 displays the content colour-coded; black for the actual text visible on the webpage and blue for the underlying code which remains hidden on the internet. Editing the black affects what will appear; editing the blue how it appears. Tinkering with the blue may have unexpected results - such as making the content disappear!

DIRECT EDITING Using the WYSWYG editor is simple and pretty intuitive. However, it is sometimes tricky achieving exactly the effect you want - the precise point at which a colour changes for example - in which case you may find it easier to toggle the editor and work directly on the HTML. But it's a matter of choice!

To enter or edit text, click at the point within the text you wish to edit and proceed as for word processing. Some buttons in WYSWYG mode remain greyed out until content is selected. If you don't SAVE what you have done it will not appear on the website! The SAVE button 'applies' what you have done directly to the website database enabling it to be seen on the internet. To exit without saving click CLOSE. Be sure to click SAVE if you want to save your work!

COPY AND PASTE must be in PLAIN TEXT ONLY. Formatting used in word processing is incompatible with HTML and CSS, the file types used on most webpages, including these. Therefore, EITHER save your prepared work as PLAIN TEXT before copying and pasting OR use the PLAIN TEXT insertion icon - 5 C above and the red arrow in F. The icon has a small letter T in the bottom right hand corner! Using the icon method is best, because it ensures the removal of all deleterious formatting which JOOMLA then converts to useable HTML formatting. However, don't expect the end product to look exactly the same as the original! Some further tinkering using the WYSWYG editor may be needed. See below for the exact procedure.


  1. Open or create the article [page] in which you want to copy/paste in WYSWYG edit mode.
  2. From the document on your computer copy the material required to your clipboard - select then ctrl + C or however you would normally do it!
  3. Return to the WYSWYG editor and click the PASTE AS PLAIN TEXT icon - 5 C and red arrow in F. This will launch an overlay window as shown above in F.
  4. Paste the material - ctrl + V [1]
  5. The content will appear pasted in the window [2] Don't fiddle with it at this stage!
  6. Click the INSERT button [3]

Job done! The paste window will close and you will be back on the page in WYSWYG edit mode where you can adjust the content if needed.

TO ADD A LINK Below the editing pane [shown bottom left 7 in C, D, E] is the ARTICLE button to create hyperlinks to other articles etc. Select the word or words to act as the link then click the ARTICLE button and navigate to the file you want and select it. The text you selected will be changed to the name of the article when the link is created. If this is not what you want to appear on the actual webpage, click within the link and type what you do want. This will still link to the article you selected.

HOW CAN I CREATE A NEW PAGE? In Joomla-speak this is a new ARTICLE. Once you are logged in, select the SUBMIT ARTICLE option from the USER MENU [see 9B at top]. Enter the content as outlined above and SAVE. It will probably not appear immediately on the website - unless you know how to make it! For now, having saved your piece, alert an ADMINISTRATOR to the fact that you have submitted a new page. [In fact, this may happen automatically in which case I will remove this instruction later!]

WHAT ELSE DO I NEED TO KNOW? Nothing much! But if you want to know about images, see the IMAGES page.