Drupal Template: 
UQ Base Template

 

The UQ Base Template is one of the earlier UQ Drupal templates created.  

 

Training

Training for UQ Base template is available for Site Editors and Site Coordinators who need to add and manage content for the websites.

  • Which template is applied to my site

    If the front page of your website has the following image in the bottom left hand-side of the webpage, it is has the UQ School template applied. If it does not have this image, then it has the UQ Base template applied."

 

Start editing the website 
  • Instructions to Login to the site

    Step 1

    Scroll to the bottom of the page and click on the login link in the footer.

    Login

     

    Step 2

    Login with your UQ Username and password.

    UQ username and password

     

    Step 3

    Click on the home icon (home icon) to view the School site.

    Click Home icon

    You can proceed with editing your site.

 
Additional Guidance
Basic Page

Create a basic page

Drupal Theme: 
UQ Base Template
Learning Objectives: 

On this page, Site Editors will find the step-by-step instructions on how to create a basic page. This includes information about all the different fields available. 

This tutorial covers the creation of basic pages, the other content types such as "Article" and "Event" will be slightly different. 

Read through the tutorial first then undertake the exercises at the end of this page. When finished, Site Editors will have a number of basic pages for their website.

NOTE FOR SITE COORDINATORS:
When undertaking this training activity please create 7 webpages in your sandbox. This will ensure that there is enough content available when undertaking all the Site Coordinator activities.

Add a new basic page

Select Add Content from the Content option in the admin menuLogin to your Sandbox or Drupal starter website and navigate to the administration menu in the top left hand corner of your web browser.

To create a new page navigate to: Content > Add Content > Basic Page


NOTE: The Add Content menu will list the different content types you can use (i.e. Article/Basic Page/Event etc). The majority of the time you will use Basic Page.


Basic Page fields

The screenshot shows the basic page fields. A description of the fields and the actions that can be performed are detailed below.

Drupal create basic page screenshot

Left hand menu navigation

Content

Title
The create basic page screen requires a Title of the webpage. The Title is a mandatory field.
 
Featured
This checkbox can be checked to allow your page to be displayed in a feed. Depending on how your site is set up, this could be on the homepage or in a listing on a subpage (see note below).
Summary
No content is required in the summary unless your basic page is being promoted or displayed in a feed. The summary would then be used to display in the feed. ​
Body
Content, documents and images required on a webpage are added to the Body section. The content in the Body can be formatted using the editor. The editor, which is located at the top of the body content, has many of the same functionalities that can be found in a word processing program.
 
Users can access features such as bold, italic, underline, bullets, justification and can insert/edit links and images, and copy and paste content etc. Html code in the webpage can be viewed by accessing the "source" in the editor. There is an option in the editor to paste content from Microsoft Word into the Body of the webpage. This is covered in detail in Activity 3: Add & Edit Content of the Site Editor training. Tables can be created in the body for the purpose of displaying tabular data.  This is covered in detail in Activity 4: Tables of the Site Editor training. We recommend that you use the templates which are located in the tables page of the style guide for positioning content and images.
Text format
The editor can be viewed in Full HTML, Raw HTML or Plain text. The editor defaults to Full HTML. If multimedia such as YouTube or Vimeo is required on the page then it is recommended that users paste the HTML code using the source functionality within the editor (next to the table icon).

NOTE: Featured: This checkbox can be checked to allow your page to be displayed in a feed. Depending on how your site is set up, this could be on the homepage or in a listing on a subpage. See example image right (the summary content is in the red box).

Image of use of summary in the basic page

Featured Image
This is where you can attach an image that best represents this content page. This image then can represent the page in a feed. There is another "Image" field, explained below.
Images
This field allows you to add multiple images attached to the content item. The content page will display these images automatically, cropped and positioned to the right of the content body.

Attachments

Adds an image that display's in a fixed position on the right hand side of the webpage. Click the “Browse Server” button and navigate to the image that is required on the page then double click on the image. The image will now upload. Fill in “Alternative text” and “Title” in the box. Click “Save” to add to webpage. Repeat for multiple images.

Image of use of attachments

Category Tags

This feature is currently not in use.

Menu Settings
example of drupal menu settings

