Basic Tutorial on Evergreen's CMS

This page is a primer on the basics of adding and editing content within the CMS.

Still have questions? Please feel free to contact the web team anytime with questions, or suggestions for more topics that should be covered here.

Vocabulary

The CMS interface has four distinct sections.

CMS Vocab

Text Editor Buttons (most commonly used)

text editor buttons

Login

  1. To login, use your Evergreen login username and password.
    From on or off campus, go to cms.evergreen.edu.

    logging in on-campus


Opening a page

  1. In the dashboard, select the Starting page or choose the folder you would like to work on by clicking on the plus to expand the “evergreen.edu“ folder in the Asset tree.

    CMS dashboard

    asset tree structure
  2. Once the folder expands, the subfolders and page assets are displayed in the same folder structure as the web server.
  3. Select a page in the folder, such as home, which is indicated by the blue page icon to the left of the file name. By default, the web page will display in View mode inside the main system window, just as it would appear online.

    Preview of page within the CMS

Icons (most common)

CMS icons

Editing a page

  1. Click on the page you would like to edit in the Asset tree.
  2. Click Edit on the tabs OR select Edit from the drop down available next to the filename.
  3. Edit the content.

    Edit tab in CMS
  4. After you’ve finished editing the page, click Submit to save your changes in the CMS.
    Note: The submit and cancel button are located below the WYSIWYG (What You See Is What You Get) editor.
  5. Click Publish and then click Submit to publish the page.

    submit button in publish tab

Creating a new page

  1. To create a new page, copy an existing page by selecting a page from the Asset tree with similar features as the one you plan to create.
  2. Click Copy. Type a name next to System Name (with no spaces, caps or special characters). Click Submit.

    copy tab and system name

    Tip: Alternately, click New in the navigation menu and choose Page from the “evergreen.edu” folder.
    • Create a title.
    • Follow Steps 4–7.

  3. With the new page selected, create a title under Edit > Content.

    editing page title

    Note: Titles are used as the page title with “at Evergreen” automatically appended to the end and as the page heading (large red text).

  4. If necessary, click System and set the system name. This will be the name of the file in the Asset tree; the folder hierarchy on the left. It will also be part of the web address (make sure the Parent Folder is set to your main folder).

    editing system name

    Note: System names must contain only lowercase alphanumeric letters, numbers and underscores with no spaces or special characters.

  5. Click Content to add content to the WYSIWYG (What You See Is What You Get) editor.

    WYSIWYG (What You See Is What You Get) editor
  6. Click Submit to save your changes (the submit and cancel buttons are located below the WYSIWYG editor).
  7. Click the Publish tab and then click Submit to publish the page.

    Note:
    • To save, click Submit while in the Edit tab.
    • To save and publish, click Submit in the Edit tab and then click the Publish tab > Submit.


    submit button in publish tab

    Important: Follow through to “Submit” in the Publish tab or the process is not complete. Submitting while in the Edit tab will save the current changes to the CMS, but will not publish them.

Inserting an image

  1. When editing a web page, place your cursor where you want the image, and click on the  insert image icon insert/edit image icon on the toolbar.
  2. The insert/edit image window offers two options – one for internal images and one for external. Use the Internal tab and either select one already in the images folder, or select the images folder and click Upload.

    uploading image

    Tip: Alternately, to upload while inserting
    • Use the Internal tab, select the images folder.
    • Click Browse to choose an image from your computer.
    • Click Upload.

  3. Next to the Image field, you will see two icons – a red cancel/delete icon and an image icon. Click on the image icon to open a new window that will allow you to select an image to insert.

    insert image window

    Note:
    Certain image properties, such as size, may be adjusted within the WYSIWYG  itself. However, this method of resizing will not alter the file size or resolution and therefore should be used only for minor adjustments. Use the style “left” or “right” to format your image.
  4. Find and click on the image file you would like to insert by using the Asset tree to the left.
  5.  Click Confirm.
  6.  Next to the Alternate text field insert text about the image, this is used for screen readers and will appear when a cursor rolls over an image.
  7. Click Insert to insert your image.

    editing image style

    Image Properties:
    • Image Location - Required. This shows the directory and name of the image.
    • Alternate Text - Required. This text is used for screen readers and will appear when a cursor rolls over an image.

