Skip to content

Step-by-Step Guide to Editing TMS

The tool for creating and publishing the majority of content on the University's websites, the Template Management System (TMS), has been developed to complement the University Brand Standards while ensuring our websites are more accessible, functional, easily maintained and consistently branded.

  • AboutThe Template Management System (TMS)

    The Template Management System, developed by the University of Adelaide's Web Team, provides a means of editing the content of a website separately from the design of the site, allowing you to maintain your website(s) easily. The design of the website, or the template, can only be modified by the Web Team.

    The TinyMCE online editing tool is built into the TMS, allowing changes to be made directly to a webpage on the development server, webdev. When you are satisfied with your changes, you can then upload the amended page to the production server, making the new version of the page live on the website and therefore accessible to users of the Internet.

    Websites using the TMS are made up of files with the extension .HTML. These .HTML files contain the content of each webpage. Therefore, to change the contents of a page, you will need to edit the .HTML file that contains the relevant page content. This can be done from any computer that is connected to both the Internet and the University network, as long as you have editing access.

    Note: you can access your development website from home or elsewhere outside of the University's campuses by connecting to the University network via Virtual Private Network (VPN). See Technology Services website to download and access the VPN for Mac and VPN for Windows.

  • EditingAccess and Log in

    To be able to make changes to your website, you must have been granted editing access by the Web Team and must be accessing the development server from within the University's firewall (security that blocks unauthorised access). This means that your computer must be located either within the University network (i.e. on campus) or you must be using your staff/student dialin or VPN.

    You can find your website on the development server by using WebAccess:

    • Log In to WebAccess using your university ID and password
    • If you only have editing access to one website, the site should appear on screen. If you have access to two or more websites, search for, and click on, your website name.
      Please note:
      if you are searching for a sub-site, you will be taken to another page displaying all sub-sites within the main site. Click once on the relevant sub-site name.
    • On the page displaying your website information, click on the first URL in the Development section
    • The website that you want to edit should now appear on your screen.

    When browsing through your website on the development server, two boxes will be displayed at the bottom of the page that show functions that may be performed on pages throughout the site. Initially the top display box will only allow the option to login.

    Click on the log in link and enter your university ID and password to gain access to the maintenance functions.

    The top blue display box will then change to show the allowed options including: edit, upload, access and files.

  • EditingWeb pages

    Browse through the site to find the page that needs changing and then click on the edit link in the maintenance options box.

    The page will be redisplayed with the editable content in a smaller scrolling box. Above the content area is a toolbar, showing icons similar to those in Microsoft Word. These icons enable you to make a number of changes to the content.

    Making changes is similar to editing a document in Word. The text content of the pages can be changed by using the icons to bold and italicise text, align your content to the left (as standard) and use numbered or bulleted lists if required. The page content can also be enhanced by creating links, using tables or inserting images where appropriate.

  • EditingPasting text from other documents

    Copying and pasting content from other programs, such as Word documents and emails, is pasted as plain text by default. This means that the other programs' formatting is not transferred with the text.

    You can paste your content in and then style it accordingly, using the Formats dropdown menu:

    Formats Toolbar

    Please note: tables created in Word cannot be pasted in to your webpage. You can however create an empty table in TMS and then copy the text within each table cell and paste into the desired cell on your editing page.

  • EditingHeadings

    The best way of formatting text to ensure your page is accessible and looks professional and consistent with other University of Adelaide webpages is to apply a heading format.

    Heading formats are applied to the whole of the paragraph where your cursor is located by selecting one of the heading options from the drop-down list highlighted below.

    toolbar format

    The basic format applied to the majority of the text is the paragraph format. The heading options available are Heading 1 through to Heading 6. These have predefined styles set for the templates.

    The main heading for each page, except for the homepage of your website, should be defined as a Heading 1. The Heading 1 should only be used once on each page. The "Intro Paragraph" format is also used once per page, directly below the Heading 1.

    All other headings in the page must use Heading 2 through Heading 6, in descending order, without skipping any numbers. This is important to comply with accessibility guidelines.

  • Adding Internal LinksFrom one page to another within your current site

    To create an internal link from one page to another within your current site, it is recommended that you only use part of the URL that specifies the path of the file within the site. The part of the URL you use depends on whether the site is located in the main University site or within a virtual host. The options are detailed in the table below:

    Type of site Site URL style Part of URL to include in the link field Example
    (site="temp"
    folder="policy"
    file="webpolicy.pdf")
    Standard University site http://www.adelaide.edu.au/sitename/ /sitename/<path> /temp/policy/webpolicy.pdf
    Virtual host site http://www.vhost.adelaide.edu.au/ or http://vhost.adelaide.edu.au /<path> /policy/webpolicy.pdf
    Subsite of virtual host site http://www.vhost.adelaide.edu.au/sitename/ or http://vhost.adelaide.edu.au/sitename/ /sitename/<path> /temp/policy/webpolicy.pdf
    *where the <path> is the rest of the URL for the file being linked to.

    An internal link can be created by following the steps below::

    • Open a separate browser window and go to the page you want to link to
    • Copy the whole URL from the browser address at the top of the screen
    • Go back to your webpage editing screen and highlight the text to be used as a link
    • Then click on the Insert/edit link icon (see below)

    Image showing the Insert/edit link icon

    • Paste it into the Link URL field

    Link pop-up screen

    • Delete the first part of the URL specifying the base/external part of the site i.e. everything before and including the "edu.au".
      Note: your link must begin with the "/".
    • Ensure that the 'Target' field displays 'None.'
    • Complete the link by clicking OK.

    Adding an Internal Link in a New Window

    By default, internal links should open in the same window. However, there are a few occaisons where it is appropriate for an internal link to open in a new window.

    Where this is the case, the icon Open link in new window is to be added by inserting the HTML image tag below into the source code, at the end of the link.

    <img alt="Open link in new window" src="//global.adelaide.edu.au/v/redesign1/images/new-window.png" title="Open link in new window">

    For the process of adding the icon HTML source code for links, please see Adding External Links.

  • Adding External LinksFrom one page to another external site

    All external links must use an external link icon to notify users that by clicking the selected link, they will be directed out of the University of Adelaide website.

    There are two external link icons:

    • Link to an external website: Link to external website

      HTML image tag:

      <img alt="Link to external website" src="//global.adelaide.edu.au/v/redesign1/images/external-website.png" title="Link to external website">

    • Link to an external site opening in an new window:Open external site link in new window

      HTML image tag:

      <img alt="Open external site link in new window" src="//global.adelaide.edu.au/v/redesign1/images/new-window-external-site.png" title="Open external site link in new window">

    Please refer to the UI Pattern Library for the external link patterns, or contact the Web Team for further assistance.

    An external link can be created by following the steps below:

    • Open the Typography page in the Pattern Library in a separate browser, and under 'External Links' click to
      '[ show source ]' to view the source code for the relevant external link (External Link or External Link in a New Window)
    • Copy the full source code pattern, i.e. <p><a href="http://www.sahealth.sa.gov.au/">S.A. Health <img alt="Link to external website" src="//global.adelaide.edu.au/v/redesign1/images/external-website.png" title="Link to external website"></a></p>
    • Go back to your webpage editing screen and click on the source code icon (see below)

    Image showing the source code icon

    • Paste the source code pattern (see below) into the source code window

    Image showing the external link source code

    • Open a separate browser window and go to the page you want to link to
    • Copy the whole URL from the browser address at the top of the screen
    • Return to the source code window. Highlight the URL in the source code pattern, and replace with the external URL

    Image showing the external link URL highlighted

    • Update the external website name accordingly, and press ok

    Image showing the website name highlighted

  • Adding Anchor LinksFrom one point on the page to another pre-defined point within a page

    Anchor links are links from one point of the page to another pre-defined point within a page. These are especially useful if you have a lot of content on a page, as the anchor link will allow the user to jump to the relevant content rather than having to scroll through.

    To create an anchor link:

    • Place the cursor on the screen next to the content you want users to jump to
    • Then click on the anchor icon in the editing toolbar

    Editing toolbar

    • Enter a name in the anchor field. The anchor name should ideally be one word and contain only lower case letters and numbers.
    • Then click the Insert button. You should now see an anchor appear on the editing screen where your cursor was located (this will not appear on the live version of your web site).
    • Next you need to create a link on text at the top of the page.
    • Highlight the text that will be the link
    • Click the link icon and in the link URL field enter a # symbol and the name that you gave to the anchor e.g. to link to an anchor you called "heading1" the link field should contain #heading1.
    • Click Insert to activate the link

    Notes:

    1. To link to an anchor in another page, put the URL of the page in the link field followed by a # and the name of the anchor e.g. http://www.adelaide.edu.au/#heading1
    2. You can only create anchor links in your own pages or if you know the anchor in a page on another site exists.
  • Adding Email LinksTo allow the user to send an email to a particular recipient

    It is possible to create a link that will open an email window when it is clicked. To create an email link, follow the steps below:

    • Search for the name of the person you want to create the email link to using the Phone Directory
    • Copy the email address listed for that person
    • Go back to your webpage editing screen and highlight the text to be used as a link
    • Then click on the Insert/edit link icon (see below)

    Image showing the Insert/edit link icon

    • In the link URL field type in mailto: and then paste in the email address after that. For example, if the email address is 'staff.member@adelaide.edu.au' then the link URL field should contain the link mailto:staff.member@adelaide.edu.au
    • Once again, click the Insert button to activate the email link.
  • Adding File/Document LinksTo allow the user to download/access a particular document

    To create a link to a file, such as a PDF or Word document, please follow the steps below:

    Step 1: Make the file available on the development server

    • Click once on the files option listed in the top blue editing box (see below)

    editing box

    • Click on the relevant folders within the files view to navigate to the page the document link will appear on
    • When you are in the correct page (e.g. Index of webguide/tech/tms) click on the Browse button under the 'Upload a file to the current directory' section. This will allow you to search for the relevant document on your hard drive. Note: please ensure your files are named correctly by reading the Naming Files page.

    files

    • Select the document and click open. This will display your chosen document in the field next to the browse button. Then click Submit.
    • Your document/file will then appear in the alphabetical list with the rest of the files. Then right click on the name of the document/file and click Copy Shortcut.

    Step 2: Create the link to the file

    • In your development site, go to the page that is to contain the link (by navigating through the file list, navigation menu or breadcrumb trail) and click Edit in the toolbox to open the page for editing.
    • Highlight the text that is to contain the link and click the Insert/edit link icon (chain). In the link URL field, paste in the path of the document you are linking to and delete all of the link text before and including 'edu.au'. This should leave you with the link e.g. /website/folder/file.pdf. Then click Insert.
    • Preview the page and save changes BEFORE checking the link or your changes will be lost.

    Note: When creating a document link, TMS will automatically insert the document name, type and size into the link title so it is shown when you hover the cursor over your document link (see below):

    Document link title shown when hovering over link

    Step 3: Check the page

    • Once the changes to the page have been saved, check that the link to the file is working correctly.

    Step 4: Upload both the file and the page

    • Please remember to upload both the file/document you are linking to AND the page that your file/document link is displayed on. For details on how to upload, please read the instructions on how to upload.
  • CreatingTables

    Tables are recommended for presenting tabular information within webpages, and TMS has a number of inbuilt features allowing tables to be simply formatted and maintained.

    • To create a new table, move the cursor to the point in the page where you want the table to be displayed and click on the icon to Insert a new table (see below).

    • A pop-up window will then be displayed that allows the table parameters to be specified (i.e. number of columns and rows).

    table properties

    table row options menu

    • Table widths should either be left blank to allow the browser displaying the page to determine the ideal width for displaying the tabular information, or if necessary, a percentage width can be specified to enable tables to be displayed in a consistent style, e.g. a width of 80% will force the table to be displayed across 80% of the window width. It is not recommended that exact pixel widths be specified as these are not likely to display well for all end users.
    • All tables will be automatically given a class of “light” which adds our standard table styling. If you are using the table for layout purposes and wish to remove the styling, please select a class of “None” from the class drop-down list in table properties.
    • Click Insert to add the table shell to the page.
    • Table cells and rows can be formatted in the cell and row sections of the table menu. You can place your cursor in the appropriate cell and navigate to these sections via the table icon. Otherwise you can right click your mouse in the relevant cell, and a table menu will appear.
    • The cell type can be specified as either a data cell or a header cell, and the formatting applied to the cell can be changed by selecting your preferred option from the class drop-down field.
    • By using the other table icons, you can also add or delete rows or columns and cells can be merged and split as required.

    Note: Clicking on an existing table will enable options for updating the table to become active. The table style or width can then be changed by clicking the table icon and changing these values.


  • CreatingFolders

    Folders (directories) are useful for keeping your website files organised. In most cases, you would be creating a folder as a subfolder of the /images/ or /docs/ folder to keep things tidy. This will also help the files view load quicker when you're browsing through the site files. As if there are a lot of files in a folder, it will take longer to load the file list.

    To create a new folder:

    • Navigate to the folder you want to create a new folder in via the 'files' link at the bottom of your webpage.
      E.g. to create a subfolder in the /sitename/images/ folder, start at the homepage for your site in webdev: https://www.webdev.adelaide.edu.au/sitename/.
    • Click the 'files' link at the bottom of the page.
    • Click on the /images/ folder to go into that folder.
    • Click in the address bar at the top of your browser and remove everything after /images/.
    • Type in the name of the new folder you want to create and press enter.
      E.g. https://www.webdev.adelaide.edu.au/sitename/images/new-foldername/.
    • You'll get an error page (like when you create a new page), but at the bottom of the page you'll see the option to 'create'. Click the 'create' link.
    • This will create a folder AND a page, it will also take you straight into 'edit' mode. Because you don't want to create a page, just a folder, you need to click 'cancel' and exit edit mode.
    • From there, click the 'delete' link in the first box at the bottom of the page. This will ask if you're sure you want to delete "/sitename/images/new-foldername/index.HTML" (note it has index.HTML). 
    • Click 'yes' to confirm.
    • Now you will have an empty subfolder within your sites images folder.
  • Saving Changes or ExitingFrom the edit window

    Save Changes

    When a page is being edited, it is locked on the server so that no other users can make changes at the same time. At the bottom of the editing page are two buttons which give you the option to Preview (and then save your changes) or Cancel. To unlock the page when you have finished editing or if you decide you no longer want to edit, it is important to exit from the page using one of these options.

    • Click the Preview button at the bottom of the editing page
    • Check the displayed preview page to ensure you are happy with the changes, but DO NOT check links at this time as the page is not yet saved. The following options are displayed at the top of the preview page

      Page options
    • Click Save Changes: if you want to accept the changes you have made to the page and exit
    • Click Edit: if you want to return to the edit window and make more changes
    • Click Cancel: if you want to lose your changes to the page and exit
    • If you decide to Save Changes, this means that the page is saved on webdev, the development server. You can then:

      • Check all links in the page to ensure they are working correctly.
      • Upload it to the live website if you are happy with the page and are ready to put it live.

    Cancelling or Discarding Changes

    Clicking the Cancel button will exit you from the editing window and any changes will be lost. This is the option to use if you accidentally click edit on the wrong page or if you want to discard changes you have made.

    Note: Please do not exit from the editing page by closing the browser window or using the back button.

  • ManagingFiles (web pages, documents or images)

    Clicking on the files link in the options box will display the files for the current folder. These files represent either web pages [.HTML], documents [.pdf, .doc] or images [.gif, .jpg].

    Sub-folders within the currently displayed folder are also shown in the file list (e.g. the secure folder shown in the screenshot below).

    files

    Clicking once on a folder will cause the contents of that folder to be displayed. To move up a folder level, click on the Parent Directory folder icon at the top of the files list.

    Note: Keep an eye on the text at the top of the screen e.g. Index of webguide/tech/tms/, as this indicates where you have navigated to e.g. in this case, the tms folder within the tech folder on the webguide website.

    By using these options, it is possible to navigate through all folders of the site and hence gain access to all files within the site.

  • DeletingWeb pages/files

    Step 1 - Delete from Webdev

    When you are logged-in and viewing a webpage in webdev, one of the options shown in the top blue editing box at the bottom of the page will be a link to delete (see below).

    delete link in toolbox

    Clicking on this link will cause a confirmation message to be displayed asking if you are sure you want to delete the file/page. Clicking Delete will delete the current page. Clicking Cancel will take you back to the page view.

    If the page had its own folder, e.g. the page's URL was similar to /sitename/page/ (and not /sitename/page.HTML), you also need to delete the page's folder. To do this, once you've deleted the index.HTML file, you will be taken into the files view. If there's any other files in that list you will need to delete them also. Once you've done that, click the [parent] link in the list:

    Then find the deleted page's folder which you want to delete and click the delete link to the right of that folder:

    Deleting a page's folder

    Similarly, if you wish to delete a file on your website, you can browse through the files link to locate the file and click the delete link to the right of the file you wish to delete.

    Again, clicking the delete option will display the confirmation message asking if you are sure you want to delete the file/page. If you confirm the delete operation by clicking Delete, the current file will be deleted. Clicking Cancel will take you back to the files view.

    Please note: if you accidentally delete a page, contact the Web Team as soon as possible. The team is able to recover any pages that have been deleted within a week of deletion.

    Step 2 - Delete Files from the Live Site

    It is important to note that deleting a file from webdev DOESN'T remove it from the live site. In order to remove a file/page from the live site, you need to upload the directory the file/page was sitting in.

    E.g. if the file you deleted was sitting in the /sitename/images/ folder, you'd need to go into the files area from the homepage, then next to the /images/ directory, click the action upload_dir.

    This will upload the whole /images/ folder removing the deleted files off of the live site also (upload_dir replaces the contents of that directory on the live site with what is on webdev).

    To clarify the above, if you clicked upload_dir from the homepage of your website, it would upload all of the pages and files you have sitting on your website from webdev to the live site.

 

Web Team

Call us: For urgent requests or to speak with someone directly,
please contact one of our team members.
 
Not sure how to do something? Take a look at our FAQs.