(Quick link: http://organicwebs.com.au/editingwebpages)

joomla developerWe develop and host Joomla CMS websites. CMS stands for Content Management System, which is a website that you can edit yourself with an internet browser.

We offer a WYSIWYG editor - which makes editing easier - like using MSWord.

But there are a few quirks when it comes to webpages. Although you may not know it, when it comes to website pages, you are actually writing HTML code - and this code has its rules.

So here are a few tips in using our editor, and writing basic HTML code on your CMS website.

Editing Your Pages

First your need to log onto your website.

Then go to the page you would like to edit. Look for this icon and click it to enter the editor...

edit button

Can't Edit the Page? Article Checkout (Padlocked)?

When a User edits an article, that article becomes "Checked Out" (represented by the padlock icon checked out ). Only the User who has checked it out the article can modify it. This is a safety/security feature that prevents two Users from editing an article at the same time, thus preventing the loss of any data upon saving.

The article remains "Checked Out" until the User clicks Apply, Save, or Cancel during editing. Once saved, the Content Item is Checked In. However, if there's a connection error, such as when the User presses the browser's Back icon, or they navigate to another page without saving or cancelling,  the article remains Checked Out. This means no one else can edit it.

We can overide this with a "Global Checkin" which will unlock all articles currently checked out across the whole site. However performing a Global Checkin while documents are open for editing will result in data loss. All Checked Out Items will be checked in, and any unsaved changes will be lost.

Save your work regularly - every 5min

As with any application, it is recommended to save your work regularly. Also online web editors can timeout - so if you don't save your work your session could expire.

This may sound a bit daft - but it is a security measure. Logins will expire if there is no activity for a set amount of time.

If this is becoming a hassle - please contact us and we can increase the timeout.

Copying Plain Text into your Article - important!

When pasting in text from other sources such as Word, or from other web pages, you should Paste as Plain Text and then reapply the formatting to suit. If you otherwise do a regular paste, you will copy hidden codes that could effect your webpage formatting.

To paste as plain text, click the down arrow next to this button  icons paste   and select icons pastertext "Paste as Plain Text"

Images and Tables TIP

If you are using images left or right of text, it is often better to first build a table. Put the image in a cell and the text in the adjacent cell. You will find that you will have better control of how the text wraps around the image.

To build a table, click on icons table. Sometimes it is good to make the cellpadding 10 - this pads out the cells 10 pixels, putting a space between image and text.

Inserting Images

Step 1: click onimgmanager extto open the image tool. You should get a dialogue box like this one popping up...

FAQ-Joomla Edits

Step 2: Because you are using a live web editor, you need to upload your image from your PC to the webserver. Click on image upload to upload a new image (its above the details window).

Step 3: Click on Add File... Select your file(s) and click Open.
TIP: you can select more than one file with CONTROL or SHIFT.

Step 4: Click Upload. When the files have uploaded, you should return the dialogue box above in Step 1.

Step 4: Important: find your picture and click it once, and then click again until the image details (URL, Dimensions, etc) are shown in the Article Image box. The image is now selected for inserting.

Step 5: Choose the Align option.

webtips image align 

The preview picture of the beach (top right) gives you an idea of how the image and text will wrap.

  • Default doesn't align the image. It will sit in between the text. Only one line of text will be along side the picture.
  • Top: same as Default, but the line of text will line up with the top of the picture.
  • Middle: Like Default - but the text will line up with the middle of the picture
  • Left: The picture is aligned to the left margin. Text will wrap down the the right side.
  • Right: The picture is aligned to the right margin. Text will wrap down the the left side.

Step 7: If the image is right against other objects (like text), you may need to add a margin. The Margin settings are just under the Alignment settings. Something like 10px all around is usually good.

Step 6: Press Insert.

TIP: You can edit your image settings by selecting your image, and clicking theimgmanager ext

TIP: For stricter control on wrapping text around images, try inserting a table (icons table) with two columns, one row. The place the image in one column, and the text in the other column.

Re-size Your Images *before* Uploading Them

There are three good reasons to re-size your images before you upload them to the web...

  1. Small images take up less webspace
  2. Re-sized small images are clearer and look better.
  3. Small images are faster for your readers to download.

There are many ways to resize a picture...

  • If you are using XP, download the image resizer power tool and you can resize in filemanager. More info here.
  • You can use packages such as Photoshop, Paintshop, Corel Draw, or even Paint before you upload them.
  • If you don't have a program to resize your pictures, you can get a free one here.
  • There are other website that re-size pictures for you like www.resize2mail.com.
  • Use the edit picture button on the Imagemanager. It looks like this icons editpic and is found on the right hand side/lower part of the popup box. To use this button, you will need to first upload the image to the web - then resize it with the button. This is ok for a few files, but for muliple files you maye find the other methods better.

Small images like thumbnails are usually at 200 pixels wide. The largest picture you would have on your website would not be bigger than 800 pixels wide (~100kB). An image you get off a camera may be around 3500 pixel wide (~2000kB).

Sure, if you are feeling lazy you can re-size the image withimgmanager extby changing the dimensions, but as you'll see, it will look slightly fuzzy. This is because this tool is using a basic HTML code to re-size the image. This method also does not reduce the file size - so it will take longer for your readers to see it, and it is chewing up your webhosting space.

Insert a Readmore Link

For long stories we use a "Read More" link.

The link is often placed under the opening paragraph. Initially, the text above the link is displayed. If the reader clicks on the link,they will see the full story. This is particularly useful for stories on the Home page that would otherwise take up too much room.

The tool to insert a readmore link looks like this  readmorelink

Uploading a PDF

The proceedure for uploading a PDF is similar to uploading an image...

Step 1: Click onfilemanagerto open the insert/edit file tool. You should get a dialogue box like this one popping up...

 filemanager-tips1

Step 2: You need to upload your PDF from your local computer onto the server for the public to see it. Click on file upload to upload a new PDF file.

Step 3: Click on Browse to find your PDF on your local computer. Select the PDF and click Open to add it to the upload list.
TIP: you can select more than one file with CONTROL or SHIFT.

Step 4: Click the Upload button to start uploading your selected PDF files. When the files have uploaded, you will then see the dialogue box again, as shown above in Step 1. The files have been uploaded from your local computer to the server, and you should be able to see them in the dialogue box.

Step 5: In teh dialogue box, click on the new PDF file that was just uploaded to the server. The URL and Text boxes will automatically fill when the PDF is selected. Continue to tweak the settings to your preference. Checking the Icon check box, and setting the Target as "Open in new window" is generally recommended practice.

Step 6: When done, click the Insert button. The dialoguebox will close and a link to the PDF file will be inserted on the web page.

Keyboard Shortcuts

There are some keyboard shortcuts that are the same across applications, including our CMW.

  • Control+Z: Undo
  • Control+X: Cut
  • Control+C: Copy
  • Control+V: Paste

Use Predefined Formats

If you can. try to resist making your own styles with colours, fonts and font size. Instead, highlight your text and apply a format tag style. These format styles are basic HTML tags used in all webpages. That way all the headings on your site will look the same, and we will have better control of them if we need to change the look of your page.

The Format box looks like this paragraph - but it may have the words Paragraph in it. You can change for format with the dropdown arrow on the right.

The Styles box styles could also be used to format your text. But this may not be too helpful for you, as you'll find there are a lot of styles listed in this box that are unhelpful. This is because you are seeing styles used from behind the scenes on your webpage.

Example formats that are used regularly are:

  • Paragraph - for regular paragraphs
  • Heading 1 - used for things like the title of the page
  • Heading 2 - used for subtitles. For example "Use Predefined Formats" is a Heading 2.

Seeing your HTML

Don't think you are writing HTML? Then click on this button icons html to see what is happening behind the scenes.

If you understand a little HTML, you can also edit it direct by using this button. This can help sometimes if the editor gets confused.

Inserting Links

Use this tool link to insert a link. Sometimes you need to high light some text for the tool to become active. You can use the same tool to edit a link.

When linking to one of your own pages, use the link tool and under the Content section, find and select your article.

Webmaster's TIP: when you are linking to an outside site, set the Target to be Open in new window. This will open a new window for the outside site, and the reader won't loose your web page. As a webmaster - you don't want your readers to loose your webpage.

Misbehaving Formatting

If the format of your text is misbehaving - it is most likely due to some hidden codes. To fix, you need to remove all the formatting and the reapply it. There are a few ways to do this. Try one of these...

  1. Try to clean up the hidden text by selecting large sections and clicking the erase formatting icon (icons eraser)
  2. Select all you text from start to finish. Cut and paste as text (icons pastertext). You'll have to re-insert your images and tables again.
  3. Last resort for the advanced user - get into the HTML code and manually clean it up. You can edit the HML code using the Edit Code button (icons html).

How to Space Paragraphs With More Than One Line.

Some internet browsers will delete empty lines. The editor will also do this in an effort to show you what some of your readers will see.

If you really would like a big gap between paragraphs, simply add a Space on each line and then Enter. Like below...

 

 

 

Because the space is there, its not an empty line, hence it doesn't get ignored.

SHIFT + ENTER

Holding the SHIFT key when pressing ENTER is different than just an ENTER.

  • SHIFT+ENTER is used for a new line, not not a new paragraph. The gap between lines of text will be small.
  • ENTER (alone) means new paragraph - so there is often a bigger gap inserted between the text.

RESPONSIVE WEBPAGES (MOBILE FRIENDLY)

For Responsive  (mobile friendly) pages, there will be HTML DIV elements that will contain class codes like "class="row" and class="col-md-6". There are important to make the page Mobile friendly. You will see these if you click on "Toggle Codes" in the editor.

Also when you are editing a mobile friendly webpage, images may increase in size to 100%. This is OK. When you Save and Close, you will see the final responsive page.

We use the Bootstrap conventions for mobile friendliness - so it is worth a read of the Bootstrap guidelines to familiarise yourself. In particular, learn about the grid system.

More on Bootstrap here... www.getbootstrap.com/css