Once checked the Menu link title will be automatically populated with the title of your webpage. Add some content to the Description as this content is shown when hovering over the menu link.

The Parent item contains a drop down menu that allows users to index their content in the menu. NOTE: The default is Main menu.

Weight allows the web pages to be changed in the navigation, i.e. smaller weights are displayed before links with larger weights.

** Please note, this is only available to Site Coodinators, and Sandbox sites at present. 

Revision Information

NOTE: A revision is a previously saved copy of a page. You can roll-back to previous revision if needed, which will replace the current page. In general, the site will store up to 5 revisions of each page. You don't need to save each page change as a revision, it is an optional function.

It is useful for short term changes, such as a notice, that need to be taken down after a period of time.

Authoring information

This normally does not require attention. It will automatically populate the authoring information with your details.

Publishing options

To publish the page click the Save button at the bottom. By default pages will be NOT be published live when they are saved. This means that they won't appear in menus, search engines and people cannot view them unless they are an editor or coordinator who can access the site.

To save the page without publishing, simply click "Save". If you would like to publish your page, you must click "Publish" before clicking "Save".

You can unpublish a page by editing the page, clicking on "Publish options" and unchecking "Published".

Your site could be set up to display content on the homepage in a feed. This may mean that you can check "Promoted to front page", which sets this page to automatically display in the homepage feed.

Depending on the feed configuration, "Sticky at top of lists" is used to keep the content in front of more recently published content in a feed.

Once published your page will now show up on the black "top main menu".


EXERCISE: Create a new page

Once you have read through the tutorial create your first webpage.

  1. In the top left hand corner of the web browser in the black menu click on the Content > Add Content > Basic Page.

  2. In the Title field type in “About us”. NOTE: Site Coordinators will need to create 7 pages for this exercise.

  3. Check the box "Featured" and add "This page details information about studying at the University of Queensland" in the "summary". NOTE: Image and caption not required for this exercise.

  4. In the Body field leave this blank as we will add content, images and documents in Activities 3 to 8.

  5. Click on the Menu Settings and check the box "provide a menu link" and add the content "This page details information about The University of Queensland".

  6. Click on "Publish" at the bottom of the page.

    Your first webpage will now exist in your site. If it is published, then people who visit the direct URL can view your page. It may automatically appear in feeds, depending on how your site is set up.

    SITE EDITORS NOTE: If you are working on a live website it won't exist in the main black menu until a Site Coordinator adds it to the menu. If you are working on a sandbox it will exist in the main black menu.

  7. Repeat steps 1 to 6 and create 6 more webpages. The titles of the webpages should be as follows:

    • Students
    • News
    • Teaching Excellence
    • Global Reputation
    • Campus Life
    • Contact us

NEXT: Structuring page content

Content

Add and Edit Content

Drupal Theme: 
UQ Base Template
Learning Objectives: 

On this page site editors will find the step-by-step instructions on how to add  and edit content to web pages.  This page also has instructions on how to cut-and-paste a MS Word document into a webpage.

Upon completion of the exercise below you will now have a webpage that is populated with content.

View the full list of content

Click on Content in the admin menu on the top left hand menu of the browser to see all of the nodes on the site. This will include Pages and any other content types the site might have.

  • To "find" your content

    • Filter by status: published/unpublished/promoted/not promoted/sticky/not sticky
    • Filter the list of content by its type
  • Edit your content by clicking "edit" to the right of the listing

  • Preview your page (whether published or unpublished) by clicking on the title

  • Perform simple bulk operations by checking a group of content, choosing your action on the drop down list and clicking Apply.

    • publish/unpublish
    • promote to appear in feeds / remove from feeds
    • Make content sticky / not sticky
    • Trigger the system to update the URL aliases

In page editing

You can also navigate to a page on the front-end of the site and click the Edit tab instead of going through Content in the admin menu.

Edit option on page


Cutting & Pasting documents into a webpage

When cutting and pasting information directly from a Word Document, text document or another web page, unnecessary code from that page will carry through to your site. This code is not visible unless viewed through the source but it can potentially cause problems for search engines, people with disabilities and devices such as phones and tablets. It can also make your page display strangely and cause problems editing your page at a later stage. For best results use the Paste from Word button.

  • Open up your MS Word document and copy your content (Ctrl A)
  • Click the Paste from Word icon and paste your document into the dialogue box (Ctrl V)
  • Click Ok

