villanova day cms editor’s guide

1

August 2011

Villanova DAY CMS Editor’s Guide

Introduction Your website has been converted to the Day Content Management System (CMS) to allow you the ability to easily edit and publish web content with an easy-to-use, intuitive, browser-based environment. Most of your everyday editing tasks are now more simplified, giving you control of your content. This document explains how to use the CMS, including an overview of all components and how to edit the content on your web site. Logging Into Day CMS

Once you are logged in, the welcome page displays. You will see various icons, but you will only need to click the globe icon for Websites:

The globe icon represents the Websites section which allows access to all the pages in your website. Once you click on the Websites icon, you will be taken to the Site Admin dashboard.

You may log in from campus or using the Villanova gateway: https://gateway.villanova.edu/. Using the Firefox browser, navigate to your site using the following base URL: http://author.villanova.edu/. You will need to use the credentials that have been provided to you that begin with d_. Both your login and password are the same.

2

August 2011


Getting to Your Site Pages Within the Site Admin panel, you will be able to find all the pages in your site: both those visible in your navigation and those hidden from the navigation. To navigate to your pages, click on the plus sign near the Home page so that the sub-sites expand. Keep expanding the directory until you see your site. More on the Sidekick

To edit or open a page from the Site Admin panel, double-click on the page.

Your page will open in Edit view and display the floating Sidekick Panel: It will help you add components to your page.

3

August 2011


Components Panel Page Properties Panel

The Components panel of the sidekick includes the General tab, the Columns tab, the Villanova tab, and the Others tab. Within each of these tabs will be the various available components. You can drag and drop the components onto your page. Please see the Overview of Components section for details on how to use each component.

This panel allows you to insert or change the page and navigation titles. Also, you can stop a page from showing in the navigation. Click the second icon on the Sidekick. (It looks like a page with a globe image on top). The Page Properties panel opens up for that page. By default, it will open up on the Advanced tab. This contains information that we have already specified in order to make your pages look as they do. You will not need to use this panel. The Global tab is where you would change or type your page title information. You will notice a checkbox that reads “Hide Page in Navigaton.” Checking this box allows you to turn off a page in the left-hand navigation. This is similar to the formerly used feature of “include” files. It allows you to have existing web pages that don’t expand your navigation. Some uses for this feature are: news stories, press releases, articles, several people profiles, etc.

4

August 2011


Editing Content Your new site is broken down into various elements or “component” paragraphs (components for short). You will know which elements are editable by scrolling your mouse over an area on the page. The editable regions will become highlighted in a blue box. Each of these elements can be edited easily by either double-clicking it or right-clicking and choosing “Edit”. To edit existing content, double-click the component to open it. (The blue outline may turn orange). For details on how to edit and use the other components, please see the Overview of Components section at the end of this document.

This is an example of a text-only component. Double-clicking the component opens the WYSIWYG text editor that contains all commonly used formatting icons and the styles that we have specified for your site.

The elements that you can edit will have a blue outline when you roll over it. (See above). Each element, or component, is editable by double-clicking it to open the Edit Panel.

5

August 2011


Inserting a New Component Most of the frequently-used components have already been selected to display on your pages. However, you may want to add to the content on your page. To do so, you add components to your page. To insert a new component:

1. Double-click the area labeled Drag components or assets here... or drag a component from the floating toolbar, or Sidekick to insert a new paragraph. This area appears wherever new content can be added: such as at the end of the list if other component paragraphs exist or at the end of a column.

Note If a component paragraph already exists, right-click the paragraph and select Insert. This inserts the new paragraph before the existing one.

2. After you select to insert a component paragraph, a list of the available paragraph types appears.

3. Click the component that you want. A window opens that allows you to configure your paragraph and add content.

Moving a Component To move a component:

1. Click the component you want to move. It will be highlighted in blue.

2. Drag the component to the new location. DAY CMS indicates where it can be moved to with a green checkmark. Drop it in your desired location:

