Adding and modifying the entry

Adding and modifying the entry

The following functions are used in the process of adding and modifying entries:

Date field
Allows set the date. Usually used for inserting date into the entry or setting the
expiration date of the entry.

Text field contains date in yyyy-mm-dd format (Picture 1.). By clicking on the of the field the calendar (Picture 2.) is opened. Calendar allows choose date quickly. Button “Today” dispalys the current day and marks it with yellow background color.

Picture 1. Date field

Picture 2. Calendar

Text field
Allows insert text data into the entry (Picture 3.). Usually limited to 255 symbols.

Picture 3. Text field

Text editor
Allows insert text data into the entry (Picture 4.). Maximal number of symbols is 65 500. Includes the basic functions of the regular text editor (for instance Microsoft Word): bold text, italic text, underlined text, copy, paste, cut, numbered list, bulleted list, inserting links, pictures, videos and tables.

Picture 4. Text editor

Text editor includes the following buttons:

Buttons „Bold“, „Italic“ and “Underlined” (Picture 5.) change the text into bold, italic and underlined text. Please note! Underlined text (not link) is used in internet extremely rarely because usually links are underlined. When inserting link system will underline it itself if that is set so in the style of the website.

Picture 5. Buttons „Bold“, „Italic“ and „Underlined“

Buttons “Undo” and “Redo” (Picture 6.) allow to undo and redo actions made in the text editor.

Picture 6. Buttons „Undo” and „Redo“

Marked text can be cut or copied using buttons “Cut” and “Copy” (Picture 7.).

Picture 7. Buttons „Cut“ and „Copy“

All three buttons – “Paste”, “Paste as plain text” and “Paste from Word” – allow to paste copied text into the text editor (Picture 8.). Please note! By copying text from other text editor (for instance Microsoft Word”) or some other source (e-mail, website etc.) it’s strongly recommended to use button “Paste as plain text”. Otherwise system may paste also style and code from the copied source and this may ruin the look and the code of the website.

Picture 8. Buttons „Paste“, „Paste as plain text“ and „Paste from Word“

Buttons „Left Justify“, „Center Justify“, „Right Justify“ and „Block Justify“ (Picture 9.) allow to choose text align. It’s recommended to use left justify as it makes easier for visitor to read left aligned text on the website.

Picture 9. Buttons „Left Justify“, „Center Justify“, „Right Justify“ and „Block Justify“

Buttons “Insert/Remove Numbered list” and “Insert/Remove Bulleted list” (Picture 10.) allow to create lists.

Picture 10. Buttons “Insert/Remove Numbered list” and “Insert/Remove Bulleted list”

Button “Remove format” (Picture 11.) is meant for cases  when pasted text includes styles (different fonts, text colors, different font sizes) in the CMS text editor. Mark this content and click on “Remove format” button.

Picture 11. Button „Remove format“

Buttons “Insert/Edit link” and “Remove link” (Picture 12.) allow to create/remove links. If you insert a website address or e-mail into the text and put space after that, the link becomes active (it will work as link on website) automatically. If you wish to make a word(s) a link, you have to mark it (them) and click on “Inser/Edit link”. When inserting link, you have to choose either this is a link to other page or e-mail.

Picture 12. Buttons “Insert/Edit link” and “Remove link”