Example of how to cut and paste from MS Word

EXERCISE: Editing and adding page content

Read through the steps noted on this page to familiarise yourself on how to edit and add content to a webpage. Complete the activity below.

  • Navigate to the Training Resources webpage, open the Sample document located on this page, and copy the content of the document (Ctrl A).
     
  • Locate your "About us" webpage and click to edit this page.
     
  • Click the Paste from Word icon and paste your document into the dialogue box (Ctrl V) then click Ok
  • Save your webpage.

NEXT: Adding links

File Browser

File browser

Learning Objectives: 

On this page, site editors will find the step-by-step instructions on how to navigate through the file browser on their Drupal website.

The File browser displays all the files that have been uploaded to Drupal that may be linked to a page. You can upload, rename and delete the files from this view.

Access via the admin menu under Content > File browser.

File browser in the admin menu

Structuring files with subfolders

Subfolders can be created within the File browser to create structure and make finding files easier. To create a subfolder, right-click on the parent folder and select New Subfolder. Enter the name for the new folder and click OK.

Subfolders can be created under other subfolders for more specific structures.

Creating a new subfolder in the file browser

Folder settings

The settings button allows you to view the files in the selected folder by different filters. You can change from a list view to a thumbnail view, or order the files by Name, Type, Size, or Date modified.

Folder settings in the File browser

Uploading files

First select the subfolder you want to upload to by clicking on it. Then select the Upload option with the green, up-facing arrow. This will display a window to browse your computer so you can select the file you want to upload.

Select the file to upload and click the Open button. The file will be uploaded and appear in the folder of the File browser.

There is a size limit of 20MB per file, although no limit on the total number of files.

NOTE: File names should not have spaces or special characters in them like ' or ( ) as these are not valid url characters on the web and can prevent some browsers from opening those files. Best practice is to replace all spaces with hypens before uploading. e.g. "registration form.doc" becomes "registration-form.doc"

Renaming files

Once a file has been uploaded you can rename it via the File browser. However, if the file is already being linked to on a page or from an external location then the link will likely break and need updating.

Right-click on an uploaded file and select Rename. Change the file name as required and click OK.

Renaming a file via the File browser

Moving files between subfolders

Files can be moved from one folder to another without having to re-upload them. Select the file you want to move, right-click on it and select Add to Clipboard.

Select the folder you want to move it to, right click on it and select Move files. The file will be moved to the new folder but the url will remain the same so no links to it will break.

Moving a file to another folder

Deleting files

To delete a file, right-click on it and select Delete. You will be prompted to confirm you want to delete that file so that files cannot be deleted by accident. Once a file is deleted it is gone permanently and cannot be recovered.

Confirm deleting a file

Deleting multiple files

Hold Control (on PC) or Command (on Mac) when clicking on the files you want to delete. This will select multiple files at once which you can delete in a single action.

Deleting multiple files

Downloading files

To save a copy of a file to your computer, right-click on the file and select Download.

Deleting subfolders

To delete a subfolder, right-click on it and select Delete. Once a folder is deleted it is gone permanently and cannot be recovered.

You can only delete folders that are empty. If it contains any files or other folders you will not be able to delete it until you have either deleted or moved all of its contents. This guards against accidentally deleting a large number of files.

File URL

For the full URL of the image, right-click on the file and select Copy URL. Then press Ctrl+C to copy the address as it appears.

EXERCISE: File browser

  1. Navigate to the admin menu and under Content > File browser create a subfolder for your site. Use categories that will help you organise and find your files. Eg. about, news, events.
  2. Upload a couple of files into each folder.
  3. Copy the URL for one of the files.
  4. Add a link in a content page to copied URL.
  5. Save your work.

NEXT: Deleting pages

Home or Inception page

Session 2: Homepage & Inception

Drupal Theme: 
UQ Base Template
Learning Objectives: 

In this session, you will learn how to build and modify a homepage using the Inception module. The exercises will step through how to add some common homepage elements like a banner that displays featured content, and a list of promoted content.