3. Your component is now moved to its new position.

6

August 2011


Deleting Component To delete a component:

1. Select the component and right-click. 2. Select Delete from the menu. DAY CMS requests confirmation that you want to

delete the component as this action cannot be undone.

3. Click OK.

Adding Content DAY CMS makes it easier for you to insert content into your existing web pages. You can insert text directly from a Word document without the need to clean it in a text editor first. However, there may still be the need for some minor ‘cleanup’ of your content. To add content: (also see the section, Editing Content):

• Once you have your text component in place on the page, right-click. The text component dialog box opens up, allowing you to paste in your content from the document that you copied it from.

• When you have pasted the content in the window, you can edit it using the

WYSIWYG icons at the top of the dialog box. Please Note

• Once you are satisfied with the look of your content, click OK.

: A limited number of styles have been made available to you in order to maintain a standard VU branding consistency. The styling for the content within the components is done by preset styles that were built into the template and the components. Please stick to the styles given and DO NOT add any other styles or FONT elements, as they may affect the rest of the look of your content.

Editing Pages That Don’t Appear in the Navigation There may be situations where a page exists on your site, but does not show up in your left-side navigation. To edit those pages, you need to navigate to your Site Admin Dashboard to view all of your existing pages. To do so:

• In the Day CMS Sidekick (usually to the right of your page), Click the globe icon second to last on the right of the panel.)

• Once you click the globe icon, it will display your web site Site Admin Dashboard containing all of the web pages within your site.

Globe icon

7

August 2011


Overview of Components The following table of components has the most commonly used functions. This list includes component descriptions and locations available from within the Sidekick, when inserting a new component. They can be selected and dragged onto your page when editing. Title Section/Tab Purpose Column Control *2 or 3 columns

Columns Creates and formats 2 or 3 columns.

Course Catalog Villanova Allows you to dynamically pull the course information from

Banner. You can specify one course or the entire semester. Download General Makes a file available for download by the website visitor.

FAQs Villanova Creates a FAQ page by allowing user to insert each question so that it creates an FAQ list of question links at the top of the page.

Flash General Allows you to insert a Flash SWF movie file.

Focus Box Villanova Allows you to insert a focus or highlight box in either the left- or right-side columns.

Image General Displays an image with a (short) description displayed below the image.

Press Release Villanova Allows you to create press releases by creating ‘child’ pages for each release, named according to their date, so that they show up in chronological order.

Reference General Allows reuse of content from another page without redundant copies of that content. Changes to the original are automatically reflected.

Rich Text General Inserts a text item.

To edit these pages, double-click on them in the dashboard, and the page displays. If you have several of these pages to edit, repeat the same actions by going back to the Site Admin Dashboard using the globe icon on the Day CMS sidekick, as above.

8

August 2011


Rotating Facts Villanova Allows different facts to randomly appear in same location each time page is viewed.

Sidebar Text Villanova Allows you to highlight text on either of the side columns.

Social Media List Villanova

Allows you to insert the URLs for your social media pages, with correspondingly linked icons for each social media item.

Table General Creates a table with various formatting options.

Text Image General Inserts an image with text displayed to either the left or right.

Tri Section Villanova Allows for an image, text, and sub links. Column Control Component The Column Control component, found in the Columns section of the Sidekick, allows you to insert and format 2 or 3 columns. Within each column, you can insert another component such as text or image, etc. The 2 Column component is bordered by two blue rows noting “Start” and “End” of the columns. Within the two column areas, you can drag other components such as text or image. Note: You will NOT be able to type directly in this area unless there is a component within the box. Course Catalog Component The Course Catalog component, found in the Villanova section of the Sidekick, allows you to dynamically pull the course information from Banner. You can specify one course or the entire semester, in:

• a short form that pulls the course number and title, with the course number being a hyperlink that will open up into a popup box with the course description inside;