Uploading and linking to a document

  1. When editing a web page, highlight the word or words to be linked to a document.
  2. Click the insert link icon insert/edit link icon on the toolbar. 
  3. The insert link window will open with two tabs – one for internal links and one for external.
  4. Click the page icon to open a new window. Navigate and click the docs folder under the Parent folder you are working in.
  5. Click Upload in the action bar. Click Browse to choose a file from your computer. Click Upload to confirm and upload your document.

    preview of upload document page

    Note: Files cannot exceed 15mb in size within the CMS. As a general rule, images should be no larger than 30kb.

  6. After the document has uploaded, click Confirm.
  7.  In the insert link window, change the Target field to New Window.
    Note: Select New Window when linking to a document or file (i.e. PDF, Word, Excel).

    linking to an external document
  8. Select Insert to insert your link.

Uploading a document or image

Documents (.pdf, .doc, etc.) once uploaded,  can be linked as an internal link.  
Images (.gif, .jpg, .png) can be embedded within the page.
See “Uploading and linking to a document” for instructions.
Note: Select the appropriate folder: doc for documents, images for images.

  1. To upload a document or image, click on New in the navigation menu and choose Document or Image from the “evergreen.edu” folder.

    New image

    Note: Files cannot exceed 15mb in size within the CMS. As a general rule, images should be no larger than 30kb.

  2. Click Browse to choose a file from your computer.
  3. Click System and in the System Name field, rename your file if necessary, to something that is descriptive and short. Do not forget the file extension (.gif, .jpg, .png, .pdf, etc.).
    Note: System names must contain only lowercase alphanumeric letters, numbers and underscores with no spaces or special characters.
  4. If you need to change the location, select the path next to Parent Folder and browse to the appropriate location.

    image browse
  5. Click Confirm.
  6. Click Submit to upload the file.
    Note: Large files may take several minutes to upload, do not interrupt the upload process by closing the window or navigating away.

Publishing content

When a web page is published, all of the elements that make up that page are sent to the live web server (also called the production server), enabling it to be accessed as part of the web page.

  1. To publish a web page, select the page from the Asset tree and click Publish.
  2. Check whether you would like a publish report generated. This report will appear in your dashboard under messages, and will alert you to any problems. Click Submit to publish the page.

    publishing content
  3. Folders may also be published by following the same steps. All pages and subfolders within that folder will be published.
    Notes: Blocks (Navigation, Contact, Hours, etc.) can not be published alone, see “Editing and publishing a block” for instructions.

Editing and publishing a block

  1. Choose the block you would like to work with by selecting it in the Asset tree.
  2. Select Edit.

    editing block content
  3. Make the changes to the Block’s content.
  4. Click Submit to save your changes. IMPORTANT: Do NOT select Save Draft!
  5. Select the Parent folder the block is associated with.
  6. By default, it will display all the page assets under the Parent folder you have chosen.
  7. Use the Select All check box to select all the assets.
  8. Deselect the docs and images folders (this will speed up the publishing process). 
  9. In the dropdown at the bottom of the main view, select Publish.

    publishing block

    Notes: Using the technique to publish multiple pages select all and deselect the docs and images folder.
  10. Click Submit.

Refreshing a document

  1. Select a document from the docs folder using the Asset tree.
  2. Click Edit.

    refreshing document
  3. Click Browse and navigate to the document.
  4. If necessary, click System and change the document’s name to be the same as the linked document.
  5. Click Submit.
  6. Click the Publish tab and then click Submit.

    publishing updated document