Font size

Images and Files

Media Manager

Save images to your own computer first
Find the image or file you want to use in an article and save it to your PC Picture Folder.
IMPORTANT – name your images in lower case with no gaps (you can use underscore_ or dash-), e.g. view_of_nelson_city_1
Crop and resize if necessary

Go to Media Manager > choose a folder/subfolder
Click Upload > Choose files > find the image/s (you can upload several at one time) > Open - the title of the image will file shows > Start Upload
A green message at top of screen shows if completed correctly

Method 1 - From inside an article:

Click where you want to insert the image
Click the Image button at bottom of screen > choose the folder (e.g. Stories / subfolder Photos) where you want to store the image
Scroll to the bottom of the window and click Choose Files
Select the image from your computer > Open - the name of the image shows > Start Upload > green message at top of screen shows if completed
Check the directory is correct (/stories/photos)
Select the uploaded image > Align (optional) > Insert

Method 2 - From inside an article:

Click the JCE picture icon (the one with the star), it opens the Image Manager box
Find the folder/subfolder the image is stored in (e.g. Stories/Photos)
Select the image you want – a preview of the image shows (check the URL path)
Change the properties of the image if necessary (align, size, etc) – e.g. Align Left, Margin 5, Remove "Equal values" option unless you want same distance all round.
Insert
You can adjust the size a little once the image is in the article, but it is better to resize before uploading.

Dimensions: Proportional
Alignment – Left or Not set
Margin - 5 to 10 in Right box. Clear "Equal values" option unless you want the same distance all around the image.

(From Joomla! Documentation)

Open the article for editing with JCE editor.
Press the "Edit HTML Source" button and enter the code indicated below at the very beginning of the article:

For an image:

For a color:

Substitute your desired image or color in the code above. If you are using the JCE editor, you do not need to add the closing
tag at the end of the article, since JCE will add this for you automatically.
If you want to control the style from the CSS file, you can insert a class attribute instead of a style attribute. For example, follow steps (1) and (2) above, except insert this code:

<div class="mynewclass">

Then open the CSS file (normally <joomla! home="">/templates/CSS/template.css) and add something like:

div.mynewclass { background-color: red; }

If you want to have different backgrounds for different Menu Items, you can also use the Page Class Suffix parameter of the Menu Item to create new CSS classes and then add styling commands in the CSS file.