• a long form that pulls the full course description;

• a long form with section number, which pulls the full course description as well as section number for specific classes.

Note: Whether you need an individual course listing or the entire semester, the following fields should be completed as in the above example.

9

August 2011


Download Component The Download component, found in the General section of the Sidekick, allows you to insert a file that can be downloaded by the user. It creates a link of the filename. You can add a description that may be a repeat of the filename or a description of instructions as to what to do with the file. Note: Keep the filenames short and appropriately descriptive, so it is obvious to the user as to what they are downloading. FAQ Component The FAQ component, found in the Villanova section of the Sidekick, allows you to create an FAQ page by inserting each question and answer. Each question that is input creates an FAQ list at the top of the page, which contains hyperlinks that anchor to each question and its answer below. Note: There are two parts to inserting this component on your page.

1. Drag the FAQ Question List component to the page. By default it reads: “No FAQs Entered yet – use faq component to add FAQs.”

2. Then, drag the FAQ component to the page. After you input and submit your question and answer, it will appear within your FAQ Question List area. (You may need to refresh your page to see the question(s)).

Once you insert the Download component to your page, double-click to add the description and attach a file.

10

August 2011


Flash Component The Flash component, found in the General section of the Sidekick, allows you to insert a Flash .SWF movie. You also need to attach a ‘flat file’ version in .JPG format so that it accommodates users’ devices that cannot view Flash files. Once you drag the component from the Sidekick, Click Edit to open the dialog box to insert your files. Flash Tab Within this tab, you will double-click the field area for “Flash movie” to navigate to your hard drive for your .SWF file. There also is a field where you may put width and height specifications. If using this field, please be sure the size specs are proportionate. Alternative Image Tab Within this tab, double-click the field to navigate to your hard drive for a .JPG to be used as your ‘flat file’ version in .JPG, .GIF or .PNG format so that it accommodates users’ devices that cannot view Flash files. Users who are not familiar with Flash can disregard the Advanced tab. Focus Box Component The Focus Box component, found in the Villanova section of the Sidekick, allows you to insert a focus or highlight box in either the left- or right-side columns. The component includes an area for a title, a visual icon to go along with the title, text and an image. You can specify if you want the image to appear above or below the text. General Information Tab Within this tab, you can input the title for your highlight area, and you can choose a visual

Title

11

August 2011


icon that would best describe the content within that box. Text Tab Within this tab, you can input your text as you would in any text-based component. At the bottom of the panel, choose where you would like to align the text around the image. Image Tab Within this tab, you can choose your image as you would in any image-based component. Double-click the field to navigate to your hard drive for a .JPG, .GIF or .PNG file to be used as your image. Image Properties Tab Within this tab, you can insert descriptive alt text for your image. This is required for our users with disabilities who will be using screen readers.

Icons

12

August 2011


Image Component The Image component, found in the General section of the Sidekick, allows you to display an image and have it hyperlinked to a web page. Image Tab Within this tab, you will double click the field to navigate to your hard drive or a .JPG, .GIF or .PNG file to be used as your image. Advanced Tab Within this tab, you can insert alt text, a title, a hyperlink, a description/caption, and size specifications. The alt text and title text is required for our users with disabilities who will be using screen readers. Press Release Listing Component The Press Release Listing component, found in the Villanova section of the Sidekick, allows you to create press releases by creating ‘child’ pages for each release, named according to their date, so that they show up in chronological order. Insert the Press Release component on the main page that will be listing the various press releases. You will then have to create subpages named with the mmdd.html format. So a press release for January 1 would be named 0101.html. Note: You must name it this way for it to show up in the listing. To use this component:

• Create a main/landing page for your press releases, i.e., 2011 Events.

• Under that page, add new pages for each press release, naming them according to the date naming convention as listed above: mmdd.html.

13

August 2011


• Once you have all of your press release pages created, go back to the main/landing page and drag the press release component onto that page, as shown below:

Within this tab, you will type in the text/title for your press release feed.

These folders by year contain all of the press releases within each folder. Again, each individual press release must be created by mmdd.html

14

August 2011


Reference Component The Reference component, found in the General section of the Sidekick, allows you to reference content in a location within your website (similar to the ‘include file’ that was formerly used). The component provides a pointer to content from another site. If the original content is updated, the referenced content reflects the change. You will be able to drag the component onto your page and navigate to the exact page that will be referenced, or included, into your current page. Since each page contains various separate components, you may need to use several reference components to ‘include’ the entire page. Clicking the dropdown arrow enables you to navigate to the page within web site directory that you would like to include within the reference component. You will need to create separate Reference components for each piece of content that you are referencing. You will need to see from the available thumbnails as to which section to include in subsequent inclusions. Rich Text Component The Rich Text component, found in the General section of the Sidekick, allows you to insert text content by either typing into the box or copying and pasting from an existing document. When you open the blank component, you see a WYSIWYG text editor that contains all commonly used formatting icons and the styles that we have specified for your site.

15

August 2011


Rotating Facts Component The Rotating Facts component, found in the Villanova section of the Sidekick, allows you create a list of rotating acts with a title for your section of facts. The actual fact will be highlighted in a blue box. Facts Tab Insert the various facts that you will link to rotate. Title Tab Insert the title of your group of rotating facts. Sidebar Text Component The Sidebar Text component, found in the Villanova section of the Sidekick, allows you to highlight content on either of the side columns. It is similar to the Focus Box. Type in a heading and text for your sidebar (either on the left or the right).

16

August 2011


Social Media List Component The Social Media List component, found in the Villanova section of the Sidekick, allows you to insert the URLs for your social media pages, with correspondingly linked icons for each social media item. Table Component The Table component, found in the General section of the Sidekick, allows you to insert a table with various formatting options. See the breakdown of the menu icons below:

Creates a new table or edits the size, spacing and border properties of an existing table.

Edits the cell properties within the existing table. Apply width, height, alignment and choose whether or not a certain cell is a header or data cell. You can choose to apply it to one cell or the entire row/column.

Adds a row above the current row.

Site Info Tab: List the URLs that go directly to your social media pages.

List Info Tab: You can title your Social Media List i.e., Follow Us Online!

17

August 2011


Adds a row below the current row. Deletes the current row. Adds a column to the left of the current one. Adds a column to the right of the current one. Deletes the current column.

Text & Image Component The Text & Image component, found in the General section of the Sidekick, allows you to insert text content by either: typing into the box or copying and pasting from an existing document/image. You can align the text along the image’s left or right side. Text and Image Tabs These tabs are used the same as the Rich Text and Image Components mentioned previously.

Advanced Image Tab You can insert alt and title text for the image, specify the alignment of the text around the image, include a description/caption for the image, hyperlink to a web page, and size the image.

18

August 2011


TriSection The TriSection component, found in the Villanova section of the Sidekick, allows for an image, text, and sub links to be displayed side-by-side.

Text Tab This area allows you to input the text and title for your tri-section display.

Link List Tab This area allows you to enter several side links onto the right-side of your trisection. For each URL that you type, you need to place a text label with it. To add another URL, click the plus sign + icon.

Image and Alt Text Tabs This area allows you to choose an image that will be made into a thumbnail to portray your section of information, and create alt text to correspond with that image.

Title area

Image area Text area Sublinks area

19

August 2011


HTML Code Access

Please note that you cannot use custom FONTS if you are going to edit coding. Please be careful of what you add to the code.

The styles to be used are only the ones in the drop down window within the regular text component view.

To access the HTML code:

Click the Source Edit icon in the text editor.

If you make ANY changes while under the Source Edit view, you need to click the Source Edit icon AGAIN.

Click OK in order for their changes to be saved and rendered to the page.

villanova day cms editor’s guide

Documents