Introduction to Easy Edit Suite +

Transcription

1 Introduction to Easy Edit Suite + Division of Information Technology Charles Sturt University Page 1 of 79

2 How to use this guide... 7 Sections of the guide... 7 Visual cues... 7 Additional resources... 7 Enlarging screenshots for easy viewing... 8 Introduction to Edit What is a content management system?... 9 What is content?... 9 What is an Asset?... 9 Use the same content in one page or many... 9 Single update flows through to multiple locations... 9 Finding Assets in Edit Asset status explained What is Workflow? How to access Edit Your responsibilities Permission levels Tools required to edit your website JavaScript Cookies System Requirements The Edit + Interface Introduction to the Edit+ Toolbar What you can do in the Edit+Toolbar Find and refresh Assets Close the Asset finder Introduction to the Sreen Selector About the Details Screen What you can do in the Details Screen About the Content Screen Working with containers (divs) Containers and their content types WYSIWYG (What You See Is What You Get) text editor Raw HTML About nested content Add a container Page 2 of 79

3 Change the content type of an existing container Change the order of containers on the page Check and/or change the name of a container Delete a container Edit container properties Introduction to the toolbar and buttons in Edit How to use Viper Content Editor Toolbar buttons Classes More information About the Workflow Screen About the Metadata Screen Related step-by-step instructions About the Linking Screen Location Links Direct Children and reordering menu items About the URLs Screen Example When would you change a web path? Change a web path CSU website content Accessibility on the CSU website Accessibility auditor Check a container in Edit Mode (all web authors) Check a page in Preview Mode (Web Coordinators) View an accessibility report Heading structure warnings Tables and accessibility Log in to Edit + (switch to Edit Mode) Working with Assets Find an Asset Create a new folder, page or file Refresh the list of Assets How to cancel your changes (revert) Move an Asset Delete an Asset Refresh the list in the Asset finder Page 3 of 79

4 Switching containers (divs) from raw HTML to WYSIWYG View new and updated content Change the order of Assets in the menu Display an Asset from another location using linking Display an Asset from another location using linking Add a new location for an Asset to be displayed Hide an Asset from the navigation menu Asset Listing pages Parent page name (1) Child page name (2) Description (3) Prepare content before you begin How to prepare good content Edit a standard page Update the page name Update the page Description and Keywords When would you do this? Step by step procedure How to restore default Keywords and Description Change a page location Edit page content Add a new container (div) Add a class to a paragraph Language tools Specify a language for non-english text Add and edit nested content Working with images Upload an image (create an image Asset) Insert an image into a page Remove an image from a page Move an image Add a class to an image Working with links Create a link to a page on the CSU web site Add a link to a page on another website Create a link to a file on your web site Link to a file on an external website Page 4 of 79

5 Add an link Change link text Remove a link Change the target of a link Anchors Working with tables Insert a table Select table, column, row or cell Default table width Edit table properties Apply a class to a table Tables and accessibility Remove extra space from table heading cells Embed a YouTube video in your page Prepare a container for your YouTube video Collect the YouTube code Working with right hand column content What is right hand column content? Find related content in Edit Working with folders Create a new folder Working with uploaded files Before you upload Upload one or more new files Make a newly uploaded file live Replace an existing file with a new version Working with staff profiles Log in to a staff profile Where to edit staff profile information Add a new image to a staff profile Link to publications on a staff profile (CRO link) Review, approval and publishing Workflow for a new asset Workflow for an existing asset What to expect when workflow is turned on What to expect when workflow is not turned on Apply for approval when workflow is not turned on (write permissions) Page 5 of 79

6 Apply for approval when workflow is not turned on (admin permissions) Always use Safe Edit Compare your edits with the Live version Make a new Asset live Internet Explorer Unsupported Browser warning Display the Menu bar in Internet Explorer Tools menu not visible How do I display the Command bar in Internet Explorer? Turn off 'Display intranet sites in Compatibility View' How do I clear my cache in Internet Explorer? Install Internet Explorer 8 or 9 on a CSU owned Windows computer Security Warning in Internet Explorer Unable to login Reload (refresh) the page Classes not applying to images in Internet Explorer Other browsers Edit+ is slow or not displaying correctly Cannot edit a form Exporting from submission logs Error 'Nonce token is invalid' Unable to acquire lock Visitors cannot see an Asset or recent changes made to an Asset Visitors see a red x or the Alt text instead of an image Visitors cannot see recent changes made to an Asset that is Live Visitors are prompted to login to the CMS (cannot access an Asset) MySource Matrix login prompt CSU login prompt Notification of outages and issues with the CMS Notes about HTML (for advanced users) Page 6 of 79

7 Section 1 - Introduction to Edit+ How to use this guide This guide can be used during training, and after you have completed the training. Use the guide as a reference when you want to create, edit, publish or modify the content you manage on a CSU website. Sections of the guide The guide is in three sections: Section 1 Introduction to Edit + during training, and for those users who like to know more detail about what they're doing, background information answers Why we do things a certain way, and How different parts of Edit + function. Section 2 - Add, modify and delete CSU web content this is where you'll find step by step instructions for how to complete content tasks are available in Section 2 - Add, modify and delete CSU web. Go straight to this section when you want to perform a content task such as adding, updating or deleting an Asset. Section 3 - Troubleshooting guide when things go wrong, use this section to do the first check of how to fix the problem. Visual cues Throughout this document we've used visual cues to help draw your attention to important information. Icon Use in this document Indicates an link to some useful information on a website or wiki. Indicates a handy hint. Read the text next to this icon for additional information. Additional resources Indicates something you need to watch out for. Read the text next to this icon carefully. For more detailed information, there are additional online resources available from a number of sources Resource name Squiz Edit+ Manuals from Squiz CSU Accessibility standards and policy CSU Website Contacts list Location Page 7 of 79

8 Enlarging screenshots for easy viewing You'll find screenshots throughout this guide. If you are viewing the online (pdf) version of the guide,zoom in to enlarge the screen shots if you want to see more detail. Zoom back out to return to a comfortable reading size. Zoom controls will differ depending on which browser or program you're using to read the file, but you will usually find them in the toolbar. Page 8 of 79

9 Introduction to Edit+ What is a content management system? The CSU website is updated using a Content Management System (CMS). A CMS allows content authors and editors to create, edit, publish and delete content behind the scenes of a website. The CMS we use to update most of the CSU website is Squiz Matrix. There are two 'views' of Squiz Matrix available to web teams, authors and editors, depending on the kind of work they normally need to do on the site. The Admin interface is for advanced users and technical staff. The Admin interface is not the focus of this guide. Most CSU web authors and editors use Edit+ to create, edit and publish their content. This guide talks about Edit+ What is content? Web content is much more than text and images. On the CSU website, web content can mean web pages, or even the text on a page. It can mean page titles, downloadable files, videos, sound files and many other types of information. Depending on which sites you are responsible for updating, you may find you need to update many different kinds of content as part of your work. What is an Asset? Every item in the CMS is an Asset. Web pages, images, PDFs and other files are all examples of Assets within the CMS. Each Asset has a name (which you can change) and a unique Asset ID e.g. # (which you cannot change). Some common examples are shown below Folder Standard Page Image PDF File MS Word Document MS PowerPoint Document MS Excel Document Calendar Event The main advantage of an Asset based system is the ability to re-use content in multiple locations. For example, an image file displayed on one page of your site can also be displayed on other pages, without the need to upload a second file. This saves you time as a web author or editor and it can also improve the speed at which pages display for visitors to the website. Use the same content in one page or many Information on one page can be displayed in many pages in many locations. Single update flows through to multiple locations When updates or changes need to be made you only need to modify one Asset and it will instantly update every location where it is displayed. Page 9 of 79

10 Finding Assets in Edit+ In Edit + you will use the Asset Finder to select and open Assets. In the Asset Finder you can also see: The type of asset, indicated by the icon beside it The status of the asset. See Asset status explained on page 11 The relationship of Assets this is indicated with blue shading. In the image below, note the 'lineage' of the selected Asset. The selected Asset is shaded with a darker blue. You can see a paler blue Asset shading on the Asset's parent in the column to the left of the Asset, the parent's parent in the column to the left of that one etc. etc. Assets not lining up properly? If the Assets seem all higgledy piggledy and not lined up properly, or if you can't see Asset names properly, you may need to reset the zoom on your browser back to the default level. Press Ctrl and 0 [that's a zero!] on your keyboard to restore the zoom to default. Page 10 of 79

11 Asset status explained Every Asset has a status. Each Asset will start its life 'Under Construction' and will only be visible to logged in web staff. As the Asset is created, updated, approved and published it will go through a range of status changes until it is 'Live' and visible on the website. The table below shows the different status types you might see. The exact status options available to you will vary depending on whether workflow has been set up in the section you work on. You can change the status of an Asset in the Details screen. See About the Details Screen on page 17. Status and Colour coding Under Construction (light blue) Live (light green) Safe Edit (pink) Safe Edit Pending Approval (purple) Description When you create a new Asset such as a page, image, PDF or Word file its status is automatically set to Under Construction. This means it hasn t been published yet. The only people who can see Assets with this status are web page editors who are currently logged into the CMS and have editing rights to the section. Regular visitors to the website cannot see Assets which are Under Construction. When Assets that are Under Construction are viewed in Preview Mode they have ((double brackets)) around their title. You can also see the ((double brackets)) if you are logged into your site and not editing. When an Asset is live it has been through the approval process and is visible on your website. If it is located in a publicly accessible area of your website it can be viewed by anyone visiting your page. If it s in a secure area it can only be viewed by those with a CSU login. When an Asset s status to Safe Edit you can make changes which will not be reflected on the live site until the Asset is made Live. While you are working on the Asset in Safe Edit the original Asset is still available to people viewing your site. Once you change the status from Safe Edit to Live your Safe Edit version will replace the existing live version. When an Asset is in this status, it indicates that workflow has commenced and is in progress. Page 11 of 79