Unit 2.1: Inception

Inception is a content type that allows you to easily drag and drop other content like blocks, views or HTML code together in a variety of layouts.

Sandbox sites come with an Inception homepage and some default introductory content. The yellow boxes are the areas where you can drop blocks of content in. DO NOT DELETE the default homepage. If you don't like the work you have done, remove the element or drag it to scratch. If you delete your page, you will have to configure a new one to be the homepage. This configuration access is only available to Site Administrators.

Firstly let's clear the default sandbox content and populate it with our own homepage.

  1. Navigate to the homepage.
  2. Drag the top introduction block into the “scratch” zone at the top right.

    The scratch is a bucket to temporarily hold blocks that you aren’t using on the page. Blocks in scratch are not visible to the public.
  3. Click on scratch, you will see your block has been moved there.
  4. Click save at the bottom of the page to apply the change. That block will now reside in scratch unless you move it out again.
  5. Now, move you mouse to “Getting Started” and click the trash can icon.
    1. Click “Remove element” to confirm you want to delete this.
    2. This will permanently remove this text block from the page. Notice that it does not appear in scratch.
    3. Drag “Take a Guide” into scratch and save.
    4. The homepage is now empty and ready for you to build your own.

Unit 2.2: Banners

Let's add a banner. Banners nodes that are 'Promoted to frontpage' AND 'Featured'.

  1. Click "Add Element" in the top most yellow region and select “View”.
  2. In the View drop down choose “(Starter banners) Tall banner with passive buttons
  3. Click Add view
  4. If the banner doesn’t appear immediately it is because the system may require a few seconds to generate the correctly sized images.

The banners look for any basic page or article content which is "Featured" AND "Promoted to front page".

Different banner styles

Now, let’s create a different style banner.

It is critical you remove the first banner before creating a second banner. Please ensure you complete the first step.

  1. Firstly, remove the existing banner – drag the banner into scratch and save OR click the bin icon that appears when you hover over the banner.
  2. Select Add Element for the same top yellow region and choose “View”.
  3. Select “(Starter Banners) Tall Banner”, then “Add view”.

Your new banner should be showing; this time without the coloured buttons and fading through each of the three items you've created.


Unit 2.3: List with lead

Add a list with lead showing your promoted content. List with lead displays Basic Pages that are 'Promoted to frontpage' but NOT 'Featured'.

  1. In the same top most yellow region, add a new “view” element.
  2. Select “(List with lead) Title, Summary, Image”.
  3. Add view.
  4. The following block should appear with your four basic promoted pages in the listing. 
    REMINDER: Promoted to front page must be checked in the "publishing options" or it will not show in the listing.

We now need to adjust some things. The text under each heading is pulled from the body of the basic pages. If you want it displaying something better, you will need to edit the summary for each page.

Let’s adjust the default text in the left column and change the number of items displayed to 3:

  1. Click on the cog icon in the grey bar above the element.
  2. Click on “Custom View Options”.
  3. Add a welcome message into “Custom header”, give it a H2 title and some body text.
  4. Scroll down and in the "Max number of items" field set the max number of items = 3.
  5. Save changes.

TIP: Most of these views will always generate the more recently published first. If you wish to specify order, try manipulating the "Authoring information".


Your completed block should look like this:


Unit 2.4: Add text block

Now let's add a plain text block to one of these regions.

  1. Choose a region and click Add Element > HTML Code
  2. Add a heading “About this site” and set it as <h3>.
  3. Add a short body under the heading.
  4. Click Add html.
  5. Drag your text block so that it appears under the banner and above the list with lead. Click Save.
  6. Click the Preview button at the top right corner of your homepage to see your homepage without the yellow regions.
  7. Click the Edit mode button at the top right corner to return back into edit mode.

 

NEXT: Session 3: News

Insert a table

Tables

Drupal Theme: 
UQ Base Template
Learning Objectives: 

On this page site editors will find the step-by-step instructions on how to insert a table on their Drupal website.

Tables can be used to display data in a grid. They should not be used for general content layout, such as aligning images with text, as it does not work with responsive design to display well on mobile devices. There are templates available to handle common layouts involving images and text.