To insert link to page (Video 1.) you have to choose in tab “Link Info” in drop-down menu “Link type” a choice “URL” and from drop-down menu “Protocol” choose protocol that you need (for usual website it’s “http://”) and then insert the address of the page in the field “URL”. Then you have to choose if the link will be opened on the website in the same or new window. For the last choice go to tab “Target” and choose “New window” from the drop-down menu “Target”. If you want the link to open in the same window, you don’t have to choose target, as the same window is the default choice. It’s recommended to choose link to open in new window if the link takes visitor outside of your website (the link is to some other website) and to open in the same window, if it opens a link from your website.

Video 1. Inserting a link that opens a website

To insert e-mail link (Video 2.) you have to choose “E-mail” from the “Link type” drop-down menu in the “Link info” tab and insert the e-mail address into the “E-mail address” field. You can also insert subject and body text for the email – those will be inserted into the e-mail automatically (if the e-mail software of visitor allows it)  when visitor clicks on the mail link.

Video 2. Inserting link that opens an e-mail

“Insert/Edit link” button allows also to upload files (Video 3.) Tab “Upload” allows you to upload any files, for instance RTF or PDF documents. It’s recommended to choose file links to be open in new window.

Video 3. Inserting a link that opens a file

Anchors allow to create lists (for example table of contents), that includes links. By clicking on those links will scroll the page to the particular part of text. To add anchor click in the text in place where you want the anchor to be and push “Insert/Edit Anchor” button (Picture 13.). To insert link that opens anchor, you need to mark the text that will be link, click on “Insert/Edit link” button and in drop-down menu “Link type” choose “Link to anchor in the text” and in opened drop-down menu “Select an Anchor By Anchor Name” choose the particular anchor (Video 4.).

Picture 13. Button “Insert/Edit Anchor”

Video 4. Inserting anchor and link that opens anchor

To insert a picture (Picture 14.) start with tab “Upload” (Video 5.) – the browsing field allows to upload a picture from your hard drive or any other disk.

Picture 14. Button „Insert/Edit Image“

When the picture is uploaded (Video 5.), system will let know about this with the alert window. By clicking on “OK” button the “Image info” tab will open where you can do following:

  • if the size of the picture won’t be big on the website, it’s recommended to change the size of the picture beforehand in some photo editor, but you can also change the size of picture in text editor: in field “Width” change the size of the picture. The width of picture must not be wider than the content part of the website, so usually it should be under 500 px (learn the exact width of your website from NMG). If picture is wider than 500 px, change its size to 500 (if the picture should be as wide as the content part of the website) or less (if the pciture should be beside the text). Picture’s height will change automatically;
  • in fields “HSpace” and “VSpace” you can insert number – it will create empty space of that size in pixels around the picture. So the text will not “run into” the picture. Usually 10-20 px is enough;
  • drop-down menu “Align” allows to choose the align of the picture (for this cursor must be in front of the text block when inserting picture) – usually it’s recommended to use “Left” or “Right” choices.

Video 5. Inserting image

If you wish that picture could be clicked into bigger size on the website (Video 6.), do the following steps:

  • upload picture. Picture’s original size should be somewhere between 800x600px and 1024x768px;
  • on tab “Image Info” insert in “Width” and “Height” fields the size of the thumbnail – 200-250 for width would be usually normal;
  • copy the address from “URL” field on “Image info” tab and paste it into “URL” field on “Link” tab;
  • on tab “Link” choose in drop-down menu “Display Target Image in a Lightbox” the type of navigation. If you choose „Lightbox (not in a group)“ visitor will have to click on each thumbnail on the page to see it in bigger size. You can also choose one of the groups – choices „Lightbox (group a)“, „Lightbox (group b)“ ja „Lightbox (group c)“ – and visitor can navigate using buttons “Next” and “Previous” among big pictures of that group. In the field “Lightbox caption” insert the name of the picture, for example “Opening ceremony of our company” – this text will be displayed on website under the big picture.

Video 6. Inserting clickable image

If you wish to insert a picture that will open a webpage when clicked on, insert in tab “Link” in the field “URL” the webaddress of the particular website and in tab “Target” choose “New window” in the drop-down menu “Target” and in drop-down menu “Display Target image in a Lightbox“  keep the choice “not set”

When inserting pictures, it’s important to keep in mind two advises that will help your website to be better found on search enginges:

  • the name of the picture file should: have only latin letters; have dash between the words if the name includes more than one word; describe in the best way the image. Example of correct picture file name: celebration-of-the-production-line-opening.jpg;
  • if the picture is not clickable to bigger size on the website and there is no name of the picture in “Lightbox caption” field, then in tab “Advanced” insert the name or short description of the image in the field “Advisory title”. For example: Celebration of the production line opening.
Button “Preview” (Picture 15.) alllows to see how the content in the text editor will look on the website. In the preview mode the content is displayed on the whole width of the browser, but on website it’s in fixed width.

Picture 15. Button „Preview“

Button “Maximize the editor size” (Picture 16.) makes the text editor field bigger covering the whole browser area. Bigger editor field makes easir working with large texts, many pictures or tables. By clicking again on the button will return the normal size of the text editor field.

Picture 16. Button „Maximize the editor size“

Button “Insert/Edit flash” (Picture 17.) allows to insert flash that is uploaded to the website/server. On tab “Info” insert the address of the flash file into “URL” field. The fields “Width” and “Height” allow to set the size of flash. The width should not be more than 500 pixels.

Picture 17. Button „Insert/Edit flash“

Button “Insert/Edit YouTube” (Picture 18.) allows to insert video that is uploaded to the YouTube portal. On tab “Info” insert the address of the video into “URL” field. The fields “Width” and “Height” allow to set the size of video. The width should not be more than 500 pixels. You can find the width to height ratio can be found on YouTube page of the particular video.

Picture 18. Button “Insert/Edit YouTube“

Button “Insert/Edit table” (Picture 19.) allows to insert tables. The width of the table should not be more than the content part of the website, usually 500 px (ask NMG for exact width of your website). For small tables you can choose to have no borders – for this insert “0” into “Border size” field.

When the table is inserted into the text editor, you can modify it by clicking on the right mouse button on the table area. If you wish to modify particula cell, row or column, click right mouse button on that particular place in the table and choose the action from the opened menu.

Picture 19. Button „Insert/Edit table“

Button „Source“ (Picture 20.) displays the content of the text editor field in HTML code. This function can be used to insert HTML code, for example Google Map, Facebook button etc.

Picture 20. Button „Source“

Drop-down menu “Font” (Picture 21.) allows to choose font. Although this choice exists in text editor, we recommend not to change fonts. The default font is chosen by designer and doesn’t require changing. Using other font may be useful only in the cases when you wish to emphasize some part of the text, for example some note or translation added to the main text.

Picture 21. Drop-down “Font”

Drop-down menu “Size” (Picture 22.) allows to choose the size of font.  Although this choice exists in text editor, we recommend to use “Format” drop-down menu if you wish to use different sizes of text.

Picture 22. Drop-down “Size”

Drop-down menu “Text color” (Picture 23.) allows to choose the text color. Although this choice exists in text editor, we recommend to change the color of text only in the cases when you wish to emphasize some part of text, for example some note.

Picture 23. Drop-down “Text color”

Drop-down menu “Format” (Picture 24.) allows to choose text style. For regular text there is a default choice “Normal”. There are also heading styles in 6 different sizes. By choosing the style it’s important to keep the same style through the whole website. All texts on your website have to be in the same style – for example, if you have decided that subheading would be written in “Heading 3” style, use this format for all subheadings on your website.

Picture 24. Drop-down menu „Format“

Browsing field
Browsing field allows add files (usually pictures or documents, Picture 25.) into the entry. It’s recommended to upload files no bigger than 2-3 MB as it takes long time to upload big files and consumes server resources. It’s recommended that only latin letters are used in the names of the files and no spaces are included.

Picture 25. Browsing field

Some browsing fields have also a text field for inserting their names (Picture 26.). This name is usually displayed on the website beside the file. For example it could be the name of photo.

Picture 26. Browsing field with the name field

 

Drop-down menu
Allows choose one option from several entries (Picture 27.).

Picture 27. Drop-down menu

 

 

Multiselect menu
Allows to choose one or several entries (Picture 28.). If you wish to choose several entries in a row, click on the first chosen entry, then push and hold down Shift key and click on the last chosen entry. If you wish to choose several entries that are not in a row, hold down Ctrl key and click on the entries that you wish to choose. If you wish to remove a choice from menu, hold down Shift key and click on the chosen entry to remove it.

Picture 28. Multiselect menu

Check box
Allows to choose one or several entries (Picture 29.).

Picture 29. Check box

Button „Save”
This button saves the data of the entry to the database (Picture 30.). If the saving process was successful the specific message is displayed (Picture 31.). If at least one of the required fields is not filled the system displays the error message (Picture 32.). After inserting the data user must push „Save“ button to save the data.

Picture 30. Button „Save”

Picture 31. Message about successfully added entry

Picture 32. Error message

Button „Save new”
Button “Save new” (Picture 33.) saves the data as well as button “Save”, but it doesn’t display the data of the saved entry after saving action. Instead of that it displays the form for new entry, where (depending on the module) some particular drop-down menus have the choices of the previously saved entry. This allows to speed up the process of saving similar entries with the same choices.

Picture 33. Button „Save new”

Button „Download“
This button downloads the file from the system to the computer’s hard or external disc (Picture 34.).

Picture 34. Button „Download“

 

Button „Upload”
This button uploads a file to the system (Picture 35.). To upload a file user defines the files by the browsing field and pushes „Upload“ button after that.

Picture 35. Browsing field and button „Upload”

 

Radio button
Allows to choose one entry (Picture 36.).

Picture 36. Radio button

 

 

Button “Show”
This button (Picture 37.) displays particular data.

Picture 37. Button “Show”

 

Navigation in entries
Each entry (Picture 38.) includes the name of user who made last change to this entry, the date and time of change and buttons “Previous” and “Next” that allow to move to previous and next entries.

Picture 38. Buttons “Previous” and “Next” and data of the user.

Warning alert in unsaved entry
If you have modified entry and haven’t saved the changes and wish to leave the page, browser displays warning alert (different warning message in different browsers) that asks if you are sure and wish to leave the page with unsaved data or you cancel the action and don’t leave the page.