12 Status and Colour coding Safe Edit Approved (orange) Up For Review (dark green) Archived (brown) Description When changes to an Asset (made in Safe Edit) have been reviewed and approved by a Web Coordinator (or staff member with the ability to approve) the Asset status is set to Safe Edit Approved To Go Live. This means the Asset is ready to go live. While an Asset has this status, it can still be set it back to Safe Edit if a staff member with the correct permissions notices further changes that need to be made. The Asset cannot be made Live direct from Safe Edit status. It can be sent live from Safe Edit Approved to Go Live. This status is used to mark an Asset which needs to be reviewed by your team s editors. The Asset remains visible on the website for visitors, this status has no effect. This status can be scheduled for a particular date or time, e.g. an Asset can be set to come up for review automatically every 6 months so you or your team can check the currency and correctness of the content. To make changes to an Asset that is up for review you must change the Asset's status to safe edit. If no changes need to be made the status can be changed back to live. If the Asset needs to be kept, but you don't want visitors to the website to be able to see it, change the Asset status to Archived. When an Asset is archived it s not visible to people who view your site and you cannot make any changes to it. You would only use this status is if you needed to keep a superseded Asset for future reference. Archived Assets can still be viewed by your team s editors when logged into the CMS. Once an Archived Asset is no longer needed it should be deleted (sent to the Trash). What is Workflow? Workflow provides a path for drafting, approval and publishing an Asset. Not every section of the CSU website has had workflow turned on. For the sections where workflow has been turned on, an automated notification is sent to the relevant people when a web author or editor requests an Asset be approved or made live. How to access Edit+ If you have an up-to-date computer, access the internet and a username and password, you'll use a web browser to log in to Edit+ and perform simple tasks like Adding, removing or modifying text Page 12 of 79

13 Uploading new documents and images to add to your site Uploading new documents and images to replace existing ones Creating new web pages Linking to files and other web pages Deleting unwanted items (if you have administrative permissions) More information about system requirements If you are not sure if your computer is up-to-date, check System Requirements on page 14 Your responsibilities Once trained it s your responsibility to make simple edits to your section s web pages. If you cannot edit or access a particular area you may not have the necessary permissions. Your Web Coordinator can resolve this for you. If you do not have a Web Coordinator contact the IT Service Desk who can escalate your request to the appropriate team. Any advanced changes, new designs, layouts or special features are the responsibility of staff trained in using the Admin interface. These people are called Web Coordinators. Introduction to Edit+ provides you with a basic level of training, however, there are a number of sites which have customisations. Your Web Coordinator is responsible for providing the additional training and advice required to edit additional items. Permission levels If your role with CSU includes web updates, you will receive a log in and training. Depending on your role, you may have: administrative level permission (also known as 'admin') or standard permission (also known as 'simple' or 'write' access) Permission levels and workflow Some CSU sites also have workflow applied. On sites where workflow is applied (such as the training and assessment sites) one or more people have approval permissions. Approval permissions allow staff to approve or reject changes and also to put a page or file live. A live page or file means it can be viewed or accessed by visitors to our website. Staff without editing permissions can be nominated and granted approval permissions so they can login and approve your work in Edit+. For more information about Worfklow, see What is Workflow? on page 12 Tools required to edit your website You access Edit+ through your internet browser. This means you don't need to install extra software on your computer. However there are minimum System Requirements to ensure Edit+ will work. JavaScript JavaScript needs to be enabled in your web browser for Edit+ to display properly. It s usually enabled by default in most web browsers. If you are having display issues consult the browser help menu to find out how to enable JavaScript. If JavaScript is already enabled and you are still having display issues ensure you meet the requirements outlined in the table and check the Troubleshooting section of this guide. Cookies Cookies must be enabled to access Edit+ and are usually enabled by default in most web browsers. Page 13 of 79

14 System Requirements Operating System and browser compatibility Operating System(s) Windows XP SP3 and above Internet 8 is the latest version that Windows XP can run Browser name and version(s) Internet Explorer 8, 9 and 10 (Display intranet settings in Compatibility View must be turned off) Mozilla Firefox latest extended support release Google Chrome latest stable release Available from CSU owned staff computers from Install Software icon on your desktop Personally owned use Windows Update or download latest version for your operating system from CSU owned staff computers obtain installers rights and download latest extended support release from GB/firefox/new/ Personally owned you must have administrative rights to install latest extended support release from GB/firefox/new/ CSU owned staff computers obtain installers rights and download latest stable release from me/browser/ Personally owned you must have administrative rights to install latest stable release from me/browser/ Mac OS X Safari latest stable release CSU owned staff computers Obtain installers rights and use Software update to obtain latest stable release Personally owned Use Software Update to install the latest stable release Mozilla Firefox and Google Chrome CSU owned or personally owned Same as Windows (see relevant section above) Page 14 of 79

15 The Edit + Interface When you log in to Edit+ you'll see the Toolbar (a black strip at the top of the page) where you'll find the Asset Finder See Introduction to the Edit+ Toolbar on page 15 the Screen Selector (a ribbon with six large icons). These icons are the way you access Asset details, edit content, managing linking and update metadata. See Introduction to the Sreen Selector on page 17 the Details screen for the selected Asset. Use the screen selector to move to other screens. See About the Details Screen on page 17 See About the Content Screen on page 19 See About the Workflow Screen on page 29 See About the Metadata Screen on page 29 See About the Linking Screen on page 30 See About the URLs Screen on page 31 Introduction to the Edit+ Toolbar The toolbar is visible at all times when you are logged in to Edit+, right at the top of your screen What you can do in the Edit+Toolbar The table below lists what you can do in the toolbar, with links to more detail for more complex tasks. Function and location on the toolbar Create a new Asset Preview / Edit toggle View page name, status and Asset ID More information and step-by-step When you click New in the toolbar, the Asset Creation Wizard appears. See Create a new folder, page or file on page 36 If you want to see what your page will look like when it is published, click Preview. Click Edit again to continue working on it. When you are in Preview mode you'll see two new buttons: Compare to Live See Compare your edits with the Live version on page 72 Accessibility See Accessibility on the CSU website on page 33 To see a snapshot of the Asset, including its name, status, Asset type, Asset ID, published date (if it has ever been live) and last modified date, click the section of the toolbar that shows the Asset name and Asset ID. A small dropdown box appears, with all this information. Click again to hide the information. Page 15 of 79

16 Function and location on the toolbar Log Out and Exit Edit Mode Find and refresh Assets Save your changes More information and step-by-step When you are finished editing and want to move onto other work, it's best to log out of Edit + Logging out is recommended, rather than just closing down the browser. Click the little head and shoulders silhouette and choose Exit Edit Mode or Log out. Exit Edit Mode to see the web page without the Toolbar or other Edit+ features. You remain logged in so you will still be able to see unpublished items, including items in ((double brackets)) Log Out to log out of Edit+. You will need to log in again next time you want to work on website content This magnifying glass icon is how you access the Asset Finder For more information about how to use the Asset Finder, see Find and refresh Assets on page 16 Whenever you make a change in Edit +, the Save button becomes active by changing colour from grey to green Save regularly to ensure you don't lose your work. Find and refresh Assets Use the Asset Finder to select and open an Asset you want to edit. 1. Click the Find an Asset icon. 2. The Asset Finder opens and shows where you are currently located in the website. Notice the Asset 'lineage' at the top of the Asset finder. The left most column shows the top level of your site, and then each column towards the right shows the next levels. The Asset you're currently in is highlighted with a darker colour. Refresh the list of Assets If you've added, moved or deleted an asset, the Asset Finder may not be updated immediately. To be sure you're seeing an updated list of Assets, open the Asset Finder and click Refresh Assets. Close the Asset finder If you're in the Asset Finder and want to close it, click the cross in the top right hand corner. The Asset Finder closes and you're back in the main Edit+ screen. Page 16 of 79

17 Introduction to the Sreen Selector The screens available on the Screen Selector will vary depending on the type of Asset that is being edited, and on your permissions, e.g. if you are editing a page and you have permissions to edit the page the available screens are Details, Content, Metadata, Workflow, Linking and URLs. The icon for the screen you are in appears in colour while the non-active icons are in black and white. About the Details Screen When you login to a page in Edit+ (by adding /_edit) at the end of the web address of the page, the page is automatically put into Safe Editing mode and opens the Details screen. This is what a standard page looks like on the Details screen. What you can do in the Details Screen The table below shows what you can in the Details screen. View current status Change current status The current status of the page is displayed as a colour bar and by name, e.g. in the screen grab above, the Current status is shown as pink and with the text Safe Editing. Follow these steps to change current status of an Asset from the Details screen: 1. Click the down arrow in the Change? Field and choose the required status from the drop down list. 2. Click Save. The status options available in the Change? field are not the same for everyone. They differ depending on your permission level (standard or admin) and whether you are working on a site which has workflow applied. Page 17 of 79

18 View future status If a future status has been set, a number appears in brackets on the View future status button. 1. Click View Future Status beside the Change? field. 2. If future status changes have been scheduled, they appear in Scheduled Runs section of the page. Set future status 1. Click View Future Status beside the Change? field 2. Additional fields appear on the screen. Add New Future Status - select the appropriate status from the list provided Cascade Status Change - check this box to cascade the future status change to all child Assets Set Date & Time For New Future Status - select the date and time that the Future Status change will occur OR click Set Date an& Time to Next Run. 3. Click Save. Delete a Future Status change To delete a Future Status change: 1. Put a tick in the delete box next to the relevant change in the list 2. Click Save. This Future Status change will no longer occur View and change Asset information View and change related image (if applicable) The Asset information in this section of the Details screen will vary depending on the type of Asset, e.g. for a Standard Page Asset, you can change the Page Name and Page Short Name, while for an Image Asset, you can change friendly name, alt text, caption, file name and even upload a new file. Related images are rarely used in the CSU website. If your Asset has a related image you can view and change that here. Enter an Asset ID in the field or click Select to find an image Asset. Page 18 of 79

19 About the Content Screen The Content screen is the screen which allows you edit the content of the Standard Page. When you log in you need to switch from the Details screen to the Content screen so you can view your page and start editing. Screengrabs below show a content page with content already in place and a page with no content in it yet. Working with containers (divs) Containers (also called divs) are the building blocks of the page. In the screen grabs above, each page has only one container. Most pages have more than one container. Each container is actually an Asset, with its own Asset ID. Containers are also known as divs and the term can be used interchangeably. Web Coordinators will usually refer to them as divs (short for divisions used to divide up the page). Containers are used to separate your content into sections. A web page may look to the visitor as though it is just one section of content, when it is actually multiple content containers (divs) on the same page. Containers and their content types Containers can have different content types. The selected content type affects how the container displays and what can be done with it. The three container types we talk about here are: WYSIWYG - see WYSIWYG (What You See Is What You Get) text editor on page 20 Raw HTML - see Raw HTML on page 20 Nested content see About nested content on page 21 Page 19 of 79