Step 1: Insert a table

  1. Position the cursor where the table should be placed.
     
  2. Select the table icon from the editor menu
    Table icon in the editor menu
     
  3. In the Table properties dialog window, enter the number of rows and columns required
    Table properties dialog window
    Headers
    Applies to the first row or column and defines what the values in each row and column mean.
    Border size
    Sets the pixel width of the table border. Usually 1 or 0.
    Alignment
    Sets the alignment of text in the table cells. Should be left as Not Set in most cases as this will default to a left alignment.
    Width
    Sets the overall width of the table. Defualts to 500 pixels but should be changed to 100% in most cases. Using a % width allows the table to respond more effectively on mobile devices.
    Height
    Sets a fixed height on the table. This should be left blank so that the table height expands naturally according to the content in it.
    Cell spacing
    Controls the space between table cells.
    Cell padding
    Controls the space between the border and the content of the table cell.
    Caption
    Adds a caption above the table that explains what the table is about. e.g. "Results of survey into Drupal usage at UQ"
    Summary
    Defines a summary of the contents of the table. Doesn't appear on the page but can be read by screen readers and search engines.
  4. Click OK to create the table.
     
  5. Add content to the table cells.

Table styles

The UQ Base theme has a range of different table styles which can be used by applying a class. The Style Guide contains the full list of table styles.

To apply a class, open the table properties and click on the Advanced tab. Enter the class style under "Stylesheet Classes".

Advance options for tables

EXERCISE: Adding Tables

  1. Navigate to the "Contact Us" webpage
  2. Select the "table" icon and add a new table that includesing rows, columns and a header.  Insert text into your table.
  3. Visit the help guide and view the list of table styles you can use
  4. For the list apply a table style that will make your table green

NEXT: Image Browser

Images

Adding and replacing images

Drupal Theme: 
UQ Base Template
Learning Objectives: 

On this page, site editors will find the step-by-step instructions on how to add images into a content page. Site editors should also visit the Creating web images page for information on the technical requirements for web images.

Insert an image

There are two ways to do this; insert an existing image already sitting in the Image browser OR upload an image via the editor.

  1. Position the cursor where the image should be placed.
     
  2. Select the Image icon from the editor menu
    Image icon in editor menu
     
  3. On the dialog window, click the Browse Server button to bring up the Image Browser dialog window.
    Image dialog window
     
  4. Select the image you want to insert, or upload a new image and then select it.
     
  5. Double click the image to add it to the Image dialog window on your page.
     
  6. Write an Alternative Text description of the image so that screen readers and search engines can understand what it is. This is required to meet WCAG accessibility legislation. Visit the Accessibility pages of this website for more information.
     
  7. Click OK to insert the image to the page.
     
  8. PLEASE NOTE: You only need to upload one image. UQ Drupal comes with a set of image styles that automatically crop and resize images to preset dimensions. If you have one image, but you want to display it in various sizes, landscape, portrait or square, you only need to upload one file (the biggest size to be used).

How to use Image Styles

For an example, if there is a banner image that would be too big to insert into your content, you can choose a smaller image style such as "medium square" to use instead. Drupal would crop the image to the image style size before inserting it.

  1. Position your cursor where you want to insert the image.
  2. Click the Image icon in the editor
  3. Click Browse Server to locate your image
  4. Right-click on that image to see the preset image styles available. These are indicated with a green tick beside them.
  5. Click on the style you want to use. This may take a couple of seconds before Drupal inserts the selected image, cropped and sized, into your content.
  6. See all the image styles available.

image styles preview

EXERCISE: Adding images

  1. Go to the Training resources page and download a banner to the desktop. Note: If undertaking Site Editor Training a banner will be already saved in your image browser.
     
  2. Go to the image browser and upload the banner image.
     
  3. Insert an image into your content as a "Medium Square"
     
  4. Insert another copy of the same image but the size we want is "Small landscape"
     
  5. Save your page.

NEXT: File browser

Image Browser

Image browser

Drupal Theme: 
UQ Base Template
Learning Objectives: 

On this page, site editors will find the step-by-step instructions on how to navigate through the image browser, upload, delete and manage their images.

Manage your images

