Getting started with using Joomla Content Editors?

Joomla Content Editor

Joomla Content Editor's like the one used on this site, provides an editing interface which resembles how the page will be displayed in your web browser. These editor's allows for typing, pasting, deleting and manipulation of your article or document. The goal is that at all times during editing, the rendered result should represent what will be seen later on your website.

So if you want to know how to get the best editing experience out of your site read on…

Working with wysiwyg images

wysiwyg images

Adding images to your pages is one of the easiest and most effective things you can do to grab and hold the attention of your readers. The saying by Frederick R "a picture is worth a thousand words" endorses the fact that a image tells a story just as well as a large amount of descriptive text on your page.

Content Styling - its easy!

Content Styling

CSS is the other core technology we use for building pages. While HTML provides the structure of your page CSS works to provide the visual styling. Content editors are fantastic as they will do all the hard work for you but before we get on to that lets have a quick look at how this all fits together.

Styling content with Iconography

Another standard way of styling your content is with iconography. They are quick, easy to use and serve to highlight key points within your site. The knowledge that is necessary to achieve refined iconography when editing your pages is not as daunting as you may think.

In the last article we explored how CSS and HTML fits together to make this magic work. In this article I want to show you what takes place in the editor to make this happen.

Working inside Containers

In certain situations you may want to work within a container. It could be that you have applied a style to a p (paragraph) or div container and want to work inside it. The good news is that you can do this by using the 'Ctrl + Return' which will create a break return ‘<br>’ element within your paragraph.

This leaves no padding or margins between the two blocks of text created by the break return and will look something like this in your code:

<p>
    Heading 1<br />
    Heading 2<br />
    Tunc Tharsos vindicem a his auditorio iubet feci dicentes multa ei auri tecum ait. Tharsiam vis lacrimis 
    invidunt. Longe lateri rex in modo invenit quasi non ait mea ego
</p

This creates a newline within your container without breaking out of the p container.