20 WYSIWYG (What You See Is What You Get) text editor WYSIWYG is the default content type for a container. WYSIWYG stands for What You See Is What You Get. This means (just like in Microsoft Word) that the content displays as is (instead of showing the html code behind the scenes). WYSIWYG containers have a toolbar (The Viper Content Editor) with buttons you use to format content. As you edit content, you see the formatting appear as you apply it. It doesn't look exactly like the live page will look, and this is because the live website has had styles applied to modify the look and feel so that it complies with CSU's branding, for example a link in a WYSIWYG appears blue and underlined while in the web page, the same link appears with a dark grey underline. Raw HTML Sometimes you will put a page into Edit Mode and discover there is no WYSIWYG toolbar and content is displayed in HTML (Hypertext Markup Language). This means the content is in Raw HTML format. A feature of HTML is that formatting is shown through tags, rather than appearing in the content itself. When you look at the raw HTML you see tags. The tags are translated to formatting on the web page for visitors to the website. Each formatted element (paragraph, heading, link, bulleted list etc.) is enclosed within an <opening tag> and completed with a <closing tag> Examples <p>starts a paragraph and </p> ends a paragraph <h2> starts a Level 2 Heading and </h2> comes at the end of a level 2 heading <a href="url/asset">starts a link and </a> ends a link <ul>starts a bulleted list and </ul> ends a bulleted list Within a bulleted list, <li>starts a list item and </li> ends a list item Why use Raw HTML? Normally you'll find a container has been set as Raw HTML instead of WYSIWYG if there is extra code in the container to run a script or some other kind of advanced feature such as rotating banners, particular slide-its and JavaScript. If you don't know how to use HTML, ask your Web Coordinator for assistance. For more information about Raw HTML, see Notes about HTML (for advanced users) on page 79 Page 20 of 79

21 About nested content Nesting content is a way of displaying a container on more than one page. You can display the same container on many pages if you choose to. To update nested content, you only need to make updates to the original container. The changes then automatically flow through to all the nested versions as soon as the updated container is made live. Nested content is great for information that has to appear in many pages, e.g. contact information. How to nest content in a page To nest content in a page, you must start by adding a new Nested Content container to a page. Once you have created a nested container, you need to specify what content will be nested in it. Follow the steps below to nest content in page. How to edit nested content Nested content can only be edited in its original location. Sometimes you may start to edit a page and then discover the Asset you want to edit is nested from another location. Follow these steps to edit nested content: 1. Use the information in the nested content container to identify the Asset ID of the nested content 2. If the content is owned by your area, search for the content using the Asset Finder and edit as required. 3. If the content is owned by another area, contact the area that owns the content. Use the CSU Website Contacts list at to ascertain who owns the content. How to remove nested content If there is nested content on your page and it is no longer required, follow the steps below to remove it: 1. Open the page that has the nested on it 2. Switch to the Content screen 3. In the nested content container click the x next to the Select button to clear the selected Asset 4. Click Save Page 21 of 79

22 Add a container Follow the steps below to add a container to a page: 1. Click the plus sign and the Insert New Container popup opens (as shown to the right) 2. In the ID name: field enter a unique name If you don't add a name, the system will create a unique identifier for the container here, e.g. Content DIV It's a good idea to give a meaningful name to a new container. This will help you identify the container when you are trying to change container order in a page or identify nested content. 3. Presentation is set to Block level by default (leave this unless you require another type). 4. Leave CSS class blank unless there is a particular CSS class you need to use (your Web Coordinator will provide information about what s available for your website) 5. Content type defaults to WYSIWYG. Leave this unless you require another type. 6. Click Insert and your new container appears on the Content screen 7. Click in the container to start editing. The toolbar becomes active. Change the content type of an existing container From time to time you may need to change the content type for a container. Follow the steps below. 1. Click Edit Container Properties on the top right of the container 2. Under Content Type, click the down arrow next to Type and select the content type you want to change the container to 3. Click Set Properties 4. Click Save. The content type does not change until you save Change the order of containers on the page When you have more than one content container on a page you can change their order. 1. Click the re-order icon. The Re-order Content Containers popup lists the existing containers. 2. Change the order of containers by dragging them where you need them. Page 22 of 79

23 Check and/or change the name of a container Follow the steps below to view the name of a container and change it if required: 1. Click Edit Container Properties. The Edit Container Properties popup appears. 2. The container name is in the ID name field. If the container has not been given a name, the default name for the container appears here. Highlight the text in this field, enter a new name to replace the existing name 3. Click Set Properties to rename the container and then save Delete a container Each page must have at least one container. You can only delete a container if is not the last one on the page and only if you have admin permission. If you need a container deleted but you do not have admin permissions, ask your Web Coordinator or an editor who has admin permissions on your website. Follow the steps below to delete a container from a page: 1. In the Details screen, change the page status to Under Construction 2. Go to the Content screen 3. Click Delete Container. You will be asked if you are sure you want to delete the container in case you pressed it accidentally 4. Click Confirm to delete the container Edit container properties Use the Edit Container Properties popup to lookup and change the name of the container, Style Information and Content Type settings. You can also enter a Description for yourself or for other editors to refer to. Follow the steps below to edit the properties of a container: 1. Click Edit Container Properties 2. The Edit Container Properties popup appears 3. Make change/s as required 4. Click Set Properties when you have finished making changes Page 23 of 79

24 5. Click Save Page 24 of 79

25 Introduction to the toolbar and buttons in Edit+ The toolbar in the WYSIWYG content editing window includes a toolbar, containing buttons you can use to format text How to use Viper Content Editor Follow the steps below to see the edit tools 1. Ensure the page you want to edit is in Safe Edit status For more information on how to do this, go to Change current status on page In Edit+, go to the Content screen for the page you want to edit 3. Click in the container you want to edit 4. The content becomes editable and the toolbar becomes active. 5. Now you can edit content 'inline' or access the tools from the toolbar Format text inline super easy editing Select or double click on the text you want to format. A mini toolbar appears with tools that are relevant to the content you are editing. Toolbar buttons To read more about the buttons in the WYSIWYG content editor, go to WYSIWYG (What You See Is What You Get) text editor on page 20 Toolbar button Description Bold and italicise Subscript and Superscript Do not use this formatting on the CSU website Apply a class - Click this button to apply a class to content such as text or an image. A class applies special style to a content element. More information Classes on page 29 Add a class to an image on page 51 Add a class to a paragraph on page 47 Apply a class to a table on page 59 Page 25 of 79

26 Toolbar button Description Remove format use this to remove formatting from text copied from other programs such as Microsoft Word. When content is copied from another program to the Edit+ editor, styles and formatting can remain with the copied text and cause unexpected display issues. Highlight the text you want to clean and use this button to remove superfluous formatting from copied text Toggle justification text is left aligned by default. Normally you would not change this. You can however use this if you need to centre or apply other justification Formats use this to apply particular formats p stands for paragraph and is selected by default, DIV stands for division and in some locations they are used to display content in a customised way (your Web Coordinator will advise if you need to use particular DIVs on your site pages with tabbed navigation and landing pages with a grid layout use them), Quote displays text in a quote and is used to emphasise (see below left), PRE displays text in a fixed width font (usually Courier) and is also used to add emphasis (see below right) Headings use this button to apply heading styles The name of a page automatically has Heading 1 applied. There should only be one Heading 1 on each page. Use H2 onwards to apply heading styles on your pages. The screenshot on the right shows H2 is currently applied to the Printing Options and Costs. Click the required heading style to apply a different one. Undo and redo use the arrow pointing to the left to undo an action (or use keyboard shortcut Ctrl Z) use the arrow pointing to the right to redo an action (or use keyboard shortcut Ctrl Y). Redo only available once an action has been undone. Unordered list and ordered list use the icon with bullets to create an unordered (bulleted) list use the icon with numbers to create an ordered (numbered) list. Click a bullet or number button to remove list item formatting from selected text. Page 26 of 79

27 Toolbar button Description Indent and outdent these buttons will indent and outdent highlighted text Use indent on bulleted lists to create another level of list items underneath Outdent only becomes available for items which have been indented. Insert image use to insert an image on your page (remember you must use the add new Asset wizard to upload it to your site first it will then be available for you to select from the Asset Finder). See Insert an image into a page on page 50 Insert table use the one on the left to create and insert a table. See Working with tables on page 58 Horizontal rule use this button to insert horizontal line. This can be a useful way of Insert (create new) or edit an existing link use this to link to another page or file on your website, to link to a page or file on an external website or to an address. See Working with links on page 52 for step by step instructions Remove link use this button to remove a link from text. See Remove a link on page 54 Anchor use this button to create an anchor to a specific location on a page. An anchor on a web page is just like a bookmark in a document. You can use it to jump to another location on the same page or on another page. See Anchors on page 55 for more information Special characters use this button to open the special characters list where you can select and insert one or more special characters. Click the category on the left hand side to display all characters from that category. The screenshot to the right shows the characters in the Symbols category Search & replace use this button to search for particular words and replace them (just like in Word). You have the option to replace all instances of a particular word by clicking Replace All or just choosing which instances to replace by clicking Replace. Find Next locates the next instance of the word you are searching for Language tools provides 3 options. See Language tools on page 48 for more information Accessibility Auditor use this button to evaluate the accessibility of the content of your container or page. See Accessibility on the CSU website on page 33 for detailed information about the AA and instructions for use Page 27 of 79

28 Toolbar button Description Source View provides advanced HTML editing (line numbers, colour coding, code formatting, auto indenting and edit in new window). Browser compatibility Works well in Firefox, has limited support in Internet Explorer - advanced editing features fall back to standard code editing with basic formatting in IE8+ Page 28 of 79

29 Classes Classes can be applied to paragraphs, images and tables. Classes are developed by the web team. Your Web Coordinator will let you know if your area of the websites needs to have specific classes applied to paragraphs, images or tables. Paragraph classes Image classes Table classes More information See Add a class to an image on page 51 See Add a class to a paragraph on page 47 See Apply a class to a table on page 59 About the Workflow Screen The Workflow screen displays any workflow currently active for an Asset. This screen is also where approvers or admins can approve or reject any changes that have been made. Some sections of the website do not have workflow applied. Check with your web coordinator about whether your area has Workflow applied. Workflow is also used when an Asset's status is set to Up For Review. This is great for tracking time sensitive information. Only staff who are part of the approval process or who have Admin Permission will be able to approve or change the status of an Asset set to Up For Review to Safe Edit. About the Metadata Screen You will normally use the Metadata screen to customise the Keywords and Description fields for each of your pages edit the customised staff profiles Default Keywords and Description When a new page is created it has Keywords and a Description by default. The default Keywords and Description text differs depending on the locations/usage of your website e.g. student.csu, faculty or school website, prospective website etc. Default keywords in a student.csu page are shown in the instructions about updating keywords and description fields. Page 29 of 79

