Add/Edit article

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:

1. The complete, full article is displayed
2. A summary is displayed with a link leading to the full article
3. Article with a link to external site
4. Article with an uploaded file
5. Combination of above mentioned options

To access Article management panel select Articles from the main administrative menu.

On the left hand side you may find the Article user menu containing Quick link, Search, Tags and Preferences tab. Right hand side is reserved for the quick access to all of your articles and article options.

• Quick Link → Gives you an opportunity to easily access some of the basic article functions like add new article or view headlines, pending or archived articles. Right below it, article search filters will be listed.
• Search → If you need to search for your articles using some specific criteria or to make your article search filters, this is the place where you will do it.
• Tags → Very useful Vivvo feature that allows to tag important articles and filter them by significance.
• Preferences → There is the Quick link for most important article preferences.

To add a new article you should access articles section and click on the Add new article button.

You may find this button in the top right corner of the content page or in the Quick link in the left hand side user menu.

The article creation 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 how the content is displayed.

Set status → Select from the drop down list most appropriate status for your article. You may choose between:

• Active – select if you want your article to be visible for your visitors immediately (or on publishing date)
• Headline – your article will appear in the headline section of your website (at top of your home page)
• Pending – set pending status if you want your article to be reviewed by other moderators before it is published
• Archived – set article status to archived if you want to create an article that will be archived as soon as it is created

Category → Select a category or subcategory from the drop down menu that you feel the most appropriate for the text you plan to write. If you feel that new subcategory should be added, go back to the previous chapter to learn how to create it.

Author → This shows the name of the articles author. Type optionally some writer alias and then select who should be the author of the article from the dropdown menu - it lists all staff members.

Publishing date → Select the publishing date of your article. It will automatically throw in today’s date (your system’s time and date) which you can easily change. You may use this option if you want an article to appear on some specific date and time in the future.

Click on the calendar image and popup window will appear.

For date selection use < or > buttons to choose month or select desired month from the drop-down list. From the drop-down 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.

Show comments → Select if you will allow your users to post comments on your article.

Show rating (rate this article) → Select if you will allow your users to vote for your article.

Publish to feed → RSS (which stands for Really Simple Syndication) is a web technology that allows people to subscribe to receive updates from your website. When you publish a new web page or update an existing one, you may select the page to also appear as an item in various RSS feeds. People using RSS readers or news aggregator software then receive an alert anytime the page content changes. RSS also allows people to easily add links to your content within their own web pages.

Allows you to define keywords and description of your article.

• Search engine friendly name → We suggest you to enter page name that will be in some way related to your article content.
• META keywords → Keywords on your pages are used by search engines and they will be inserted in the hidden head area of your page. Enter 10 to 12 keywords in relation to your article separated by a comma.
• META description → This description is also inserted into the head area of your web page. It is used by search engines and is not seen by those viewing your page in a browser. Use up to 250 characters for your description.

When finished with setting up article preferences you may start with article creation process.

To create your article you must enter at least the title in the required field (if you do not enter it you will get a ‘Missing argument(s). (12) : Title’ 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.

• Abstract Image → 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 → 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.

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 link will be displayed under the summary of the article. These words will be underlined on mouseover as a sign that they are clickable. When your visitor clicks on Full story link a new page containing full article will appear.

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 drop-down 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.

1. Open the source document (the document from which you are pasting)
2. Select the text to be copied
3. Choose Edit → Copy from the File Menu
4. Return to the window containing the Vivvo content editor
5. Click inside of the content editor area. Make sure the cursor is blinking inside this area
6. Click the paste
7. Click Publish/Save button

1. While in the editor, highlight the text that is about to make a hyperlink.
2. Click the hyperlink icon on the editor toolbar . 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.

• Target enables you to select if the link will be opened in a new window or the current page.

• 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 add 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.

• Image URL tells you the location of the image.

• Image list offers you a list of images located on your server

• 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.

• 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.