1. Login

Use www.perennialpackaging.com.au/admin to access the login page.

Use the provided username and password for logging into the website.

2. Initial View

The following is the initial view of the admin panel.

The admin panel includes the following areas which are editable. Corporate Profile Product Categories Products Services Sustainability News Testimonials Contact

3. Introduction to SSM Content EditorSSM Content Editor is a TinyMCE based platform independent web based Javascript HTML WYSIWYG editor. What this means is that it will let you create html content on your web site. SSM Content Editor supports a lot of Operation Systems and browsers.

This user manual will show you all the basics of the SSM Content Editor.

2. BasicsBasic options of SSM Content Editor.

The default SSM Content Editor editor will look like this:

On top you can see the toolbar, below the text area and at the bottom a resize bar. If you drag the lower right corner you can make the editor window bigger or smaller.

ToolbarThe following table describes the function and output of each button.

3. ToolbarThe following table describes the function and output of each button.

Icon Function Description Example

save Saves changes

text style Normal paragraph text

Heading text

Subheading text

Literal text

Discreet text

Pull-quote Pull-quote

Call-out

Clear floats

Highlight

(remove style)

Page break (print only)

bold Bolds selected text test

italic Italicizes selected text text

justify left Aligns the selected text

to the left

text

justify center Aligns the selected text

to the center of the

screen

text

justify right Aligns the selected text text

Icon Function Description Example

to the right

justify full Aligns the selected text 

to both left and right

text

bulleted list Creates a bulleted list item 1

item 2

item 3

numbered

list

Creates a numbered list 1. item 1

2. item 2

3. item 3

oudent Moves an indented

section of text one tab

to the left

indent Indents the selected

text by one tab

insert table Inserts a table

row

properties

Table row properties

cell

properties

Table cell properties

insert row

before

Inserts a row before the

current row

insert row

after

Inserts a row after the

current row

delete row Deletes the current row

insert column

before

Inserts a column before

the current column

Icon Function Description Example

insert column

after

Inserts a column after

the current column

delete

column

Deletes the current

column

split cells Splits the current cell

merge cells Merge the current cell

with other cells

insert link Inserts or edits a link text

unlink Removes the current

link

text

insert anchor Inserts or edits an

anchor

insert image Inserts or edits an

image

html Edit the HTML source

code

fullscreen Toggles fullscreen

mode

4. Inserting ImagesA description of the options available for inserting images with SSM Content Editor.

The SSM Content Editor allows you to insert image files stored in the server into

your document, using the button on the SSM Content Editor toolbar:

Clicking this button launches the Insert Image dialog:

The three columns of the dialog display: In the first column - a folder navigation list. In the second column - an object navigation list, from which you can

select your image file. In the third column - image preview, and options for alignment, size

and captions. In the example above, an image of a rose was selected - rose.png (rather large one, at its original size of 600*450 pixels).

According to the "Image alignment" option you choose, the image will be placed in your page (and the following HTML code will be generated):

lefthand (<img class="image-left captioned" src="rose.png" alt="rose" />);righthand (<img class="image-right captioned" src="rose.png" alt="rose" />);inline (<img class="image-inline captioned" src="rose.png" alt="rose" />).

You may also choose the size of the image you need. This is especially convenient when you deal with large images, as there is no need to use Photoshop or other external image editing application to crop or change the size of an image. The "Image size" dropdown list provides a choice between many sizes and formats:

Large (<img src="rose.png/image_large" alt="rose" />); Preview (<img src="rose.png/image_preview" alt="rose" />); Mini (<img src="rose.png/image_mini" alt="rose" />) - the

minimum-size image is formed; Thumb (<img src="rose.png/image_thumb" alt="rose" />) - a

thumb(inch)-size icon is made out of your image (little bigger than 2,5cm);

Tile (<img src="rose.png/image_tile" alt="rose" />) - a tile is made out of your image;

Icon (<img src="rose.png/image_icon" alt="rose" />) - an icon is made out of your image;

Listing (<img src="rose.png/image_listing" alt="rose" />) - a listing icon is made out of your image;

The following is an example of a page with an image in it.

4. Inserting LinksInserting internal, external and anchor links.

Internal LinksSelect a word or phrase, click the Insert/edit link icon, and the Insert/edit link panel will appear:

You use this panel by clicking on Home or Current folder to begin navigating the Plone web site to find a folder, page, or image to which you wish to make a link. In the example above, a page named "Long-tailed Skippers" has been chosen for

the link. After this panel is closed, a link to the "Long-tailed Skippers" page will be set for the word or phrase selected for the link.

External LinksSelect a word or phrase, click the Insert/edit link icon, select External under Libraries, and the External link panel will appear:

Type the web address of the external web site in the box after http://. When you press return or leave the field a preview will appear to check the address. If you paste in the web address, make sure you don't have duplicate http:// at the beginning of the address. Then click ok. The external link will be set to the word or phrase you selected.

5. Inserting TablesInserting, updating and deleting tables, columns, rows and cells.

Tables are handy for tabular data and lists. To add a table, put your cursor where you want it and click the Inserts a new table icon. You'll see the Insert/Modify table

panel:

Setting rows and columns is straightforward. You can add a summary of the table in the Summary field if you like. Table class refers to how you want the table to be styled. You have choices such as these:

Here are examples of these table styles:

Subdued grid:

Invisible grid:

After the table has been created you can click in a cell to show table resizing handles:

In the table above, the cursor has been placed in the "Special Leader" cell, which activates little square handles around the edges for resizing the entire table. It also activates the other table controls in the toolbar which, lets you edit properties of a row or a cell, lets you add and remove rows or columns and lets you split and merge cells.

Adding images to the 3600 view

When adding images to the 3600 view, please ensure to rename the images from 01, 02, 03, 04… onwards. This is a default setting for the image rotator function to determine the order of the images to be shown.

Please ensure that the image number is always set in two digits. Ex: 01, 02, 03, 04… 10, 11, 12 etc.

Please ensure that the image width is no more than 300 pixels.

Please ensure that all the images in one set of 3600 view are of the same size.