30 Customising the Keywords and Description fields in your pages Metadata make it easier for search engines to locate your page(s) and list them in search results. The text in the Description field is displayed on Asset Listing pages. A screenshot showing how the text from the Description field is used to build an Asset Listing page is provided near the start of this guide. Use the link above if viewing online, if you have printed the guide use the index to locate the page number. It is on the Asset Listing page in the CSU Websites section. Related step-by-step instructions Update the page Description and Keywords on page 45 How to restore default Keywords and Description - page 46 Working with staff profiles page 66 About the Linking Screen Use the Linking screento: see where an Asset is linked to reorder the menu create a new link show or hide an Asset in a left hand menu delete an Asset (this is the best way) move an Asset quickly and easily go to the linking screen of child Assets Location Links The locations where the Asset has been linked to are listed in the Location Links table. The example below shows the Linking screen from the Printing page in student.csu. The Website Locations field below shows the pages above Printing that it s linked to. Student is the top level website. Direct Children and reordering menu items The Direct Children section lists the Assets that are directly linked to the current Asset you are viewing. The Asset icon, status, name and ID are listed for each child Asset as shown below. The order of the Assets in this list reflects the order they appear in the menu of the site. You can re-order them using the re-order buttons on the left side of the listed Assets. When you hover over an Asset in this list, a magnifying glass icon appears for that Asset. Clicking an Asset will take you to the Preview Mode for that Asset. Clicking the Go to Linking screen button takes you straight to the Linking screen of the corresponding Asset. Page 30 of 79

31 About the URLs Screen The URLs screen shows the web paths of an Asset. Web paths are another name for web addresses or URL, e.g. the CSU web path is Asset web paths (addresses) are determined by: Example the URL of the Site the location of the Asset in the hierarchy of the Site the name of the Asset when it was created. The Printing page is located in the student area of the CSU website under the Administration and IT Services pages. The page name (the Name field in the Details screen) is Printing. Therefore, the URL (web path) of this page is When would you change a web path? From time to time, you may need to change the name of a page. This might be because a service is changing, or just because there's been a change in the page content and you've changed the title to better reflect what visitors will see on the page. Change a web path 1. Go to the URLs screen of the asset for which you wish to change the web path 2. Enter the new name in the field below Web Paths. There should be no spaces. Replace spaces with a dash, e.g. to rename the Printing page to Printing Information, add information to the Web Paths field as shown in the image on the right. 3. Click Save In the example above the URL (web path) would now be changed to Page 31 of 79