The Image browser displays all the images that have been uploaded to Drupal that may be inserted in a page. You can upload, rename and delete the image files from this view.

Access the Image browser via the admin menu under Content > Image browser.

Image browser in admin menu

Structuring files with subfolders

Subfolders can be created within the Image browser to create structure and make finding images easier. To create a subfolder, right-click on the parent folder and select New Subfolder. Enter the name for the new folder and click OK.

Subfolders can be created under other subfolders for more specific structures.

Creating a new subfolder in the file browser

Folder settings

The settings button allows you to view the images in the selected folder by different filters. You can change from a list view to a thumbnail view, or order the files by Name, Type, Size, or Date modified.

Folder settings in the File browser

Uploading images

First select the subfolder you want to upload to by clicking on it. Then select the Upload option with the green, up-facing arrow. This will display a window to browse your computer so you can select the image you want to upload.

Select the image to upload and click the Open button. The image will be uploaded and appear in the folder of the Image browser.

There is a size limit of 20MB per file, although no limit on the total number of files.

One image, multiple uses

If the image you are uploading is intended to be used in multiple ways (eg. banner, news feed), upload only one image that is as large as its intended maximum use. The system then can crop and rescale accordingly for different purposes.

NOTE ALSO: Image file names should not have spaces or special characters in them like ' or ( ) as these are not valid url characters on the web and can prevent some browsers from opening those images. Best practice is to replace all spaces with hypens before uploading. e.g. "professor mat hemagical.jpg" becomes "professor-mat-hemagical.jpg"

 

Renaming image files

Once an image has been uploaded you can rename it via the Image browser. However, if the image is already being displayed on a page then the file path will likely break and need updating.

Right-click on an image and select Rename. Change the file name as required and click OK.

Renaming an image file via the Image browser

Moving images between subfolders

Images can be moved from one folder to another without having to re-upload them. Select the image you want to move, right-click on it and select Add to Clipboard.

Select the folder you want to move it to, right click on it and select Move files. The image will be moved to the new folder but the url will remain the same so it won't break on any pages displaying it.

Moving multiple images to another folder

Moving multiple images

Hold Control (on PC) or Command (on Mac) when clicking on the images you want to move. Then selecting Add to Clipboard will add them all at once.

Deleting images

To delete an image, right-click on it and select Delete. You will be prompted to confirm you want to delete that file so that images cannot be deleted by accident. Once an image is deleted it is gone permanently and cannot be recovered.

Deleting an image via the Image browser

Deleting multiple images

Hold Control (on PC) or Command (on Mac) when clicking on the images you want to delete. This will select multiple files at once which you can delete in a single action.

Downloading images

To save a copy of an image to your computer, right-click on the file and select Download.

Image URL

For the full URL of the image, right-click on the file and select Copy URL. Then press Ctrl+C to copy the address as it appears.

Deleting subfolders

To delete a subfolder, right-click on it and select Delete. Once a folder is deleted it is gone permanently and cannot be recovered.

You can only delete folders that are empty. If it contains any files or other folders you will not be able to delete it until you have either deleted or moved all of its contents. This guards against accidentally deleting a large number of files.

EXERCISE: Image browser

  1. Go to the admin menu under Content > Image browser and create a subfolder for your site using a category that will help you organise and find your images. Eg. events, news, about, people.
  2. Upload all the images (9) located on the Training Resources page. Place these images into the relevant folder(s)
  3. Move an image between folders.
  4. Move multiple images between folders.
  5. Delete Sample homepage banner 1 image.
    Site Coordinators Note: Once deleted upload Sample homepage banner 1 again as this will be required for Site Coordinator Training exercises.

NEXT: Adding & replacing Images

Links

Adding links

Drupal Theme: 
UQ Base Template
Learning Objectives: 

On this page, site editors will find the step-by-step instructions on how links can be added to text or images, link to pages on your website, documents on your site, external urls, an anchor on the page, or email addresses.

Adding links

  1. Highlight the text you want to link using the mouse, or for images, click on the image to select it and a box will appear around it.
  2. Click the link icon in the editor menu
    Link icon in editor menu
  3. Select the type of link you want in the dialog window that appears. See below for details on types of links.
    Dialog window showing link type options
  4. Click OK to apply the link.

