Special Features available in Cascade

1. Before creating a Staff Listing page, you must have a Staff Listing block created.  We recommend creating a copy of the existing block in the block folder (_cms/blocks/xhtml) for each staff listing page.  See "Copying Blocks" on Blocks for more information.
2. Click "Edit" for the staff listing block.  
3. Fill out the required information for each staff member such as Name, Phone, Position, and upload a photo. Click the ellipses next to the Preview Draft and then click Submit.
4. You now have the information needed to create the page. 
5. Click Add Content
6. Click Page
7. Click Staff Listing Page.
8. Find the section on the page called Staff Listing Information.  Click the arrow to open the section.  Leave Display set as Yes.  Add the new Staff Listing Block that you created in steps 1 and 2.
9. Publish the page you created.
10. Note: When updating the Staff listing block, you will need to republish the page that uses that block.

1. Locate the slideshow block in _cms/blocks/xhtml titled slides. 
2. Right click and choose Edit.
3. Click on "choose a slide image" to select your slide. You can also link the slide to a page in Cascade or a external site.
4. Select Caption placement (left, centre, right). Provide a caption.
5. To add another slide, click the green + button. Repeat steps 3 and 4.
6. To delete a slide, click the red x button.
7. Click the ellipses next to Preview Draft and then click Submit.
8. You can now go to the index page for the site.
9. Click Edit.
10. Find the section titled Slideshow Information and click Choose Block.
11. Find the block you previously edited. Click Choose.
    
12. Make sure your display is set to Yes and then click the ellipses next to Preview Draft and then click Submit.
13. Your slideshow should now be displayed.

Slideshow Tip #1: Ensure that you add an alt tag to each photo in the slideshow to make the slideshow accessible.

Important Note: in order to effectively utilize the xhtml accordion block, please contact WTS to set it up for you.

How to set up an accordion:

1. The accordion listing block is found in _cms/blocks/xhtml. For multiple accordions you should make a copy of the block and name it accordingly.
2. Click Edit.  You can fill in the Title of Accordion and then Contents. Once you are statisfed, click the ellipses next to the Preview Draft and then click Submit.
3. Click Add Content
4. Click Page
5. Click Content page with accordions
6. Once you have filled in the title and any other content you wish on the page, go to Accordion Listing Information section (below Basic Page Content) and choose the accordion listing block you edited in step one and two.
7. Click the ellipses next to the Preview Draft and then click Submit.  You should then be able to see the accordion.

1. Choose the Bullet list icon to the right of Formats in the first row of icons
2. Because of the Western design CSS, you must also choose Formats in order to style the bullets on your page.  Click Format on the top menu and then select Formats - Custom - squarelist.
3. Begin typing in your list items.
4. Click Submit. The Bullet list now has the square styling, which is the standard for bullet lists when using the Western template.  

1. Choose the Bullet list icon to the right of Formats in the first row of icons.
2. Because of the Western design CSS, you must also choose Formats in order to style the bullets on your page. Click the Format option on the top menu and then select Formats - Custom - arrow-list.
3. Begin typing in your list items.
4. Click Submit. The bullets are now arrows.  

1. Choose the Numbered list icon to the right of Formats in the first row of icons:
2. Because of the Western design CSS, you must also choose Formats in order to style the bullets on your page. Click the Format option on the top menu and then select Formats - Custom - numberedlist.
3. Begin typing in your list items.
4. Click Submit. The numbers for the list now are placed correctly within the margins of the content.

1. Copy the url of the xml Calendar feed for your unit. To do so:

• Go to the Event Calendar homepage of your unit (e.g. http://www.events.westernu.ca/events/your-unit/)
• Locate and click on the RSS feed button next to the title of the calendar.
• Copy the URL of the RSS feed.

2. Once you have the url, create a Jira ticket in the Web project requesting a block and format be created for this feed.  

You need to indicate how many events you want to appear on the page as well as where you want the feed to go. You have 4 choices:

• in the centre of your index page in the left column
• in the centre of your index page in the right column
• in the centre of your index page full column width
• in the right sidebar of your index page

If you require help creating this Jira ticket, please see Get More Help.

3. WTS will create the block and format and put them in the appropriate place on your page.  Once the page has been set up you will need to publish it on a daily basis to ensure that your calendar feed stays current.

Because of AODA/WCAG 2.0 guidelines, you must not use tables to format your information, unless the information is tabular data.  For more information about tables and accessibility, visit WebAIM's page on creating Accessible Tables.

How to create tables: 

1. In the Edit view of the page you wish to add a table, click the Fullscreen button.
   
2. Then click the Table
3. Insert table and then input the amount of rows and columns you want (up to 10x10).
4. Click Table Properties.  Enter the width and height of your table along with other features such as table caption, border, alignment, etc.
5. Select Table caption if you want to title your table.
6. Click Ok.
7. After you have created your title, then you can create border if you so wish.  With your cursor in a cell of your table, click the table button on the toolbar then enter a value in the Border field.
8. Click the Advanced tab.
9. Select a colour for your border if you are using this feature.
10. Click Update.

The dividing line is defaulted to span the width of its containing the div.  It is useful to divide large text into sections.

1. Begin by clicking Edit on the page you wish to add the dividing line.
2. Find the section of the HTML toolbar where you want the dividing line to be.
3. Once you have clicked where you want the line to be, click Insert - Horizontal Line.
4. If you want to adjust the width of the line, click the source code and add <hr style="width:50%"> to the <hr> code. Increase and decrease the inline style as needed.

The 2-column layout can be used to run the content of your page in two distinct columns. Using this layout will shorten the length of your page and will display content in a visually appealing format.

The content placed in the "left column" and "right column" will appear in the left and right sides of the column accordingly. The sections can be treated as a regular content area (text, images, links, etc. can all be placed).

1. Begin by clicking Edit on the page.
2. Ensure that you already have the text prepared. Select the text you want and click Formats - Custom - left2column.  Then select the other section of text and click Formats - Custom - right2column.
3. Click the ellipses next to the Preview Draft and then click Submit to see the sections of the page divided into two columns.

 The three column layout can be used to run the content of your page in three columns. Using the three columns provides an option of structuring the content more efficiently. 

1. Begin by clicking Edit on the page.
2. Ensure that the text you wish to divide is already prepared.  Select the text you want and click Formats - Custom - left-3column.  Then select the other section of text and click Formats - Custom - center-3column and Formats - Custom - right-3column.
3. Click the ellipses next to the Preview Draft and then click Submit to see the text divided into three columns.

The grey box class is an effective way of drawing user attention to a specific message within the body of text, sidebar, or a left nav option. To create a grey box: 

1. Click Edit on the page and select the text that you wish to appear in the grey box.
2. Click Format - Custom - grey-box.
3. Click the ellipses next to the Preview Draft and then click Submit to see the text.

Ideally this is placed in a right sidebar or a left-nav optional block. 

1. Begin by clicking /_cms/blocks/xhtml/left nav optional  or /_cms/blocks/xhtml/right sidebar
2. Write an optional title to appear above the text before selecting Formats - Custom - grey-box
3.  In the Source Code add the code <script src="js/random-box.js" type="text/javascript" language "javascript"></script> between your title and the final </div>
   
   
4. You can find and edit the script in your included js folder on your site. This way you only need to edit it on one page, and the changes will be made to each page that you are using the random-box script.  Your code should look something like this:
   <script>
   var item = new Array ();
   item[0] = "<p>This guy said \"some stuff\"?</p>";
   item[1] = "<p><img src='img/btn/right-banner/Web-Banner-Achieve1.jpg' alt='Help Students Achieve' width='220px' height='400px' class='image' /></p>";
   item[2] = "Western has twelve Faculties and Schools and three Affiliated University Colleges?";
   item[3] = "<p><img src='img/btn/right-banner/Web-Banner-Achieve1.jpg' alt='Help Students Achieve' width='220px' height='400px' class='image' /></p>";
   item[4] = "The University of <a href='www.uwo.com'>Western Ontario</a> is one of the oldest and most beautiful universities in Canada?";
   item[5] = "that Western has five Rhodes Scholars in the past nine years, as well as four Goldman Sachs award winners in the past four years?";
   
   
   var i = Math.floor(item.length*Math.random())
   document.write(item[i]);
   </script>
5. All you need to do is edit the items. You can add as many as you wish, just remember to add the numbers in the square brakets. Also, use the proper format. Use single quotes in any place inside the initial double quotes or it breaks the Script.
   EXAMPLE:
   item[5] = "Western University is getting a new webpage design, check it out <a href='www.uwestern.ca'>here</a>"
   However, if for some reason you need double quotes, for instance you want to put in random quotes by past students, you need to use an escape character, so instead of:
   item[4] = "This guy said "some stuff"";
   it would have to be
   item[4] = "This guy said \"some stuff\"";
6.  You then can insert the block into the page or confirguation sets.  See "Edit a left nav opt block or right sidebar block" on the Edit page for more information.

This module allows users to rotate through a set of similarly sized images with or without descriptions, three images at a time. The triple image carousel can be used in the main content area and is most effective for presenting a gallery of news, faculty, staff, etc. All images in the banner should be the same size for visual balance. 

Please go to https://wts.uwo.ca/cascade/examples_of_content/triple_image_slider/index.html for more information on how to set this up on your site.

Good to place in sidebars or bottom social media areas, this module allows users to rotate through a set of similarysized images with or without text descriptions, one image at a time. The images and descriptions should belong to the same information category (i.e. News, Reports, Profiles, etc.).  Ensure that you have already uploaded the images you wish to use before you begin to edit.

This code works best as either in the left nav otpional or social media blocks.

For more information on how to set this up on your site, please go to https://wts.uwo.ca/cascade/examples_of_content/single_image_slider/index.html.

The image gallery presents images in a slideshow-like sequence in an overlay, without sending users to other pages. When users click on one image, it expands full-screen and users can click through or use a keyboard to navigate through the rest of the gallery images. This gallery is fully-responsive, which means that the images will scale up or down gracefully and swipe navigation will be available when viewed on mobile devices.

For more information on how to set this up on your site, please go to https://wts.uwo.ca/cascade/examples_of_content/image_gallery/index.html.

Flip cards have an image on the front of the card and more information on the back. 

For more information on how to set this up on your site, please go to https://wts.uwo.ca/cascade/examples_of_content/flip_cards/index.html

1. Edit the page that you would like to change the OG image (default is Western crest).
2. Scroll to the bottom to the page to the 3rd region from the bottom, called "Custom OG Tags".
3. Select if this is a News Article, and choose the new OG image to upload (the dimensions need to be 1200x630px) Submit the page edit and Publish the page.

Note: if you do not see the Custom OG Tags on your page, please create a Service Desk ticket at https://westernu.atlassian.net/servicedesk/customer/portal/2/group/13/create/33 and WTS can add the functionality to your site in Cascade.