Latest releases
Latest stable release: 4.0.4
View changelog »
Copyright © 2005-2007 Spoonlabs d.o.o.
All rights Reserved.
An article is any type of text and/or images you want your visitors to read or see on your web site. An article stands for the content of your web site.
There are different styles when it comes to putting content on web sites:
To access Article management panel select Articles from the main administrative menu.
On you’re the left hand side you may find the Article user menu containing quick links, search, tags and preferences tab. Right hand side is reserved for the quick access to all of your articles and article options.

To add a new article select Articles link from the main administrative menu.

After requested page is loaded click on the Add new article button.

You may find this button in the top corner of the content page or in the quick links in the left-hand side navigation menu.

This section is divided into two main areas. The right hand side is used to input text and other content.
The left hand side handles a number of parameters, which control what and how the content is displayed.

Click on the calendar image
and popup window will appear.

For date selection use < or > buttons to select month or select desired month from the dropdown list. From the dropdown list select publishing year for your article and click on the correct day from the calendar to select publishing day. Also from the list you may select hour and minute when you want your article to become visible to your visitors.
Allows you to define keywords and description of your article.

When finished with setting up article preferences you may start with article creation process.
You may take these actions in different order (firstly add an article then define other parameters) but don’t forget to define publishing options!
To create your article you must enter the title and the body text in the required fields (if you do not enter them, either the name or the body, you will get a ‘Missing argument(s): Article title, Article body’ message).
In the Title field enter the title (name) of your article (for example, ‘This is the newest article posted on my site’).
Enter your Abstract (summary) in the text editor. Your text should be short two or three sentences long.

To add an image to your article, click Browse button and in the dialog box select the current location of the image that you want to add. Your image will be automatically resized to predefined values(for detailed info check section Preferences, later in this manual).
Image caption field has the same effect like Alt tag in HTML. When you point your cursor on some image on your website, this image description will appear.

The body content of the article can be managed by WYSIWYG Text Editor. Some of its main features will be explained later in this manual.
Your Article may contain a file attached to it (word document, PDF file, image etc).

To attach some document to your article click Browse button and in the dialog box that will load select the current location of the image that you want to add from your hard drive. Then select Open.
After you have finished with creation of an article you should press Save/Publish button and you will have one as well. Click on the Save/Publish button when you are done.
To see your newly created article click on View live site at the secondary administration menu at the top of your administration panel.

Your article will appear in the Latest news section on the home page and in selected category/subcategory.
The default Full story will be displayed under the summary of the article. These words will be underlined as a sign that they are clickable.
When your visitor clicks on Full story link a new page containing full article, or if you have uploaded a file, download link for that file will appear.

If you have attached some document to your article, click on Full story link and the whole article content will appear. Then you will notice Download attachment link that will be displayed under the article.
When you select this link, you will be offered to download a specified document to your hard drive.

If you have entered web page link under Publishing date field, in the left-hand side Option menu,
icon will be displayed under the article summary.
When you click this icon (pointed on the picture), you will be taken to the official website where the news was posted.
The WYSIWYG (What You See Is What You Get) editor allows you to edit and format text, insert pictures and other media files. You can copy and paste from Microsoft Word, Excel and other programs into the content editor. The text editor keeps the formatting from the original document.

On the image above, you may see the different buttons that are available in the editor. They are almost identical to the ones in Word, so we won’t explain the way they work in detail, we will mention only short description about each button.
Text style buttons: Bold (Ctrl+B). Italic text style (Ctrl+I). Underline text style (Ctrl+U).
Align left.
Align center.
Align right.
Align full.
Unordered list/bullet list.
Ordered list/numbered list.
Outdent/decrease indentation.
Undo the last operation (Ctrl+Z).
Redo the last operation (Ctrl+Y).
Insert a new link
Insert a new image in body text.
Cleanup code/Removes unwanted formatting. This function is useful when you copy contents from an Office product, for example.
Opens HTML source code editor.
Removes formatting from the selection.
Insert/edit embedded media
Select background color
Select text color
Select style
Select text formatting options
Select font family for your article
Select font size
Upload file dialog, for uploading images and other asset.
These styles describe the rectangular boxes that are generated from the article’s body elements. Each text box has a content area (text, an image) and surrounding border and margin areas. After you select the article content, from the Styles dropdown menu choose one of the offered option, highlight right or highlight left. This will create the article, similar as shown on picture beside.
Text can be copied and pasted directly from Microsoft Word or another program into the text editor. When editing in WYSIWYG mode, all the formatting will be kept when copying and pasting.
. This button opens a new window.
There are few fields in this window that you will have to fill out.
The first one Link URL is the address to which you want to link your selection.
You have to enter the full address, including http:// prefix.
Target enables you to select how the link is to be opened (new window, same page etc).
In the Title field enter text that you want to appear when user points a mouse cursor on it, it is an Alt tag actually.
Select Insert button and your hyperlink is inserted.
The Vivvo CMS content editor allows user to upload images directly into the content area. Click the Add Image button
on the content editor toolbar. The image properties dialogue box appears containing three tabs: General, Appearance and Advanced settings.

Image URL tells you the location of the image.
Next to the image description, type a name or description of the image. Keep it short. That way, if the image has trouble loading, the reader knows what should have been there.
Insert title (name) for you image in Title field.
In the preview box you can see your selected image.
In the drop down menu, select the Alignment. This will decide how the image is displayed in relation to the text.

Resize pictures before you upload them. The bigger your image is, the longer it will take for your web page to load.

Again, resizing should not be one of the adjustments that should be taken care of before the image is put in the editor but for some fine-tuning, you should type in dimensions of your picture in pixels.
If you want your image proportionally resized mark Constrain proportions option.
Horizontal and Vertical spacing allows you to put some spacing around the image so that the text around the image or the margin is not too close. Zero value won’t give you any spacing, but for example a 4 will give you nice spacing.
Border thickness refers to the border around the image. Type in the corresponding field zero, if you want no border, 1 if you want a tiny border, 2 if you need a thicker border, etc.
Click Insert to save. This returns you to the page being edited.
The image is now part of the content area.