Removing links

To remove an existing link:

  1. Click on the text or image that is linked
  2. Click the Remove Link icon in the editor menu
    Unlink icon in editor menu

Types of links

Follow the steps above to get to the link type dialog window.

Links to pages on your site

To link to a page on your site:

  1. Choose the 'Link to content on this site' option
  2. Start typing the name of the page/node in the field below. It will auto-complete the available matches for you
  3. Select the page/node you want to link to
  4. Click OK to insert the link

Please note: This is the best method for linking to other pages on your site. If you manually enter a friendly URL into the link, keep in mind that the friendly URL can change if there is a change to the title of the page you are linking to.

Links to documents on your site

To link to a document (such as a PDF or DOC) on your site:

  1. Choose the 'URL' option
  2. Select the Browse Server button to open the File Browser dialog window
  3. Select the file to link to, or upload a new file and then select it
  4. Click OK to insert the link

Links to external sites

To link to an external website:

  1. Choose the 'URL' option
  2. Type or paste in the full url to link to, including the http:// part
  3. Click OK to insert the link

Link to anchor in the text

This allows you to link to a section on the same page. You first need to create an anchor in that section in order to link to it:

Create an Anchor

  1. Place the cursor where you want the anchor to be; usually just before a section heading.
  2. Click the Anchor icon in the editor menu
  3. Type a name for the anchor. Anchor names cannot have any spaces in them and typically include one or more words that describe the section.
  4. Click OK to insert the anchor.

Now link to the anchor:

  1. Choose the 'Link to anchor in the text' option
  2. Select the anchor from the list of available anchors
  3. Click OK to insert the link

Links to email addresses

To link to an email address:

  1. Choose the 'E-mail' option
  2. Enter the email address in the E-Mail Address field
  3. Optionally you can add a prefilled subject line and/or body text
  4. Click OK to insert the link

