Website Documentation & Style Guide

This page provides information to Faculty, staff and students who are editing their Profile pages, or other pages on the website. It also includes examples of content formatting used in the Department website “theme”.  It’s also a location for theme documentation you may want to refer to in the future.

Editing your “People” Profile Page

All faculty and graduate students have been given WordPress user accounts on the website. All faculty have “People” pages created for them by the website administrator. You own and can edit these pages, in an easy-to-use form. Pay special attention to the following sections, which contain content which is programmed to populate other pages on the site:

Top field “Enter Title Here”: Make sure you enter your name in this field, which gives a title to your profile page, and appears on the main “People” listing.

Research Interests: Please format these as an “Unordered” (bullet) list. The first 3 listed populate your “research interests” on the main Faculty/Grad student listing page.

Photograph Upload: You can add your profile image by clicking on Add Image button. This will take you to a screen where you can drag and drop a photo file which will be added to the site Media Library, and be selected for your page. Photo files display best if they are cropped to about 100 by 125 pixels.

Note to grad students

After submitting your profile page it must be approved by an administrator  before it appears on the public site.

The following sections apply to faculty only

Call for Students: If interested in supervising grad students. This populates the section in the expanded drop-down for each professor on the main Faculty listing page.

Featured Citation for ‘Selected Publications’ Page: In addition to the section for selected publications, a single, recent publication should be listed here, which populates the “featured citation” page under “Research”; see Selected Publications Page here.

PLEASE REVIEW ALL OTHER SECTIONS AS WELL: Contact information, Personal website, Selected publications, Teaching this year… to make sure they are current and correct.

For Faculty who have Research Groups or Labs – all Campuses

Please review the listings and links on the Research Groups and Labs page, here. If the information about your lab, or the links within it are not correct, please inform Mariange in the main office who will edit this page. If you wish to create pages for the lab within the new website, such as a Featured Research Project, again contact Mariange who will facilitate this.

For Faculty who take part in Research Clusters – all Campuses

Please review the listings and links on the Research Clusters page, here.  If the information is incorrect, please inform Mariange. If you are interested in taking responsibility for one of the Research Clusters pages, or creating pages for a Featured Research Project, again Mariange will facilitate this.

Formatting and Page construction information

Headings – Examples at each of 6 levels

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

 

Call-Outs

Call-outs are created with three elements:

  • The “shortcode” that wraps around the content and acts as a trigger for the CSS code
  • The main content – likely a blockquote or an image
  • An optional citation

A Text-Based Call-Out:

  1. Place your cursor in the content editing area where you want the call-out to appear.
  2. type [ callout ] to being the callout.
  3. Press Enter to go to a new line. Type your quoted text, beginning and ending with quotation marks.
  4. Select your quote and press the Blockquote icon (the large single-quote icon near the end of the first row of editing icons).
  5. Press Enter to go to a new line. If you want to attribute the quote to someone, type a dash, leave a space and then type the person’s name.
  6. Select your citation and press the Citation icon (the small double-quotes icon near the end of the first row of editing icons).

Here it is in action:

Department of Geography: best clients ever, man.

– Mike

 

 

 

 


How to Create a Basic Table

  • Prepare your table in Microsoft Excel or another spreadsheet-specific program.
  • Create a new page in the website or edit an existing page where you’ll be adding the table in a moment. Keep that open in your browser.
  • In your spreadsheet software select only the rows and columns that will make up your table (no extra empty cells).
  • Press Ctrl+C (or Command+C on a Mac) to copy the table data and Ctrl+V (or Command+V) to paste it into the editing window of the website. You use this method to copy *only* the table content and not and extra formatting code that will override the website’s theme or cause rendering bugs.
  • WordPress does not carry-over line/row spacing within individual cells from Excel.  For example, if you have one cell containing “Course description” and want to add an extra line space between that and the “Prerequisites” for that course both in the same cell, doing so on Excel does not transfer over when you paste this content in WordPress.  WordPress will eliminate the spacing and your content will be lumped together.  There are two options that can be done to rectify this issue: 1) Adjust the spacing separately or add bulletpoints in the WordPress table itself, OR 2) In the Excel table, use a hyphen to separate out points.
  • Press Publish (or Update it the page already exists) to save your changes.

How to Create an Accordion Table

  • Create a table with however many rows and columns as you require (remember that this all has to fit into a browser window though and not everyone has a widescreen display).
  • The very first row of the table must contain content that will only serve as headings for the content below.
  • All subsequent content in table should be treated as pairs. The first row in each pair will always be displayed and all the first rows will be what the user sees as the table’s default appearance. Whenever a user clicks on a first row its respective second row will then appear (the code will handle all this interactive behaviour if you structure your content in pairs and start with a row of heading information as mentioned above).
  • Copy and paste your table into the website via the previous set of instructions (“How to Create a Basic Table”).
  • Single-click anywhere in your table once it’s in the content editing area in the website.
  • Immediately below the content editing area is a “Path:” heading. Click the “table” link there. This will select the entire table and nothing else.
  • In the “Styles” drop-down menu  select “accordion.”
  • Publish or Update the page to save your changes.

How to Update Course Timetables:

To hide a course:

  • Log in and edit the timetable page
  • You’ll see the entire table in a fully expanded view. This is expected and the accordion functionality won’t take place on this editing screen.
  • For a course you want to hide, single-click anywhere on its first row (out of the pair of rows for each course).
  • Click the “Table row properties” icon in the menu bar above the content editing area (it’s on the bottom row, second of the table-specific icons).
  • In the pop-up window that appears, look for the “Class” heading and the drop-down menu to its right.
  • Select the “not-offered-hidden” option from the drop-down menu and click the “Update” button.
  • The editor will indicate that the course is now hidden. This perspective is for your benefit so you don’t lose track of a hidden course.
  • Update the page to save your changes. End-users will no longer see this course.

To “grey out” a course:

  • Log in and edit the timetable page
  • You’ll see the entire table in a fully expanded view. This is expected and the accordion functionality won’t take place on this editing screen.
  • For a course you want to grey out (with a line through it), single-click anywhere on its first row (out of the pair of rows for each course).
  • Make sure tr is selected by checking what is selected in the bottom left corner of the editor, above the Word Count, you want table » tbody » tr Click tr in the selection if there is anything after tr. Click the screenshot below to view in full size.
  • Click the “Format” icon in the menu bar above the content editing area, select “Formats” and choose .not-offered-greyed. Click the screenshot below to view in full size.
  • The editor will indicate that the course is now hidden, the text in the row will be have the strikethrough. This perspective is for your benefit so you don’t lose track of a hidden course.
  • Update the page to save your changes. End-users will now see this course as greyed out.

To show a course:

  • Repeat the steps above above (single-click the row, “table row properties”, “Class” drop-down menu).
  • Select the “– Not Set –” option and click the “Update” button.
  • You’ll see the course return to its default appearance in the editing screen.
  • Update the page to save your changes. End users will see the course again.

To Copy and Paste an Entire Table from One Webpage to Another:

  • In the edit window, click anywhere in the while space outside of the table but still within the edit window.
  • Right-click, then choose “Select All”
  • Ctrl V (Paste) into new page

To Delete Entire Table Most Efficiently:

  • Click anywhere in the table you want to delete and click on the icon in the above toolbar immediately to the Left of the “Styles” drop-down menu, and click to delete entire table in one step.

 


Landing Page Captions

Click the “Text” tab in the editor and view or copy the following link example for landing page captions.
Link text and plaintext.