32 Section 2 - Add, modify and delete CSU web content CSU website content All sections of CSU websites follow a similar layout throughout, with: 1. Left hand navigation (a menu, also referred to as 'left nav') in a left hand column see 1 below 2. A central content area (the main information on the page) see 2 below 3. The right hand column content (also known as Related content see 3 below. Left hand navigation or left nav - The left hand navigation is a secondary menu that allows visitors to the site to browse deeply into the content on any section of the CSU website. Content area - The content area is where you will do most of your edits and updates on the CSU website. You will use Edit+ to add and edit headings, sentences, paragraphs, bulleted and numbered lists, tables, images, links to embedded videos, files and links to other CSU pages or external websites. Right hand column content (also known as Related Content) - Right hand column content is a layout option that can be turned on or off depending on the requirements of your page (Web Coordinators can advise how to do this). Right hand content includes little snippets of information or links to related content. See Working with right hand column content on page 62 for step by step instructions on how to locate and update related content in Edit+ Page 32 of 79

33 Accessibility on the CSU website Web Content Accessibility Guidelines (WCAG) 2.0 cover a wide range of recommendations for making Web content more accessible for people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. If you follow the (WCAG) 2.0 guidelines when creating content, you'll also be making your content more usable to all visitors to your website. In Edit+, use the accessibility auditor to check an individual container or an entire page for accessibility issues. The auditor provides a report and instructions on how to address the issues found diring the audit In Edit Mode, use the Accessibility Auditor to evaluate the accessibility of the content of a specific WYSIWYG Content Container In Preview Mode, use the Accessibility Auditor to evaluate the accessibility of the content of a page Accessibility auditor Use the Accessibility Auditor to evaluate the content of your container or page and see a report on the following three categories of issues Errors: these issues must be addressed to meet the accessibility standards Warnings: these issues should be addressed to meet the accessibility standards (best practice) Notices: these issues require manual checking and may need to be addressed to meet the accessibility standards By default, the Accessibility Auditor will check against WCAG2AA standards. Clicking on an issue will provide a report of the individual issue, outlining the Principle and Technique that the issue addresses within the WCAG 2.0 standards, as highlighted to the right. Clicking on these links will direct you to the appropriate WCAG 2.0 documentation. Check a container in Edit Mode (all web authors) When in Edit Mode, the Accessibility Auditor button is in the WYSIWYG toolbar. 1. Within a WYSIWYG container, click Accessibility Auditor. A popup appears, with a summary of accessibility issues 2. Select the types of issues you want to see included in the report and click View Report. Page 33 of 79

34 Check a page in Preview Mode (Web Coordinators) When in Preview Mode the Show Accessibility Auditor button is shown in the main toolbar 1. Click Show Accessibility Auditor to audit the entire page. A popup displays a summary of the issues discovered 2. Select the types of issues you want to see included in the report and click the View Report button View an accessibility report When you have 1. Click the View Report button then click on each issue to expand and view links about the Principle and Technique 2. Click Locate Element if you want to see where the issue occurs in the container 3. Click Show in Source View if you want to view and edit the source code 4. Follow the advice to fix the issue and then click the Refresh button to confirm the issue is resolved. 5. If no changes are required click the Dismiss button to clear the warning or notice from the report 6. Click the arrow to view the next issue Only the errors need to be resolved, your Web Coordinator can provide more advice if you encounter errors. Heading structure warnings In the newer design templates the page name is automatically displayed at the top of every page and it is formatted as a Heading 1 (h1 element). Remember h1 is only ever to be used as a page heading. If you run the Accessibility Auditor on a container on one of these pages you will get a warning that The heading structure is not logically nested. This h2 element appears to be the primary document heading. On these pages, Heading 1 inserted automatically so you can dismiss the warning shown above.on these pages, Heading 2 is the biggest heading style you will use. Page 34 of 79

35 Tables and accessibility To see more about how to consider accessibility when working with tables, see Tables and accessibility on page 60. Log in to Edit + (switch to Edit Mode) You might hear the terms Logging into Edit+ or Switching to Edit Mode, or some combination. Follow the steps below to log in to Edit+ (or switch to Edit Mode) 1. Open your web browser and go to the webpage you want to edit 2. Type /_edit at the end of the address, if it already has a forward slash you just need to type _edit 3. Press Enter on your keyboard 4. If prompted, enter your CSU username and password, then click Login -> (If you have already logged in to staff.csu you will not be asked to login again) 5. When Edit+ is logging you in the page will turn black and a circular indicator appears in the centre of the screen. It should only take a few seconds for the Details screen to load. If the Details screen has not opened after seconds you should reload (refresh) the page. Click the reload button (next to the URL in the address bar) to reload the page. You can append the suffix /_edit to any of your site pages to login to Edit+, then use the Asset Finder to select the page you want to edit. Page 35 of 79

36 Working with Assets Find an Asset To find an Asset, browse for it in the Asset Finder. See Finding Assets in Edit+ on page 10 for step by step instructions on how to open and understand the Asset Finder. Create a new folder, page or file Edit+ helps you create new Assets with the Asset Creation Wizard. You can create a page, folder, image, PDF, PowerPoint Doc, Excel Doc, Word Doc, Generic File, MP3, FLV Movie or Generic Movie using these steps: Page 36 of 79 If you accidentally select the wrong Asset type when using the Asset Creation Wizard you can click the Back button at any time to return to the category select screen and choose another type In Edit+ click New in the toolbar and choose Standard page from the options available. 1. Enter the name for your Asset. 2. Choose whether you want the Asset to appear in the menu. This will be determined by the type of Asset and on the structure of your section of the CSU website. If in doubt, check with your web coordinator. a. To have the Asset visible in the menu, leave the setting at Yes b. If you don't want the Asset to appear in the menu, click No 3. Choose a location for the Asset. Start in the right place Use the Asset Finder to navigate to the part of the website where you want to add the new Asset. Then create the page from there. If you need to change the Asset location after you created it, follow the steps in

37 Refresh the list of Assets Move an Asset to a new location on page 38. If you've added, moved or deleted an asset, the Asset Finder may not be updated immediately. To be sure you're seeing an updated list of Assets, open the Asset Finder and click Refresh Assets. How to cancel your changes (revert) When you Cancel Safe Edit, you discard all of the changes you ve made since you put the Asset into Safe Edit. Even if you have saved your changes one or more times, choosing Cancel Safe Edit will revert the Asset to the previous Live version (what visitors would currently be seeing on your website). Page 37 of 79

38 Move an Asset These instructions show you how to move assets. You can only move and delete assets if you have administrative (admin) permissions. You should only use this procedure when moving page Assets within sites that have the same layout. Move an Asset to a new location Follow these steps to move an Asset to a new location and remove it from the old location, for example if the Asset was created in the wrong location and needs to be displayed somewhere different. You'll need to start by creating a new link, then removing the old link. 1. Create a new link location See the step by step procedure Add a new location for an Asset to be displayed on page Remove the old link Click the delete button next to the link you want to remove. Page 38 of 79

39 Delete an Asset Before you begin Before deleting an Asset you need to ensure nothing is linking to it by checking its Linking screen. Once you have removed the links to the Asset it is ready to be deleted Ensure the Asset is in Safe Edit Mode before you attempt to delete it. You can only delete an Asset if you have admin permissions Follow the steps below to delete an Asset: 1. Ensure the Asset is in Safe Edit Mode 2. Click Linking to go to the Linking screen of the Asset you want to delete. 3. Click the delete icon on the right hand side to mark the item for deletion. The Asset you want to delete is shown in the Asset Information area. The parent Asset which is the location above the Asset you want to delete will be shown in Website Locations field 1. When there is only one link left for the Asset, if you click the delete button a warning message appears. Read the message carefully before you continue with the deletion. 2. Click Save and the Asset is deleted. You are returned to the parent Asset listed in the Website Locations field When you click the delete icon it will change from a minus sign to a plus sign. If you accidentally marked the wrong item for deletion, click the delete icon again. It toggles to become to a minus sign again and will not be deleted when you save. Page 39 of 79

40 Refresh the list in the Asset finder If you've added, deleted, moved or renamed and Asset and the update does not appear in the Asset Finder, click changes. to see the Switching containers (divs) from raw HTML to WYSIWYG Follow the steps below to 1. Click the Edit Container Properties button 2. Under Content Type, click the down arrow next to Type and select the content type you want to change the container to 3. Click Set Properties button in the Edit Container Properties popup to close it 4. Click Save to change the content type. The change will not take effect until you click Save View new and updated content Changes won t go live immediately. Visitors may not see updates until three hours after changes are made live. If changes have not appeared, add either _nocache or _recache to the page address, e.g. Change the order of Assets in the menu 1. Open the parent Asset 2. Go to the Linking screen. The order of the Assets is shown below Direct Children. Click the drag to reorder button next to the page you want to move and drag it to its new location. Release the mouse button to drop it there. 3. Click Save Page 40 of 79

41 Display an Asset from another location using linking You can use the Linking screen to display an Asset from one location in another location. This can be useful for a couple of reasons. This process can be used as the first step to relocate Assets from one location in your site to another. It can also be used to display content from outside of your sections website as if it is part of your website. This usage, however, can only be achieved in sites which have the same design throughout (student.csu for example) and should only be performed by Web Coordinators or the Web Team to ensure there are no style conflicts or other issues introduced. Display an Asset from another location using linking Use the Linking screen to display an Asset in one part of the Asset Finder in another location. Do this in the following situations: as the first step to relocate Assets from one location in your site to another to display content from outside of your sections website as if it is part of your website. You can only use linking to display an asset from another location in sites which have the same design throughout (student.csu for example). This should only be done by Web Coordinators or the Web Team to ensure there are no style conflicts or other issues introduced. In the example here the Manage your Student Account page is located in the IT Services area in student.csu. As its content is also relevant to the Personal section (see middle screenshot below) it is helpful to also display it there for our students. The third screenshot shows the final outcome after creating a new link to an Asset so it displays in another area. The Asset's original location (for editing) will still be in IT Services. To a person viewing the website the page also appears to be in the Personal section. Page 41 of 79

42 Add a new location for an Asset to be displayed Follow the steps below to add another location where you want the Asset to be displayed. 1. Open the Asset which you want to display in another area of the website. 2. In the Linking screen, click the New Location Link button. The Asset finder opens 3. Use the Asset Finder to navigate to the Asset where you would like to display this Asset 4. Click Select. The screen darkens and the Adding new link message appears 5. Click Save This is the first step to Moving an Asset. If you want to move an Asset so it's showing in one location only, go back to the procedure Move an Asset on page 38. Hide an Asset from the navigation menu Follow the steps below to hide an Asset from the navigation menu: 1. In the Linking screen, go to the relevant website location in the list 2. Click No in the Show in Menu field 3. Click Save Page 42 of 79

43 Asset Listing pages Asset listing pages automatically display Assets as a kind of 'landing page'. This is automated functionality. The content area in the screenshot below is a little different to the content areas on standard pages. It s the result of an automated capability of our CMS called Asset Listing. It builds the content area of the page automatically using existent content. In the example below it removes the need for an editor to enter the headings, text and links manually. A Web Coordinator or member of the web team can set up this feature when requested. In addition to how it s used below it can also be used to create staff profiles, image libraries, document libraries and news listings. The IT Services page of student.csu is shown below to demonstrate an Asset Listing page. You cannot edit these pages. Speak to your Web Coordinator or log a job to the web team if a change is required. Parent page name (1) The page name is used to automatically create the left navigation and to insert the heading name in all pages in student.csu (the automatic insertion of the page name as the heading is not available to all areas outside of student.csu yet). In this example IT Services is the parent page (top level menu item) and the items underneath are child pages (sub menu items). Child page name (2) The child page names are used to automatically create the next level of navigation and also to insert the page names as headings in the content area. Description (3) The Description is displayed under the page name and it provides information to visitors about what is published on the page. It comes from the text in the Description field in the Metadata. Page 43 of 79

44 Prepare content before you begin Before you create a page, you should prepare your content for the website to ensure it is: optimised for search - have you researched the search keywords for your new page? Keywords are the words that people are likely to use when searching for the subject matter on your page and having the right keywords in this field will help your page come up in search results. Put yourself in the shoes of someone who might be looking for the information on your page. What kinds of things might then enter in a search field to find the page? compliant with accessibility standards - Have you drafted your content with the right heading levels, prepared ALT text for images, thought about table formatting? CSU takes accessibility seriously. See more information on the CSU Accessibility page optimised for viewing on a range of devices, including smartphones, tablets and desktop computers. Page 44 of 79 About search keywords Imagine a student wants to find information about printing costs on our website and instead of navigating to where it s published they use Google to quickly direct them to what they need. They might enter key words like CSU printing cost on campus. Google and other search engines use the information you enter in the Keywords and Description fields of your pages metadata to find content that matches what they are looking for. Using the most relevant keywords increases the chance your page will be displayed up the top of their search results. How to prepare good content Good content is more than just information usability is also important. Usable content is: easy to read and understand for its intended audience achieves the purpose it was created for. Usability ranges from design to writing style and also incorporates considerations such as search optimisation and accessibility. CSU web pages use a template but there's still quite a bit you can to make changes in this area. Create usable content by doing the following: put information in your content in the right order, with the important information coming first consider how it appears on a table or mobile device write in plain English, with a mix of short and longer sentences ensure the content of the page is broken up into topics with the use of headings.

45 Edit a standard page This section tells you how to edit a Standard page Asset. Update the page name 1. Start in the Details screen in Edit+ 2. Change Page Name and/or Page Short Name as required Page Name - appears as the page title in the browser when someone visits the page on the web. Page Short Name - appears in the Asset Finder, is displayed on Asset Listing Pages and is also the name that appears in the navigation menu, on those pages where the template includes left hand navigation. 3. Click Save Update the page Description and Keywords When would you do this? All Assets on the website should have keywords and description completed correctly. Keywords are used to ensure the Asset appears in search results when a visitor searches for a topic on the website. The description is also used by search engines (e.g. Google). In addition, the description appears as the page summary if the page appears in Asset Listing pages on page 43. Step by step procedure 1. In Edit+ select Metadata. 2. The Keywords field appears below the Dublin Core heading 3. Click the Use default checkbox to uncheck it. 4. Add keywords. As a minimum, your keywords field should contain the keywords Charles Sturt University, Charles, Sturt, University and CSU. 5. In the Description field, click the Use default checkbox to uncheck it. 6. Add a description. The description should summarise the contents of the page. Page 45 of 79

46 7. Click Save How to restore default Keywords and Description Pages in the CSU website have defeault metadata keywords and description applied. If you have customised the keywords or description and want to revert to the default, follow the steps below: 1. Go to the Metadata screen for the Asset 2. Ensure the Use default checkbox is checked 3. Click Save to save the change. Change a page location A Standard Page is an Asset. To see instructions for changing a page location see Move an Asset on page 38 Edit page content To edit content in a Standard Page Asset, start in the Content screen. Click within content on the page to start editing and: modify existing content add new content delete content add, remove or change the order of containers in the page. Page 46 of 79

47 Add a new container (div) Follow the steps below to add a new container to a page: 1. In the Content screen, click the Insert New Container (insert div) button where you want to insert a new container. The Insert New Container popup appears. Take care to insert a new div in the correct location. In the Contents screen for a page, you'll see at least two Insert New Container buttons container (div), above and below each existing content 2. In the ID name field, type a name for your container. Use a name that will help you identify the container later on. 3. The Type field defaults to WYSYWIG. Leave the type as WYSYWIG unless you are adding nested content or Raw HTML 4. Click Insert For more information about other content types, see About nested content on page 21 or Raw HTML on page 20 Add a class to a paragraph A class is a type of custom style. Your Web Coordinator can advise which ones are available for use on your web pages. Add a classes to images, tables or text when you want them to Follow the steps below to apply a class to a paragraph: 1. Highlight the relevant text or click to select an image 2. Click in the Class field and enter the name of the class you want to use and click Update Changes. Example class If you apply the note-icon class, the text displays as shown below, with a grey background and a pencil icon. Page 47 of 79

48 See the list of classes you can add to paragraphs at Language tools If your web page contains specialist terms or abbreviations you can provide a popup definition that appears on the page as a popup screen tip. Add a definition for an acronym 1. Highlight the acronym and click Language tools 2. Click Acronym and type the definition into the Acronym field and click Update Changes Expand an abbreviation 1. Highlight the abbreviation and click Language tools 2. Click Abbreviation and enter the abbreviation into the Abbreviation field and click Update Changes. When a person viewing the page hovers over the abbreviation they will see the full wording (as shown below) Acronym allows you to add a definition for an acronym that is in the content of the page. This definition appears when a person hovers their mouse over the acronym on the page as shown below. Specify a language for non-english text Language allows you to specify the language for a piece of text in your content. For example if you have some content that is in French, you can highlight the text, click Language tools, click Language button, type the language in and click Update Changes. This adds a language tag in for screen readers and other purposes. Indicates an link to some useful information on a website or wiki. You must specify a language for non-english text to ensure you are meeting Accessibility guidelines. See more information about accessibility at Accessibility on the CSU website at page 33 Page 48 of 79

49 Add and edit nested content Nesting is a great way to reuse content. Follow the steps below to, nest the content from one page into another page. 1. Start by inserting a Nested content container 5. Identify the Asset ID or location of the content you will be nesting. If the content you want to nest does not belong to your area (which means you may not have access to where it is stored), contact the content owners and find out the Asset ID. 6. In Edit+, open the content page where you want to nest the content 7. In the Content screen, click the Insert New Container (insert div) button where you want to insert the nested content. The Insert New Container popup appears. Take care to insert a new div in the correct location. In the Contents screen for a page, you'll see at least two Insert New Container buttons, above and below each existing content container (div) 8. In the ID name field, type a name for your container 9. In the Type field, choose Nested content from the drop-down list 10. Click Insert 2. Next, specify the content to show in the Nested content container 1. When you have created a new Nested content container it appears where you placed it in the page. 2. Enter an Asset ID in the field, or click Select to open the Asset Finder and locate the content you want to nest. 3. Click Save when done. Page 49 of 79

50 Working with images Adding an image to a page is a two-step process, as shown here. If you have already uploaded an image and you know where it is located in the Asset Finder or you know its Asset ID, go straight to Step 2 Insert an image into a page 1. Upload an image (create an image Asset) Follow the steps below to upload an image: 1. In Edit+ click New then Files and Image 2. Under Upload File click Browse and navigate to the location of the file you want to upload 3. Select the file 4. Add Alt Text 5. Set Show in Menu and Decorative Only should be set to No 6. Under Create Locations choose Select Current Asset to make the image a child of the current Asset. If you want to put the image somewhere different choose Select New Location and use the Asset Finder to select the new location 7. Click Create, wait for the file to upload to upload then click Close Don't forget to make the image live so that visitors can see it! For more information see Make a new Asset live on page Insert an image into a page 1. Click Insert Image and then Pick Asset to open the Asset Finder 2. Click to highlight the image you want to insert and click Select (bottom right of Asset Finder). The Asset ID appears in the URL field The Alt text updates automatically with what was provided when the image Asset was created, enter a title in the Title field 1. Click Update Changes and then Save Page 50 of 79

51 Remove an image from a page Follow the steps below to remove an image from a page: 1. Select the image by clicking on it. You'll know you ve selected the image when the mini toolbar appears, and two little 'handles' appear at its corners, highlighted here in red. 2. Press Delete on your keyboard. The image disappears. 3. Remove any extra space in the page that remains after you've deleted the image 4. Save Move an image Follow the steps below to move an image to another place on a page 1. Click on the image to select it and the inline toolbar appears, click the Move Image button on the right hand side of the toolbar and a message telling you the selected image will be moved to the next location you click appears attached to your cursor 2. Place your cursor in the location where you want to move the image and click. You need to click when this cursor is showing (not the arrow, otherwise the image will not move) If you are trying to move an image to a different location in the website, see Move an Asset on page 38 Add a class to an image A class is a specific style or treatment that can be applied to enhance content or make it behave in a particular way, e.g. a class to position an image in a certain way or provide background shading to a block of text. Your web coordinator can tell you if there are any classes you need to use on your web pages. Follow the steps below to add a class to an image. 1. Click the image to select it 2. Click the Class button (if using Internet Explorer click Image in the breadcrumb navigation) 3. In the Class field enter the class name in lower case, e.g. floatright 4. Click Update Changes and then Save For more detailed information about applying a class to an Asset, you can also view the Edit+ manual online See the list of classes you can add to images at Page 51 of 79

52 Working with links You can apply links to one word, a group of words or an image so when a visitor clicks the link they are taken to another page on the CSU website a page on another website (standard link) another area on the same page (this is also called an anchor) a downloadable file (e.g. PDF, Word, Excel) a new to an address specified in the link The link button does not become available in the toolbar until a selection has been made. If nothing is selected you will be unable to access the link options. Create a link to a page on the CSU web site 1. Highlight the word, phrase or sentence you want to turn into a link 2. Click Insert Link 3. In the popup next to the URL field click Pick Asset. The Asset Finder opens 4. Select the page you want to link to then click Select. Once selected the Asset Finder closes and the popup is displayed Add a link to a page on another website Follow the steps below to link to a page on another website: 1. Highlight the word, phrase or sentence you want to use as a link to the file and click the Insert Link button 2. Copy the destination URL you need to link to from a browser or document, click in the URL field and paste the copied URL into it. 3. Enter a title and click the button next to Open a New Window so there is a white tick on a blue background indicating the document will open in a new window when the link is clicked 4. Click Update Changes and then click anywhere on the page to close the popup. You can also use the above URL method to link to an external web page Page 52 of 79

53 Create a link to a file on your web site Follow the steps below 1. Highlight the word, phrase or sentence you want to link. 2. Click Insert Link. A popup appears. 3. Next to the URL field click Pick Asset 4. The Asset Finder opens so you can select the file you want to link to. In the example to the right the relevant PDF has already been chosen and the Asset number has been automatically entered into the URL field 5. Enter the relevant information in the Title field. The information you enter here will appear when visitor hovers their mouse over the link. It is useful to give further information. In the example above right, the text linking to the file describes what it is, so the title is used to advise that clicking on it will open it in a new window. You could also extend the description by titling it Open quick reference sheet to learn more. Use the description which is most helpful for visitors to your webpage 6. Click the button next to the Open a New Window field. 7. Click Update Changes to create the link and click anywhere on the page to close the popup 8. Click Save Always choose to open a link to a file in a new window. When the user is finished with the file, they can close the window when they've finished with the file, and your web page is still open. Page 53 of 79

54 Link to a file on an external website 1. Highlight the word, phrase or sentence you want to use as link text and click Insert Link 2. Copy the destination URL you need to link to from a browser or document, click in the URL field and paste the copied URL into it. 3. Enter a title and click the button next to Open a New Window so there is a white tick on a blue background indicating the document will open in a new window when the link is clicked 4. Click Update Changes and then click anywhere on the page to close the popup 5. You can also use the above URL method to link to an external web page Add an link An link pops up a new in the visitor's normal program - addressed to the person you specify on the website.follow the steps below to add an link. 1. Highlight the address you want link to and copy it (Ctrl C on keyboard or right click, Copy) 2. Click Insert Link and then paste the copied address into the URL field (Ctrl V on keyboard or right click, Paste) 3. Type a subject in the Subject field so that when a person clicks the link a new opens with this text in the subject line. 4. Click Update Changes to create the link and click anywhere on the page to close the popup. The address now appears as a link 5. Click Save Change link text If you need to change the text of link, click once (not double click) on the link text and make changes as required. If adding to the beginning or end of the link, take care to ensure that the changed text is still linked. Linked text appears underlined and blue. If your changed text is not linked, you may need to re-apply the link. Remove a link Follow the steps below to remove a link 1. Highlight the link. The inline context sensitive toolbar appears 2. Click Remove Link. The link is removed. Page 54 of 79

55 Change the target of a link Follow the steps below to change link text on a page so that it points to a different target page 1. Double click on a link to select the entire link 2. Click Remove link. This will ensure that your link text is completely cleaned up. If you don't do this step, you can end up with different sections of your text may link to different targets 3. Insert Link and in the linking popup, add a new link target Anchors Anchors are a way to link to content on the current page or a specific location on another page. Anchors are a convenient way to link people straight to the content they need, you can link them to another location on the same page or a specific location on another page. For example, if you link to the printing page, the URL in the address bar of the browser will contain this address If you create an anchor in the section that discusses costs, and if you name the anchor costs, then you can link to that anchor. The URL in the address bar will contain the following address: What to consider If you decide to create a long page with anchor links, consider adding some 'back to top' links so that visitors can easily return to the top navigation. Talk to your web coordinator if you are unsure whether you should be creating a long page, or multiple short pages to accommodate your content. Before creating an anchor, consider whether it would be better to break your content up into multiple pages. This may help your page to be easier to discover, because you will be able to include keywords in the page URL and title. Create an anchor Follow the steps below to create an anchor 1. Highlight the first word of the location you want to link to 2. In the ID field type a name for the anchor. Choose a short name that relates to the text you have highlighted. This ensures the anchor is easy to find when you link to it. 3. Click Update Changes then Save Page 55 of 79

56 Page 56 of 79

57 Link to an anchor Follow the steps below to link to an anchor. 1. Highlight the words that the user will click on to jump to the anchor. Your link text should be specific, so the user knows what to expect when they click the link. a. If you are linking to an anchor in the same page, enter the anchor name in the Anchor field. b. If you are linking to an anchor on another page on the current website, click Pick Asset to browse for the page in the Asset Finder. If you know the Asset ID for the page you're linking to you can type it straight in. 2. In the Anchor field enter the anchor name (in the example here the anchor name is costs). 3. In the Title field, enter a description of what the user can expect to see when they click the link. 4. Click Update Changes then Save If you are linking to an anchor on a page on a different website, enter the URL of the page in the URL field. If a URL includes a link to an anchor, you'll see # and the anchor name at the end of the URL If you cannot remember an anchor name, use the source editor to look it up. The anchor name appears as <a name="anchor_name">. Page 57 of 79

58 Working with tables Follow the steps below to insert a table in the content of a standard page For detailed information about how to work with tables in Edit+, visit the tables section in the Edit+ Manuals online Insert a table In the content area of your page, 1. Click Insert Table and the Insert Table popup appears. 4 columns and 3 rows with a top header will be selected by default (see right). If this is the layout you would like to use, click Insert Table, otherwise click squares to select your desired number of rows and columns 2. Select the header(s) location from the Header section and click Insert Table 3. Click Save and the table is inserted You should save your page after inserting a table otherwise you will not see the table in Preview Mode. You also need to save it after you make modifications to see the changes reflected in Preview Mode Select table, column, row or cell Once your table is inserted, use table tools to work with the whole table, or individual columns, rows and cells. Inline table tools 1. Click anywhere in the table. The Table control appears. 2. Hover over it to see a mini-menu where you can choose the full table, the current row, the current column or the current cell. 3. Once you have made a selection you can move between table, column, row and cell using the breadcrubs at the top of the popup. Page 58 of 79

59 Toolbar menu tool When you have inserted a table, you can modify its settings in either of these two ways 1. Selecting the table and clicking the Insert Table button 2. Select to modify the entire table, selected row, column or cell. 3. Once you have made a selection you can move between table, column, row and cell using the breadcrumbs at the top of the popup. Default table width The table width is set to 100% by default. This can be changed on the Table Tools screen by clicking in the Width field and typing another number and clicking Update Changes. Always use percentages and not pixels. Using percentages means the table will resize automatically to suit the device viewing your page. Edit table properties 1. Click the element you want to edit (e.g. column or row) and the Table Properties button appears. Move your mouse over the Table Properties button and select the element you want to modify from the four options (you can hover your mouse over each button to view a description) 2. You can select the element you want to edit from here (if you chose the wrong one you can reselect at any time by using the breadcrumb navigation at the top of the popup 3. Make the required edits and click Update Changes 4. Click Save Apply a class to a table A class is a specific style or treatment that can be applied to enhance content or make it behave in a particular way. Your web coordinator will be able to tell you if there are any classes you need to be using for tables on your web pages. Follow the steps below to add a class to a table. 1. Select the table. 2. Click the Class button 3. In the Class field enter the class name in lower case 4. Click Update Changes 5. Click Save For a list of classes you can apply to tables, see Page 59 of 79

60 Tables and accessibility When creating tables, keep in mind the following: Use tables as a way of presenting data, not as a way of laying out the page Use the simplest possible table, with header column, header row and data. It's better to have multiple small tables with good headings in between rather than one complicated table with spanned rows and nested information Avoid merging and splitting cells unless absolutely necessary For detailed information about how to ensure tables on the website are accessible to all users, visit the WebAIM website and read the section on Creating Accessible Tables Remove extra space from table heading cells If you cannot remove the extra space in a table heading cell by using the Backspace or Delete key you probably have an extra <p> (paragraph) tag in the table HTML. Open the Source Editor to remove the space. Follow the steps below to remove an unwanted paragraph tag from table heading cells. 1. In the toolbar, click Source view and locate the start of the table e.g. <table style= width:100%> <tbody>. 2. Scroll through until you find the table heading cell that you need to change. It will start with <th to indicate table heading and will then usually have a numerical id. The screenshot shows the heading Black has paragraph tags around it, which is causing the space. The opening <p> and closing </p> paragraph tags need to be removed 3. Delete the <p> and </p> tags that are above and below the cell heading 4. Repeat steps 2 and 3 to remove the space from any other table heading cell 5. Click Apply Changes at the bottom of the Source Editor 6. Save Page 60 of 79

61 Embed a YouTube video in your page Follow the steps below to embed a YouTube video in a web page Prepare a container for your YouTube video 1. Go to the page where the YouTube is to be embedded: 2. Ensure the page is in Safe Edit 3. In the Contents screen, create a new Div with the following settings: Page 61 of 79 Presentation: Raw HTML, Content Type: Raw HTML See step-by-step instructions for creating a new div in Working with containers (divs) on page 19. Collect the YouTube code Collect the code you will use to embed the video in your page. 1. Go to YouTube and find the video you are going to embed. 2. In the area beneath the video, click Share and then click Embed. A field appears with code in it. The code is highlighted and begins with <iframe 3. Normally you won't need to change the video size.if you need a custom size, click Show More below the code and select a size in the Video size field. 4. Select the code by pressing Ctrl and A on your keyboard. 5. Use your keyboard to copy the code, by pressing Ctrl and C. 6. Return to the Raw HTML Div you just created. 7. Paste the code into the Div, using Ctrl and V, or mouse right click and Paste. 8. Save and Preview Turn off Autoplay (for advanced users) Follow the steps below to prevent videos playing automatically when the page is opened. 1. Add?autoplay=0 to the very end of the source link of the video Example: <iframe width="560" height="315" src="// frameborder="0" allowfullscreen></iframe> 2. Save

62 Working with right hand column content What is right hand column content? Right hand column content is also called related content, usually small snippets of information that enable web coordinators to raise the profile of content such as events, contact details, important information and links to content that is related to university activities at this time of the year or semester. Many pages throughout the CSU website have right hand column content. Pages with right hand content have a special layout applied to them. The layout is applied by Web Coordinators or the Web Team. Find related content in Edit+ In Edit+ you will normally find related content in a folder associated with the relevant Asset. 1. Go to the Asset Finder and look for the folder called Right Column Content or Related Content. 2. Click the folder and the items in the right hand column appear as shown here. Page 62 of 79

63 Working with folders Folders in Edit+ are just like folders on your computer. They can be used to organise documents, images, videos and other files by keeping them filed together on your website. Create a new folder Follow the steps below to create a new folder 1. Click new in the Edit+ toolbar. The Asset Creation Wizard appears. 2. In the Asset Creation Wizard, choose Other, then Folder 3. In the Folder screen, do the following: a. Give the folder a name. b. In the Show in menu? field, choose No. This will ensure the folder does not appear in the left hand navigation menu of the website. c. Create the location where the folder will sit in the Asset Finder. Choose Select Current Asset if you want the folder to sit under the current Asset. Choose Select New Location if you want to choose another place for the folder to sit. 4. Now you can either Add more folders, or create this folder. 5. To Add more folders, Click + Add more then repeate steps 3 and 4 until done 6. To create the folder or folders, click Create Ensure the names of folders are meaningful to help you and others who may need to use it later, e.g. choose a name like 'images' that indicates the folder contents. Page 63 of 79

64 Working with uploaded files Before you upload Before you upload files to the website, prepare them to ensure they display and download properly Image size Document accessibility File name Images should be resized to ensure they are optimised for display. Check with your Downloadable documents should comply with accessibility Ensure the names of files are meaningful to help you and others who may need to use them later Web browsers do not allow spaces in file names. Web addresses (URLs) replace a space with %20. Use a hyphen between words to stop this happening, e.g. The URL (web address) for the Code of Conduct on the website Upload one or more new files 1. In Edit+, go to the Asset that will be the parent of the uploaded file 2. Click New. The Asset Creation Wizard opens 3. In the Wizard, select Files and then the file type you want to upload, e.g. Image. Normally you will know the type of file you're uploading. If you are uploading a file type that is not on the list, choose Generic file. The upload window for the file type you selected appears. 4. Navigate to the location on your computer where your file is located. Double click the file to select it or click it once and click the Open button 5. Complete the fields in the file Details popup. Mandatory fields are marked with a red star as shown here. 6. Under Show in menu? you would normally select No so that your file does not appear in the left hand navigation. 7. Click Select New Location or Select Current Asset to specify where the file will sit in the Asset Finder. 8. Now you can either Add more folders, or finish uploading. 9. To Add more folders, Click + Add more then repeate steps 4 to 8 until done Page 64 of 79

65 10. To upload the file or files, click Create Make a newly uploaded file live Can't see the newly uploaded file in the Asset Finder? Click the Refresh Assets button. Your newly uploaded file displays. Ensure your file is visible after you have uploaded it. When you create a new Asset it s automatically assigned the status of Under Construction. The Asset remains Under Construction until you change the status in the Details screen. See Change current status for step by step instructions 17 on how to change the status of your Asset from Under Construction to Live. Replace an existing file with a new version Use the Details screen to upload the replacement (you do not need to create a new Asset). Use the steps below to update all kinds of uploaded files, including documents, PDF files, Excel spreadsheets and images. 1. In Edit + click the Asset Finder in the top right hand corner of the screen and locate the file you want to replace, double click to open or click once and click Select. The Details screen opens. 2. Initiate Safe Edit by clicking the button or clicking the down arrow next to Change? and choosing Safe Edit 3. Next to Upload: click Browse and select the file you want to replace the existing file with (double click or click once then click Open to select) 4. Click Save to replace (overwrite) the existing file with the new file 5. Updated files must go through workflow to ensure the updated (new) is live on the site. Click the down arrow next to change and select the appropriate status to send it for approval If you have admin permissions you can send the updated file live. Page 65 of 79

66 Working with staff profiles If your role includes updating staff profiles on the CSU website, you will have edit (write) or admin access to the staff profiles you need to update. Log in to a staff profile Staff profiles are just like other assets. Go to the staff profile you want to edit and add /_edit to the end of the URL. For detailed information about logging into Edit+ from the staff member's profile go to Log in to Edit + (switch to Edit Mode) on page 35 If you want to access the staff profile using the Asset Finder, see step-by-step information in Finding Assets in Edit+ in page 10 Where to edit staff profile information The table below shows where you edit the different types of information included in a staff profile. Edit this information Image Title First Name, Middle Name, Surname Accreditations Campus Position Office Phone/fax Personal website Additional information (see Link to publications on a staff profile (CRO link) on page 68 Profile (Bio) Teaching Research Here In the Related Image field in the Details screen of the staff profile In the Staff Details section fo the Metadata screen of the staff profile In the Content screen of the staff profile Page 66 of 79

67 Add a new image to a staff profile Follow the steps below to add an image to a staff profile: 1. Start by preparing your image.images for staff profiles must be: exactly square (each side of the picture is exactly the same length) 110 x 110 pixels in.jpg or.gif format 2. In Edit +, upload the image to the Asset Finder, under the main asset for the staff member's profile. Make sure the image is live, or it will not appear on the staff member's profile! 3. In the details screen of the staff member's profile, go to the Related Image file and click Select 4. Select the image from the Asset Finder. The image appears under the Related Image field. 5. Save For help cropping and resizing images read Cropping and resizing images using Microsoft Office Picture Manager at For more information about specifications for staff profile thumbnails, see the CMS training page at Page 67 of 79

68 Link to publications on a staff profile (CRO link) CRO (CSU Research Output) is an open access digital archive which includes a variety of research publications produced by CSU academics. Open access means the works held within are freely accessible (no login required) and can be found by anyone using Internet search engines such as Google. Adding a CRO link to a staff profile provides viewers with access to that person s published works. Read more about CRO on the CSU website Follow the steps below to add a CRO link to a staff profile Before you begin, prepare your link text, link and staff ID 1. Make sure you know the 8-digit ID of the staff member and record it somewhere handy that you can use in the following steps. 2. Prepare the CRO link text and link a. Go to Cro-links.txt T b. Save the file to a location where you will be able to access it c. Open the file and replace the last eight digits at the end of the url with the 8-digit ID for the staff member whose profile you are updating. d. Leave the file open. You'll be copying text from it in the following steps Enter Edit Mode for the staff profile you want to update 1. Go to the staff profile to which you want to add the CRO link 2. Add /_edit to the end of the URL to start editing. For details instructions on how to start Edit+, see Log in to Edit + (switch to Edit Mode) on page If the staff profile asset is not already in Safe Edit, initiate Safe Edit now 4. Go to the Metadata screen 5. Scroll down through the Design Staff Schema, Staff Details section until you reach the Additional Information field 6. Un-tick the Use default check box and the green WYSIWYG icon will appear, click it and the WYSIWYG editor opens 7. Copy the words View Publications on CRO from the cro-links.txt file you saved earlier, and paste them into the text area under the toolbar Page 68 of 79

69 8. Select the text and apply Bullet list format to it 9. With the text still highlighted, select Insert Link on the toolbar. The Insert Link screen appears. 10. Go back to the cro-links.txt file you opened earlier, copy the URL (including the 8-digit staff ID at the end) and paste the URL into the Link field in the Insert Link screen. 11. In the New Window Options section, choose Yes from the New Window drop-down list, or enter _blank in the Target: field 12. Click OK in the Insert Link screen, then Save in Edit+ 13. In the Details screen, apply for approval, or approve and send live if you have admin permissions. If the change you made is not yet visible and your asset is live, you can check the change in the live site by adding _nocache to the end of the URL Page 69 of 79

70 Review, approval and publishing The process for review, approval and publishing varies depending on whether Workflow has been turned on in your section of the site. The process also varies if you are creating a brand new asset, or updating an existing Live asset. Workflow for a new asset The diagram below shows the workflow for a new asset if you have standard (write) permissions. Author Apply for Approval Approver Approve and make live Workflow for an existing asset The diagram below shows the workflow for an existing asset if you have standard (write) permissions. Author Apply for Approval Approver Approve Approver Make live For more information bout the statuses and their colours, see Asset status explained on page 11 Page 70 of 79

71 What to expect when workflow is turned on If your web pages are in a part of the CSU website that has workflow turned on, here's what you'll see: If you need to update an existing Asset, the system forces you to place an Asset into Safe Edit before you can make changes If you have standard (write) permissions and you have a new Asset or changes to an existing Asset to be published, you need to change the status of the Asset to Apply for Approval. This will then trigger automatic notifications to the people who can approve the Asset and make it live. If you have administrative permissions - after creating a new Asset or updating an existing Asset, you can approve and make the Asset live yourself. What to expect when workflow is not turned on If your web pages are in a part of the CSU website does not have workflow turned on, here's what you'll see: Page 71 of If you have standard (write) permissions if you try to change the status, there will be no Apply for Approval option. You will only be able to change the status to Cancel Safe Edit. Before you Cancel Safe Edit! If you choose Cancel Safe Edit, you will lose all of your recent changes (even if you've saved them!). You cannot undo Cancel Safe Edit Apply for approval when workflow is not turned on (write permissions) Follow the steps below if you have standard (write permissions), need to send changes live and workflow is not turned on in your pages of the website: 1. Save your changes 2. Follow your section s process to ask for approval to be granted. This probably involves ing your Web Coordinator or another editor who has admin permissions. If in doubt, check with your web coordinator. Apply for approval when workflow is not turned on (admin permissions) If you have admin rights and if workflow has not been activated in your section of the site, you should be able to approve and publish Assets from within the Details screen.

72 Always use Safe Edit When you want to update an Asset that is currently live, always initiate Safe Edit. Do this whether workflow is applied to your site or not. This will make it easier to return to the previous version if you accidentally make a mistake. See more about how to change the status of an asset in Change current status on page 17. Compare your edits with the Live version When your page is in Safe Edit, you are able to see your page with markups. This is useful when you are seeking approval to publish updates to a pag and you want to show a page owner the changes you have made. Follow the steps below to see markup that compares your changes to the live version. 1. In the Content screen, make changes as required. 2. Click Save 3. In the Edit+ toolbar, click the compare button. The page appears with markup. Deleted text is marked with a red background and strikethrough. New text is marked with a green background. Make a new Asset live Follow the steps below if you have standard (write) permissions and you want to change an Asset from Under Construction to Apply for Approval. 1. Go to the Details screen for the Asset you want to publish 2. In the Status area go to the Change? field and choose Apply for Approval 3. Click Save It is very easy to forget to send your new Assets live. Even very experienced editors do it. If people should be able to see your Asset and they can't then check in Edit+ that the Asset is Live (light green). Page 72 of 79

73 Section 3 - Troubleshooting guide Internet Explorer Unsupported Browser warning If you are using Internet Explorer version 8, 9 or 10 and you see this message when trying to login to Edit+, turn off Compatibility View. If you don't turn off Compatibility View, the Content screen does not display correctly and you cannot edit (see below left). Unticking the particular Compatibility View setting which is causing it resolves the issue. Compatibility View may be turned on for all sites or just types of sites. On personally owned computers it s most commonly turned on for all websites (see below left). You need to click to untick it (see below right). Refresh your screen and your page will be fine. Compatibility View turned on Compatibility View turned off On CSU owned computers Compatibility view is turned on by default for intranet sites and additional steps are required to turn it off. Compatibility View and Compatibility View settings are available from the Tools menu in the Menu Bar. If the Menu Bar is not showing follow the steps below to display it. Display the Menu bar in Internet Explorer 1. Right click in the area to the right of the tab and the context menu will appear (see step 2) Page 73 of 79

74 2. Select Menu bar and it will display below the navigation buttons and address field Tools menu not visible If the Tools menu is not available from your Menu Bar (see right) follow the steps below. How do I display the Command bar in Internet Explorer? 1. Right click in the area to the right of the tab or on the Toolbar and the context menu will appear 2. Select Command bar and it will display (see below right) Turn off 'Display intranet sites in Compatibility View' 1. Click Tools menu and Compatibility View settings 2. If you do not have a Tools menu refer to the steps on the previous page to learn how to display the Menu (and/or Command bar if needed) 3. Untick Display intranet sites in Compatibility View (if it is greyed out because Display all websites in Compatibility View is ticked untick it, then untick Display intranet sites in Compatibility View) 4. Click Close 5. Reload the page by pressing and holding the Shift key whilst pressing the Refresh button near the address bar If you are experiencing issues with the display of the Asset Finder or other strange problems you may have corrupted files in your cache. Resolve this issue by clearing your cache and restarting your browser. Log out of Edit+ and close down all but one tab in Internet Explorer and follow the steps below. How do I clear my cache in Internet Explorer? 1. Click Tools menu or the Settings button and Internet Options 2. On the General tab under Browsing History click Delete and make sure Temporary Internet files and website files is ticked, the options below do not need to be ticked, click Delete 3. Close all Internet Explorer windows and then reopen Internet Explorer If you are still having display issues and are currently using Windows 7 and Internet Explorer 8 you can use Install Software to upgrade to Internet Explorer 9. Page 74 of 79

75 Install Internet Explorer 8 or 9 on a CSU owned Windows computer 1. Ensure all programs are closed including Microsoft Office Communicator (right click on the Communicator icon which shows your status in the system tray and select Exit) 2. Double click the Install Software icon on your desktop 3. Select the version of Microsoft Internet Explorer you wish to upgrade to and click Run. Proceed with the installation, when it starts, it will prevent you from using your computer by locking your keyboard and mouse, once the installation finishes control will return to you and you can click on the installation finished message to close it 4. Restart your computer Security Warning in Internet Explorer 8 If this message asking Do you want to view only the webpage content that was delivered securely appears when you switch to Preview Mode, reload a page or switch to another screen click No. Unable to login If the screen goes white for an extended period of time and stays that way, refresh the page. The screen should then turn black and Edit+ should open. Reload (refresh) the page Click the Refresh button (the arrow to the right of the web address) to reload the page If Edit+ does not open after refreshing the page, close the browser window and reopen. If this does not fix it clear the cache. Instructions for Internet Explorer are provided on the previous page, other browsers are provided in Edit+ is slow or not displaying correctly. If you are still having issues, try restarting your computer. Classes not applying to images in Internet Explorer If you have entered the class name, clicked Update Changes and the Save button has not turned green the class has not been applied to the image. Please perform the following steps 1. Click on the image you wish to apply the class to 2. Click on the Image breadcrumb in the inline editing toolbar that pops up 3. Click the Class button 4. Enter the name of the class you wish to use eg floatleft or floatright and click Update Changes. The Save button should turn green 5. Click Save 6. Click Preview to see your changes Page 75 of 79

76 Other browsers A list of Operating System and Browser Compatibility is provided in the System Requirements at the start of this guide. The next section contains links to clearing your browser s cache which often resolves performance issues. Edit+ is slow or not displaying correctly If Edit+ is taking an unusually long time to load or is not displaying correctly, log out of Edit+, close your browser, reopen your browser and log back in to Edit+. If logging out did not help clearing your browser cache often resolves issues with Edit+ not performing as expected. Instructions for Internet Explorer are provided on the previous page. Instructions for other browsers are listed below 1. Firefox Google Chrome Safari - You can also use your browser s help system to locate instructions for clearing the cache. Cannot edit a form Custom created web forms can only be edited by Web Coordinators or the DIT web team. There is no Content screen available for forms in Edit+. If a change is required please advise your Web Coordinator. If your section does not have a Web Coordinator please log a request with the IT Service Desk. Exporting from submission logs Form submission logs can be exported to a CSV or XML file. If you would like to export the form submission logs follow the steps below. Follow the steps below to export 1. Open the form. The Details screen displays 2. Below Export Submission Logs click the down arrows to select the start and finish dates 3. Click the down arrow and select your preferred format. Enter a different delimeter if desired. A delimeter is one or more characters that separate text values. The default delimeter for the Export Submission Logs is a comma. You may prefer to use a semicolon (;), pipe ( ), slash (/ \) or brace ({ }). 4. Click Download File, Save and select a location on your computer to save the file Page 76 of 79

77 Error 'Nonce token is invalid' The error 'Nonce token is invalid' usually pops up if you are logged in more than once, and try to save changes in another tab or window. It also occurs if you allow another editor to login in another tab, window or browser. If you open another instance of Edit+ and make changes you will lose any unsaved changes once the additional login is detected. Once this error appears, you will not be able to continue editing or save your work. Sometimes you can click on Close and save and it will allow it, other times it will stop you and display the error again. Resolve this error by following these steps. 1. Log out of all instances of Edit+ in all tabs/windows that you have logged into. 2. Close the tab and reopen, return to the page and log back in to Edit+ to resume editing. Unable to acquire lock When an editor is working on an Asset (most commonly a page Asset) the system locks it so no one else can edit it at the same time. If you attempt to edit an Asset whilst someone else is working on it you will be presented with an error message Unable to acquire lock for screen... (as shown below) In the example shown above the editor's name is Simple Editor so it shows their last name before their first name. If your edit is urgent you can contact the person named in the message so you can determine the best way to proceed. For example, it might be quicker and easier for you to provide them with the change information and they complete it for you or they may use the Asset Finder to switch to another Asset which will release the lock they hold (this can take up to 2 minutes). You could then perform the edit yourself. This message will also appear if an approver tries to change the status of an Asset to Make Live but the editor who applied still has the Asset open in Edit+. If applying for approval for an Asset you should then switch to another Asset to relinquish the locks you hold. Page 77 of 79

78 Visitors cannot see an Asset or recent changes made to an Asset Check the colour to determine the status of the Asset. It should be Live (light green). If the asset is not live (e.g. Under Construction, Safe Edit), then: If you have workflow on your website you must apply for approval and have it granted by your Web Coordinator or the staff member who has been nominated as an Approver. If approval has been granted they must perform the next step to make the Asset live. If you are logged into Edit+ you can open the Asset Finder and click Refresh Assets to check the current status. If you are colour blind you can hover your mouse over the colour used to represent the Asset Status in the Asset Finder and it will display the name of the Asset Status. You can also use the Details screen to read the current status of an asset Visitors see a red x or the Alt text instead of an image If an image is not loading it is probably Under Construction (light blue). This may have happened if it was added to the page using the Pick Asset button. Your image is most likely Under Construction. The image needs to be made live so it s visible on your website. Visitors cannot see recent changes made to an Asset that is Live Visitors to your site will not see a change until 3 hours after it was made live. If you would like a non-editor to view changes you have put live you can advise them to add either of the following suffixes to the address of the page they want to view _nocache or _recache Visitors are prompted to login to the CMS (cannot access an Asset) MySource Matrix login prompt If visitors to the site are prompted with the MySource Matrix login, check the status of the Asset. Assets must be Live (light green) to be visible on your website. Visitors will be prompted to login to the CMS when they are provided with and use a direct link to an Asset which is Under Construction or Archived, or they click a link on a live page that points to an Asset which is Under Construction or Archived The only people who will be able to login and view the content from here are those who have publishing rights to your website. Those who do not have editing rights will be unable to login and view the Asset. CSU login prompt If visitors are presented with the CSU login prompt they are trying to view secure content. CSU staff may enter their details to login and view the content but public users will be unable to proceed. If content needs to be available to public users (those without CSU logins) it must be moved to an area which does not have security applied. Page 78 of 79