EXERCISE: Adding links

  1. Navigate to the "About Us" webpage (NOTE: this page will be populated with content that was created in Activity 3: Add & Edit Content.
  2. Create a link to another content page.
  3. Create an anchor on your webpage.
  4. Create a link to the anchor you have just created.

NEXT: Adding tables

Menu

Session 1: Menu

Learning Objectives: 

In this session, you will learn how to add, modify and delete links, as well as, rearrange the order of links in the black menu.

Unit 1.1: Add links to the menu

  1. In the Admin menu go to Content
  2. Edit each page “About us”, “Contact us”, “News” and “Students”, and tick “Provide a menu link” at the bottom to add the page to the menu.
  3. The Menu Link Title will auto-populate from the page title. If you have a long page title, you may want to shorten it on the menu.
  4. Save

You should have these pages listed on your black menu. They may be in a different order, but we will reorder them in the next exercise.


Unit 1.2: Alter the menu

Reorder menu items

The above image shows that the order of menu items is not ideal. We will reorder what's there.

  1. Move your mouse to the top, right corner of the black menu
  2. Click on the cog button and select 'Edit menu'
  3. Rearrange the menu by dragging the items into the following order:

    - Home
    - About Us
    - Students
    - News
    - Contact Us

  4. Save


​Delete a menu item

  1. Select 'Edit menu' from the black menu cog icon again.
  2. Delete the “Students” menu item. This won't delete the page, just remove it from the menu.
  3. Save

Add a menu item

There are two ways to add pages to menus:

a. via the page edit screen
b. via the menu itself

  1. Edit the menu and click "Add link"
  2. Enter a title for the link and the url path.
    1. For pages on your site, enter the node ID rather than the friendly url so that the link doesn't break if the friendly url is changed. To get the node ID open another browser tab and go to Content. Search for your page and click edit then look for the node/number in the URL (eg. node/8)
    2. For pages on other sites, enter the full url path (e.g. http://www.google.com)
  3. ​Enter the url path or node ID in the path field
  4. Save

Submenus

When editing a menu, you may have already noticed that it is possible to drag items to an indented spot underneath other items. This will place the indented menu item onto a secondary menu.

Remember to save once you have reordered your items. The end result will look similar to this:

submenu

At the moment, the system does not support menu structures that go deeper than 2 levels in the blackmenu.


NEXT: Session 2 Homepage & Inception

Unpublish or delete pages

Unpublishing & Deleting pages

Learning Objectives: 

On this page, site editors will find the step-by-step instructions on how to delete pages. Please note it is preferred that you unpublish a page, rather than delete it, as any attached images on the deleted page will also be deleted.  As with Editing Content, you can find the page you want to unpublish/delete either by navigating to it and clicking the Edit tab; or by selecting Content from the admin menu to find it there.

NOTE FOR SITE COORDINATORS:
Upon completion of the Site Editor training please continue the advanced training available on the Site Coordinators Course.

Step 1: Edit the page you want to delete

Click on Content in the admin menu to see all of the nodes on the site. This will include Pages and any other content types the site might have. When you click to edit the page you want to delete, the Delete button will be at the bottom right of the edit screen.

Node delete on edit page

Alternatively, when you view the full list of site content, you can click Delete beside the node you want to delete.

Delete option on the Content list view

You will be prompted to confirm you want to delete so that it doesn't happen accidentally.

Bulk deletion

You can also check multiple content items and select the drop down box to perform a bulk action.

CAUTION: Deleting a node is permanent, there is no way to recover a node once it has been deleted.

EXERCISE: Deleting pages

  1. Navigate to Content in the admin menu and locate "news" and "student" webpages.
  2. Delete "news" and "student" webpages using bulk actions.
    Site Coordinators Note: Once deleted create "news" and "student" webpages again as this will be required for Site Coordinator Training exercises.

News

Session 3: News

Drupal Theme: 
UQ Base Template
Learning Objectives: 

In this session, you will learn how to install a new content type called "Article" and how to use it to build news on your website. You will learn how to create articles and display them in two ways; as a full listing on your news page and as a short list on your homepage.

Unit 3.1: Central things manager

In order to create news articles, we need to enable the content type “Article”:

  1. Go to Central Things Manager in the admin menu.
  2. Click on “Install Things” tab on the right.
  3. Check the “Article” box and click “Install Things” button at the bottom. This may take a minute or two to complete.

Unit 3.2: Create articles

Go to Content > Add Content, you can now add a content of type “Article” for your news items.

  1. Go Content > Add Content > Article.
  2. Give your article the title "News article #1", a short summary, an image and body text. NOTE: Training resourses are available on the training resources page of the Drupal website.
  3. Note, the published date is quite important as it is likely to be displayed in News listings. Have a go and change the published date - the date is found in the "publishing options".
  4. Create another 4 news articles. Name these articles "News article #2", "News article #3", "News article #4", "News article #5"
  5. Make one of your articles feature on the homepage banner.

Unit 3.3: Full news listing

We now can create a news page on the website that displays a full list of all the articles we have. There already exists a block that will display all the articles on our site, we will just need to display it in the right place – on our “News” page.

  1. Go to the admin menu Structure > Blocks
  2. Look for the “View: List of Articles: Articles: Title, Summary, Image” (towards the bottom of the listing) and select configure.
  3. Block title can be “<none>”
  4. Region settings will set where in the website layout we want the block to appear. There is a help guide which displays all the available regions. Select "Content Primary".
  5. Visibility settings will determine what pages/users we want this block to appear. Let’s limit this block to only appear on the “News” page.
    Select the option “Only the listed pages”.
    Enter in the text box below the URL of your news page eg. node/15
  6. Save block.


  1. Navigate to your news page, the list of articles should appear on your page.


Unit 3.4: Display latest news

Let’s now display the 3 most recent news articles on the homepage.

  1. Navigate to the homepage.
  2. In a region > Add Element > View
  3. Select "(List of Articles) Articles: Title, Image"
  4. Open Custom View Options
  5. In Custom header, type "Latest news" and set it to H3.
  6. In Custom footer, type "See more news" and link it to your news page.
  7. Set the max number of items to 3.
  8. Click Preview. Notice in the preview that there's a pager at the bottom of the listing. 
  9. Set Pager type to "Fixed number of items (no pager)".
  10. Click Preview. The pager should be gone.
  11. Add view. You should see your new block appearing like below:

    NEXT: Final steps