Communications

Instructions

Floating an image left or right

Floating image - sample image 01 - professor speaking with student

We attach a class to the img tag. Options are "image-left", "image-right", and "image-center".

<img class="image-right" alt="what-is-the-image-of" src="https://www.uwo.ca/img/academics/academics-dept.png" width="200px" />

Clearing floats

Floating content will sometimes affect the content below it. Place the following line of code in between floating content and content below to erase all previous floats and return back to normal flow. For example, if you want an image to appear on its own line with a paragraph below it, as seen above.

<div class="clear"></div>

Wrap text around an image

You can wrap text around an image by adding an "image-right" or "image-left" class to the image. Example:

<p> ...

<img class="image-right" alt="what-is-the-image-of" src="https://www.uwo.ca/img/academics/academics-dept.png" width="200px" />

......more paragraph.... </p>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed odio at lorem facilisis tempor quis eget felis. Etiam eget lorem nec eros pellentesque scelerisque. Aenean ut elementum augue. Cras eu arcu sapien. Curabitur eget enim lacus. Nullam lobortis nisi at magna congue mattis. Wrapping text around an image - sample image 01 - image of professor speaking with student ......more paragraph.... Aenean tristique, mauris et viverra iaculis, dolor sapien lacinia tortor, porta consequat ante dolor id turpis. Aenean diam sapien, rutrum id lobortis vitae, pretium vel enim. Praesent consectetur sodales est ac dapibus. Maecenas bibendum aliquet odio vel facilisis. Aliquam nisi felis, volutpat a vehicula eget, egestas eget lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In blandit justo quis massa gravida ac convallis lectus consequat.


Place text beside several images

If you would like to have several images beside a long section of paragraphs you will need to use a list and float the list to the left or right side.

<p>

<ul style="float: right; display: block;">
<li><img class="image-right" alt="what-is-the-image-of" src="https://www.uwo.ca/img/academics/academics-dept.png" width="200px" /></li>
<li> <img class="image-right" alt="what-is-the-image-of" src="https://www.uwo.ca/img/academics/academics-dept.png" width="200px" /></li>
<li><img class="image-right" alt="what-is-the-image-of" src="https://www.uwo.ca/img/academics/academics-dept.png" width="200px" /></li>
</ul>

....</p>

 

  • Sample image 01 - image of professor speaking with student
  • Sample image 02 - image of professor speaking with student
  • Sample image 03 - image of professor speaking with student
Starting of your paragraph... Donec purus odio, ultrices vel eleifend non, rutrum pharetra quam. Vivamus metus ipsum, consequat mollis consectetur a, scelerisque nec quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pharetra magna velit. ......more paragraph.... Mauris euismod leo at massa rutrum scelerisque. Donec nec erat ac lectus cursus convallis. Etiam sagittis eleifend luctus. Sed imperdiet porta ornare. Sed porta vestibulum fringilla. Nullam at sem ut ipsum rutrum accumsan. Maecenas congue diam ac nulla aliquam scelerisque. Nunc nec sapien eget quam tempus luctus. Sed vulputate risus quis lacus vehicula sed semper nisi adipiscing. Ut consectetur faucibus lorem, nec laoreet nibh blandit nec. Integer mattis odio ante, a accumsan erat. ......more paragraph.... Nunc a diam nisi, sed sodales quam. Suspendisse tincidunt velit vitae ligula facilisis et fringilla sapien hendrerit. In porttitor risus ut ligula convallis quis volutpat dui facilisis. Nullam sit amet nulla sit amet orci luctus consequat. Phasellus quis justo a arcu consequat lacinia placerat viverra augue. Sed vel mi quis lectus feugiat faucibus non eget mi. Donec posuere ornare felis, id ultrices nisi suscipit sollicitudin. Quisque congue odio vel sem scelerisque laoreet. Etiam elit metus, placerat ac pellentesque ut, posuere quis eros.

 

New paragraph tag...Sed ante magna, pellentesque vitae eleifend id, cursus id enim. Pellentesque pharetra tortor bibendum nunc vestibulum id interdum felis tincidunt. Nam posuere adipiscing purus at iaculis. Fusce porttitor, libero ac egestas laoreet, nisl libero fringilla neque, nec convallis nulla arcu quis nibh. Fusce quis leo tellus. Proin pellentesque rhoncus elementum. In non mollis sem. Phasellus ullamcorper dignissim mauris a blandit. Fusce feugiat, turpis non porta placerat, sapien neque adipiscing nunc, sit amet rhoncus tellus turpis mattis quam. Quisque ac nunc a elit blandit porta. Nulla eget enim at tortor ultrices viverra. Donec aliquet congue erat at pellentesque. In justo velit, malesuada ultrices suscipit quis, pretium vitae augue. Duis pulvinar purus at mauris placerat convallis. Aliquam nisi metus, facilisis at pharetra ac, varius auctor mauris.


Floating an image left or right with a caption and/or photo credit

You can place captions and photo credits on top of your image; however please note that captions are unavailable for images with a class of "image-center".

<div class="image-right">
<img alt="what-is-the-image-of" src="https://www.uwo.ca/img/academics/academics-dept.png" width="200px" />
<div class="caption-wrapper">
<p class="credit">Photo taken by: John Smith</p>
<p class="photodescription">Try not to write more than a two line description depending on the size. Or it will end up covering too much of the photo like this</p>
</div>
</div>


Image with huge caption - image of professor speaking with student

Photo taken by: John Smith

Try not to write more than a two line description depending on the size. Or it will end up covering too much of the photo like this


A second limition when using these captions is that a big paragraph will not wrap around the captioned image unless the image is placed at the top of the paragraph. For example:


Starting of your paragraph ... Donec et euismod augue. Mauris sed justo eget sapien tempor ultrices quis volutpat risus. Curabitur nec risus nulla, quis mollis dui. Nullam dapibus ante eget arcu pulvinar vel dignissim massa auctor. Praesent venenatis posuere ornare.

Image with normal sized caption - image of professor speaking with student

Photo taken by: John Smith

This is better for a caption.

......more paragraph without creating a new paragraph tag ... Quisque ligula est, dignissim vitae fermentum sit amet, placerat nec metus. Sed faucibus, leo eget ultrices mattis, quam augue tincidunt ipsum, in placerat purus quam vitae erat. Curabitur at nisi libero, eget ultricies lectus. Sed et venenatis neque. Ut fringilla laoreet lectus sed sollicitudin. Mauris quis dui ut nunc laoreet condimentum eget a ante.

 


Pop-up image with caption

This option is ideal if you want to showcase a photo that is perhaps too large to fit neatly into your page layout. Make sure the anchor tag contains rel="facebox" and that the href= is the same as the div id=. If you wish to use multiple image pop-ups on a single page, make sure the a href and div id are unique to each pop-up, but the rel="facebok" always stays the same. Also, always include a caption.

<a href="#brain" rel="facebox">Click here!</a>
<div id="brain" style="display:none;">
<img class="image" alt="Brainiac" src="https://www.uwo.ca/img/academics/brain.jpg"/>
<p>Here is a caption with a <a href="www.google.com">link</a></p>
</div>


Use this link to test the widget

Dividing line

The following code creates a dividing line. It is defaulted to span the width of its containing div. You can adjust the width with inline styling if you want.

<hr>


<hr style="width:50%;">


Two columns

<div class="left-2column">
<p> ... </p>
</div>
<div class="right-2column">
<p> ... </p>
</div>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut augue odio. Aliquam aliquam dolor at ante viverra in bibendum nisl interdum. Vivamus at erat sit amet ipsum porttitor consequat. Fusce commodo tincidunt convallis. Nulla rhoncus, dui sit amet dictum fermentum, justo leo ornare lectus, sed convallis augue nunc id dui. Morbi ac elit et turpis dapibus auctor suscipit eu erat.

Integer sapien nunc, auctor et commodo at, commodo pellentesque nibh. Aenean dictum placerat fermentum. Quisque tortor nisl, vehicula egestas fermentum in, consectetur non leo. Etiam pulvinar imperdiet mattis. Quisque pretium mattis lorem, et commodo nisi semper eu. Proin eu quam odio, in rhoncus velit. Ut pretium odio vel sapien laoreet facilisis.


Three columns

<div class="left-3column">
<p> ... </p>
</div>
<div class="center-3column">
<p> ... </p>
</div>
<div class="right-3column">
<p> ... </p>
</div>


In ullamcorper consequat enim vestibulum facilisis. Nulla facilisis elit ac nibh pulvinar tristique. Nullam sagittis mauris eu tellus varius a varius elit porta. Fusce metus metus, lacinia quis faucibus at, dapibus ac arcu. Etiam metus tellus, fringilla nec sollicitudin nec, posuere id urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut augue odio. Aliquam aliquam dolor at ante viverra in bibendum nisl interdum. Vivamus at erat sit amet ipsum porttitor consequat. Fusce commodo tincidunt convallis. Nulla rhoncus, dui sit amet dictum fermentum, justo leo ornare lectus, sed convallis augue nunc id dui.

Integer sapien nunc, auctor et commodo at, commodo pellentesque nibh. Aenean dictum placerat fermentum. Quisque tortor nisl, vehicula egestas fermentum in, consectetur non leo. Etiam pulvinar imperdiet mattis. Quisque pretium mattis lorem, et commodo nisi semper eu.


Lists

<p>Unordered list, class of squarelist</p>
<ul class="squarelist">
<li>this is first level
<ul>
<li>this is second level</li>
</ul>
</li>
<li>back to first level</li>
</ul>
<p>Ordered list, class of numberedlist</p>
<ol class="numberedlist">
<li>first level<ol>
<li>second level</li>
</ol></li>
<li>first level</li>
</ol>


Unordered list, class of squarelist

  • this is first level
    • this is second level
  • back to first level

Order list, class of numberedlist

  1. first level
    1. second level
  2. first level

Icon styled lists

<ul class="squarelist pdf">
<li>item 1</li>
<li>item 2</li>
</ul>
<ul class="squarelist lock">
<li>item 1</li>
<li>item 2</li>
</ul>
<ul class="squarelist word">
<li>item 1</li>
<li>item 2</li>
</ul>
<ul class="squarelist movie">
<li>item 1</li>
<li>item 2</li>
</ul>

<ul class="arrow-list">
<li>look</li>
<li>at</li>
<li>this list</li>
</ul>
  • item 1
  • item 2
  • item 1
  • item 2
  • item 1
  • item 2
  • item 1
  • item 2
  • look
  • at
  • this list

Input lists

<ul class="inputlist">
<li><input type="radio" name="test"/>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>
</li>
<li><input type="checkbox" />
<p>Provide a good mix of investment income and growth on the accumulated assets </p>
</li>
<li><input type="radio" name="test"/>
<p>Provide some investment income and mostly long-term growth on the accumulated assetsthrough investments with fluctuating returns</p>
</li>
</ul>



Title bars

By default 100% of the parent div, unless adjusted like in the purple example.

<h3 class="title-bar-grey">Everything you write in here is forced to uppercase</h3>
<h3 class="title-bar-purple" style="width: 75%;">styled inline to have a width of 75% instead of the default 100%</h3>
<h3 class="sidebar-title">Underlined Title, case-sensitive</h3>


Everything you write in here is forced to uppercase

styled inline to have a width of 75% instead of the default 100%


Blue box

100% width of the parent container. Looks best in a right sidebar or in the left-nav optional block.

<p><a title="blue-box example" target="_blank" class="blue-box" href="http://www.google.com">This is a link to google</a></p>

This is a link to google


Grey box

To be placed in the right sidebar or left-nav optional.

<div class="grey-box">
<h3>Did you know???</h3>
<p>This is where you could place random facts or pictures representing your faculty.</p>
<ul style="list-style-type:square;">
<li>Maybe you would</li>
<li>prefer a list</li>
</ul>
</div>


Did you know???

This is where you could place random facts or pictures representing your faculty.

  • Maybe you would
  • prefer a list

Table with borders

<table>
<tbody>
<tr>
<th>Group</th>
<th>
<p>PART 1<br />Understanding Leadership</p>
</th>
<th>
<p>PART 2<br />Leadership Effectiveness Training (L.E.T.)</p>
</th>
<th>
<p>PART 3<br />1/2 Day Refresher</p>
</th>
<th>
<p>PART 4<br />1 Year Follow-up </p>
</th>
</tr>
<tr>
<td>
<p>FL40<br />FULL</p>
</td>
<td>
<p>Jan 26, 27, Feb 2, 2012<br />8:30am - 4:30pm</p>
</td>
<td>
<p>March 2, 8 & 9, 2012<br />8:30am - 4:30pm </p>
</td>
<td>
<p>May 17, 2012<br />8:30am - 12:00pm</p>
</td>
<td>
<p>Jan 25, 2013<br />9:00am - 4:00pm</p>
</td>
</tr>
<tr>
<td>
<p>FL41<br />FULL</p>
</td>
<td>
<p>May 1, 10, 11, 2012<br />8:30am - 4:30pm</p>
</td>
<td>
<p>June 14, 15 & 21, 2012<br />8:30am - 4:30pm </p>
</td>
<td>
<p>Sept 29, 2012<br />8:30am - 12:00pm</p>
</td>
<td>
<p>May 10, 2013<br />9:00am - 4:00pm</p>
</td>
</tr>
<tr>
<td>
<p>FL42<br />FULL</p>
</td>
<td>
<p>Nov 5, 7, 13, 2012<br />8:30am - 4:30pm</p>
</td>
<td>
<p>June 14, 15 & 21, 2012<br />8:30am - 4:30pm </p>
</td>
<td>
<p>Mar 5, 2013<br />8:30am - 12:00pm</p>
</td>
<td>
<p>Nov 5, 2013<br />9:00am - 4:00pm</p>
</td>
</tr>
</tbody>
</table>


Group

PART 1
Understanding Leadership

PART 2
Leadership Effectiveness Training (L.E.T.)

PART 3
1/2 Day Refresher

PART 4
1 Year Follow-up

FL40
FULL

Jan 26, 27, Feb 2, 2012
8:30am - 4:30pm

March 2, 8 & 9, 2012
8:30am - 4:30pm

May 17, 2012
8:30am - 12:00pm

Jan 25, 2013
9:00am - 4:00pm

FL41
FULL

May 1, 10, 11, 2012
8:30am - 4:30pm

June 14, 15 & 21, 2012
8:30am - 4:30pm

Sept 29, 2012
8:30am - 12:00pm

May 10, 2013
9:00am - 4:00pm

FL42
FULL

Nov 5, 7, 13, 2012
8:30am - 4:30pm

June 14, 15 & 21, 2012
8:30am - 4:30pm

Mar 5, 2013
8:30am - 12:00pm

Nov 5, 2013
9:00am - 4:00pm

Table without borders

Same as above code but add the class of no-borders to the table element like such:
<table class="no-borders">

Group

PART 1
Understanding Leadership

PART 2
Leadership Effectiveness Training (L.E.T.)

PART 3
1/2 Day Refresher

PART 4
1 Year Follow-up

FL40
FULL

Jan 26, 27, Feb 2, 2012
8:30am - 4:30pm

March 2, 8 & 9, 2012
8:30am - 4:30pm

May 17, 2012
8:30am - 12:00pm

Jan 25, 2013
9:00am - 4:00pm

FL41
FULL

May 1, 10, 11, 2012
8:30am - 4:30pm

June 14, 15 & 21, 2012
8:30am - 4:30pm

Sept 29, 2012
8:30am - 12:00pm

May 10, 2013
9:00am - 4:00pm

FL42
FULL

Nov 5, 7, 13, 2012
8:30am - 4:30pm

June 14, 15 & 21, 2012
8:30am - 4:30pm

Mar 5, 2013
8:30am - 12:00pm

Nov 5, 2013
9:00am - 4:00pm


Forms

Make sure the input name="" is the same as the label for="". Include required in the class="" if you want that field to be required for form submission. The fields class is what styles the inputs. The datepicker, addresspicker, and timepicker all rely on jQuery scripts, do not change anything with regards to these three fields. The form action="" needs to be the path to the .txt file you have created and placed in one of your site's folders. That file is what will get emailed out when the form is submitted. These files rely on being transcribed through your cgi-bin. If you are not sure what your path would be, contact ITS. The form method needs to be post and the form id needs to be Form in order for the form validation to work. The value="" in the form submit is the url users will be directed to after they have successful submitted the form. Enter the full path of the page you are sending people to after completing the form.

<form action="https://www.uwo.ca/cgi-bin/cgiemail/pvp/cascade/strategic_planning/strategy.txt" method="post" class="formcontrol" id="Form">
<p><span class="red">*</span> = required fields</p>
<ul>
<li>
<label for="name">Event organizer (Name and Contact):</label><span class="red">*</span>
</li>
<li>
<input name="name" type="text" size="60" class="fields required" maxlength="100" />
</li>
<li>
<label for="email">Email:</label><span class="red">*</span>
</li>
<li>
<input name="email" type="email" class="fields required"/>
</li>
<li>
<label for="event-title">Name of Event:</label><span class="red">*</span>
</li>
<li>
<input name="event-title" type="text" size="60" maxlength="100" class="fields required" />
</li>
<li>
<label for="datepicker">Event Date:</label><span class="red">*</span>
</li>
<li>
<input name="datepicker" id="datepicker" type="text" class="fields"/>
</li>
<li>
<label for="addresspicker">Venue Address:</label><span class="red">*</span>
</li>
<li>
<input id="addresspicker" name="addresspicker" type="text" value="" class="fields required"/>
</li>
<li>
<label for="timepicker">President's Arrival Time:</label><span class="red">*</span>
</li>
<li>
<input id="timepicker" name="timepicker" value="" type="text" class="fields required" />
</li>
<li>
<label for="combobox">Expected Length of Remarks or Speech</label><span class="red">*</span>
</li>
<li>
<select id="combobox" name="combobox" class="fields">
<option value="">Select one...</option>
<option value="30minutes">30 minutes</option>
<option value="1hour">1 hour</option>
<option value="1hour30minutes">1 hour 30 minutes</option>
<option value="2hours">2 hours</option>
</select>
</li>
<li>
<label for="other">Other important background information about event that should be mentioned:</label><span class="red">*</span>
</li>
<li>
<textarea name="other" cols="80" rows="7" class="fields required" ></textarea>
</li>
<li>
<input name="submit" type="submit" class="fields" value="submit" />
<input name="success" value="http://president.uwo.ca/strategic_planning/form_success.html" type="hidden" />
</li>
</ul>
</form>


* = required fields

  • *
  • *
  • *
  • *
  • *
  • *
  • *
  • *

Example .txt file that will be emailed to you
IMPORTANT : What is inside the brackets needs to be the same as the name="" of the input and the label="" of the label from when you set up the form

From: mrexample@uwo.ca <<< this is your email
To: [email] <<< this is their email
Subject: Registration form received <<< this is what you want to show in the subject of the email

Thank you for your interest! <<< any text you want to include

Your request has been submitted.

Please take the time to review your submission details:

Name: [name]
Email: [email]
Phone: [phone]
Address: [address]


Random box

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

<div class="grey-box">
<h3>Did you know???</h3>
<script src="js/random-box.js" type="text/javascript" language="javascript"></script>
</div>


Did you know???

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 script will look 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>


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\"";

 


Accordion

The class must always be "accordion" and it is always 100% the width of its parent container(main content, right sidebar, left nav option, or a custom container with an assigned width). You may put whatever you like in these containers though(links, paragraphs, images, etc.). Use h3's for the accordion titles and then place what you want in the drop-down in a div under the h3

<div class="accordion">
<h3><a href="#">Drop-down 1</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum, dui vitae imperdiet tincidunt, enim diam aliquam urna, eget posuere sem nisl ut lorem. Curabitur feugiat euismod euismod. Ut at dolor purus. Cras quis vulputate ipsum.</p>
</div>
<h3><a href="#">Drop-down 2</a></h3>
<div>
<p>Donec sodales ante quis justo dictum semper. Proin nec ultricies metus. Aliquam eleifend accumsan condimentum. Ut sagittis, dolor quis dignissim mattis, magna eros consequat magna, nec gravida neque turpis non tortor.</p>
</div>
<h3><a href="#">Drop-down 3</a></h3>
<div>
<p>Morbi aliquam mattis tempus. Nullam ultricies nunc a diam ultricies non rutrum metus fringilla. Vestibulum non euismod tortor.</p>
</div>
</div>


Drop-down 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum, dui vitae imperdiet tincidunt, enim diam aliquam urna, eget posuere sem nisl ut lorem. Curabitur feugiat euismod euismod. Ut at dolor purus. Cras quis vulputate ipsum.

Drop-down 2

Donec sodales ante quis justo dictum semper. Proin nec ultricies metus. Aliquam eleifend accumsan condimentum. Ut sagittis, dolor quis dignissim mattis, magna eros consequat magna, nec gravida neque turpis non tortor.

Drop-down 3

Morbi aliquam mattis tempus. Nullam ultricies nunc a diam ultricies non rutrum metus fringilla. Vestibulum non euismod tortor.


Tabs

By default the TabbedPanels class is set to 415px, but this can be overwritten using inline styling. Just name the tabs in the list items, and then place any content into the div's.

<div class="TabbedPanels" id="TabbedPanels1" style="width:90%">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">
     <h3>Tab 1</h3>
   </li>
    <li class="TabbedPanelsTab tab2" tabindex="1">
        <h3>Tab 2</h3>
    </li>        
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" id="featurestory">
    <p>Morbi aliquam mattis tempus. Nullam ultricies nunc a diam ultricies non rutrum metus fringilla. Vestibulum non euismod tortor.</p>
</div>
<div class="TabbedPanelsContent tab2">
<p>Morbi aliquam mattis tempus. Nullam ultricies nunc a diam ultricies non rutrum metus fringilla. Vestibulum non euismod tortor.</p>
</div>
</div>


  • Tab 1

  • Tab 2

Morbi aliquam mattis tempus. Nullam ultricies nunc a diam ultricies non rutrum metus fringilla. Vestibulum non euismod tortor.

Morbi aliquam mattis tempus. Nullam ultricies nunc a diam ultricies non rutrum metus fringilla. Vestibulum non euismod tortor.


Triple image slider

Only one of these sliders can be used per page. Change images, captions, and sub-captions. Place this code in your main content area.
WARNING : These don't always fit just the way you want, depending on image size, and the container you are trying to place it in. In some cases they need to be customized a little more in which case ask for help from an experienced coder.

<div class="slider-container" >
<div id="triple-slider" class="flexslider carousel">
<ul class="slides">
<li>
<img src="https://www.uwo.ca/img/academics/academics-dept.png" /><!--CHANGE IMAGE HERE-->
<h3>Title</h3><!--CHANGE CAPTION HERE-->
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris. </p> <!--CHANGE sub-Caption HERE-->
</li>
<li>
<img src="https://www.uwo.ca/img/academics/academics-dept.png" />
<h3>Title</h3>
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris. </p>
</li>
<li>
<img src="https://www.uwo.ca/img/academics/academics-dept.png"/>
</li>
<li>
<img src="https://www.uwo.ca/img/academics/academics-dept.png" />
<h3>Title</h3>
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris. </p>
</li>
<li>
<img src="https://www.uwo.ca/img/academics/academics-dept.png" />
</li>
</ul>
</div>
</div>



Single image slider

Good to place in sidebars, or bottom social media areas

<div class="slider-container">
<div id="secondary-slider" class="flexslider">
<ul class="slides">
<li>
<img src="https://www.uwo.ca/img/academics/academics-dept.png" /><!--CHANGE IMAGE HERE-->
<h3>Title</h3><!--CHANGE CAPTION HERE-->
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris. </p> <!--CHANGE sub-Caption HERE-->
</li>
<li>
<img src="https://www.uwo.ca/img/academics/academics-dept.png" />
<h3>Title</h3>
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris. </p>
</li>
<li>
<img src="https://www.uwo.ca/img/academics/academics-dept.png" />
</li>
<li>
<img src="https://www.uwo.ca/img/academics/academics-dept.png" />
<h3>Title</h3>
<p>In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris. </p>
</li>
<li>
<img src="https://www.uwo.ca/img/academics/academics-dept.png" />
</li>
</ul>
</div>
</div>



Feedback Tab

Place this code in the HTML view of the "Content below Columns" WYSIWYG editor on a page.

<div class="feedback">
        <a class="open" id="feedback"></a>
<div class="form">
<h2>How is the new site? Let us know!</h2>
<a class="close" href="#">[close]</a>
<span class="status"></span>
<form action="http://www.uwo.ca/cgi-bin/cgiemail/hr/feedback.txt" method="post">
Email Address: <br />
<label class="obscure" for="required-email">Email Address:</label>
<input id="required-email" maxlength="60" name="required-email" size="60" type="text" /><br />
Message:<br />
<label class="obscure" for="feedback_text">Feedback:</label>
<textarea id="feedback_text" name="feedback"></textarea><br />
<label class="obscure" for="sumbit_button">Submit:</label>
<input id="sumbit_button" value="Send" type="submit" />
<input name="success" value="http://www.uwo.ca/hr/feedback_reply.html" type="hidden" />
</form>
        </div>
</div>


The form-action will need to point to a .txt file in your site's root folder. It needs to go through the cgi-bin/cgiemail path. If you don't know your path, call ITS for assistance. The .txt file is the framework of the email to be sent to you. Here is an example of a .txt file:

From: [required-email]
To: hrfeedback@uwo.ca
Subject: HR Website Feedback

[feedback]

Embedding the Twitter Feed Widget in Cascade

 
1. Login to your Twitter account.
 
2. Locate the Gear icon in the top right corner. Click on Setttings
 
3. In the left navigation panel, click on Widgets
 
4. In the top right corner, click Create New button
 
5. In the new widget window fill out the fields according to the screenshot below, changing the Username.
The 250px widget height is recommended if you are using the feed in the social media panel similar to the Western homepage. You can expand the height, if the feed is placed in the right sidebar or an area with more space.

Configuring the Twitter widget

6. Click "Create Widget" when done.
Copy the code at the bottom of the Preview window.

Copy Twitter widget code
7. In Cascade view the page, which contains the Twitter feed. Click on the "lego" block icon and once you see the pop-up, click on the link of the block that contains the Twitter block.
Embedding the Twitter widget in Cascade

8. In the Edit mode, click on the HTML icon.

HTML button to embed the Twitter widget in Cascade

9. Paste the Twitter widget code in the HTML editor window. Click Update at the bottom of the window and then Submit at the bottom of the page.

Paste the Twitter config code in the editor's HTML view

10. View the page that contains the Twitter feed in Cascade to make sure that it is working correctly. In Cascade you should be able to see the feed that is pulling the tweets.
If all is looking good, republish the page. If you experience problems with the feed, contact its-cascade@uwo.ca
 
 
You may prefer to leave a customized Organization's title with a Twitter icon as in the screenshot below. If this is the case, leave the <h3> title in your original HTML (please refer to a second screenshot).  For more customization options, refer to the Twitter Developers' page: https://dev.twitter.com/docs/embedded-timelines#timeline-selection

Changing the header of the Twitter widget in Cascade

Code to change the Twitter widget's header


Creating an Image Gallery

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.

Gallery 1. An example of 3 thumbnails in one row


Gallery 2. An example of 2 thumbnails in two rows, 2 columns


To create an Image Gallery

  1. In /_cms/blocks/xhtml/ of your website, create a new block, gallery-css.
    You might find it easier to copy any of the existing blocks.

  2. In the html mode of the newly-created block, paste the following code:

    <link href="https://www.uwo.ca/web_standards/css/blueimp-gallery.css" rel="stylesheet" />

    Submit the changes.

  3. In the page where you'd like to create the gallery, go to Edit > Outputs. In the list of regions, locate Extra Head Code. 
    In the block line, link to the gallery-css. Submit the changes.

  4. Create thumbnails of the images that you'd like to place on the landing page. Upload them to Cascade.Upload full-sized images that you'd like to use in the gallery.
    A good rule of thumb is to keep the same name convention for both small and large images with -s.jpg and -l.jpg at the end to differentiate them. For example, sunset-s.jpg and sunset-l.jpg

  5. In the HTML view window of the page, Copy and paste the gallery setup code:

    <!-- The Gallery setup. Don't change anything below this point-->
    <!--#passthrough
    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
        <div class="slides"></div>
        <h3 class="title"></h3>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="closeclose">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
    </div>
    #passthrough-->
    <!-- The Gallery. Don't change anything above this point-->

  6. In the HTML view window of the page, copy and paste the gallery code under the code from step 5:

    <h3 style="color: #06f;">Gallery 1. An example of 3 images in one row</h3>
    <!-- Gallery #1 setup starts -->
    <div class="links" id="links">
    <!--add first image with caption -->
    <a href="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_b.jpg" title="Banana is a great source of potassium. The yellower the banana is, the better for you!">
    <!--add first thumbnail -->
    <img alt="image one" src="https://farm1.static.flickr.com/387/19071027264_92aaa2a2d2_s.jpg" /></a>
    <!--add second image with caption -->
    <a href="http://farm8.staticflickr.com/7501/15812584301_1d63602c58_b.jpg" title="Apples are bruised easily">
    <!-- second thumbnail -->
    <img alt="imshr" src="https://farm1.static.flickr.com/257/19502744658_4020ac67d1_s.jpg" /></a>
    <!-- third image with caption --> <a href="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_b.jpg" title="Oranges contain as much vitamin C as three pills"> <!-- third thumbnail -->
    <img alt="Orange" src="https://farm1.static.flickr.com/538/19060161194_89d7b1dfb3_s.jpg" /></a>
    </div>
    <!-- Gallery #1 setup ends -->

  7. Replace the original images with you own and add captions in the title placeholders where needed.

  8. In the HTML view window of the page, add the following gallery declaration script, below the code from Step 6:

    <script src="https://www.uwo.ca/web_standards/js/blueimp-gallery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    document.getElementById('links').onclick = function (event) {
        event = event || window.event;
        var target = event.target || event.srcElement,
            link = target.src ? target.parentNode : target,
            options = {index: link, event: event},
            links = this.getElementsByTagName('a');
        blueimp.Gallery(links, options);
    };
    </script>


To create several galleries on one page

  1. For the second gallery, copy and paste the code in Step 6 and change the id to "links2" (or 3, 4, 5, etc.)
    <div class="links" id="links2">

  2. Add a second declaration by copying the script in Step 8 and changing the call from links to links2:
<script src="https://www.uwo.ca/web_standards/js/blueimp-gallery.min.js" type="text/javascript"></script>
<script type="text/javascript">
document.getElementById('links').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};
</script>
<script type="text/javascript">
document.getElementById('links').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};
</script>
<script type="text/javascript">
document.getElementById('links2').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};
</script>

Make one image open a slideshow

There may be cases when you'd like to have one in-page image open a gallery / slideshow of images.


To accomplish this:

  • List all slideshow images BEFORE the in-page image, including their location and captions
<div class="links" id="links">
<a href="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_b.jpg" title="Banana">
<img alt="something gloomy" data-description="This is a banana." src="http://farm8.staticflickr.com/7501/15812584301_1d63602c58_m.jpg" title="Banana" /> </a>
<a href="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_b.jpg" title="Orange"> </a>
</div>

Image Flip Cards

Note: this script works for all browsers except for IE 9 and lower. The script is / will be responsive once you apply the Western responsive design template (coming out in early 2016).

    1. In /_cms/blocks/xhtml/ of your website, create a new block, flipcards-css.
      You might find it easier to copy one of the existing blocks.

    2. In the html mode of the newly-created block, paste the following code:
      <link href="https://www.uwo.ca/web_standards/css/flipcards.css" rel="stylesheet" />
      Submit the changes.

    3. On the page where you'd like to create the flipcards, go to Edit > Outputs. In the list of regions, locate Extra Head Code. 
      In the block line, link to flipcards.css. Submit the changes.

    4. In the html mode of the page where you'd like the flipcards to go, paste the code below. Make adjustments to customize the card: feplace the image path with the one you'd like to use, change the text in the <div class="back>, etc

      <!--first flip card-->
      <div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="float: left;">
      <div class="flipper">
      <div class="front" style="background: url('http://communications.uwo.ca/comms-test/img/eng.png');">
      <p>Discovery Western</p>
      </div>
      <div class="back">
      <p>Discovery Western recently celebrated 25 years of sharing the fun and interesting sides of science, engineering and technology.</p>
      <a class="blue-box" href="http://www.google.com" style="width: 40%; float: right; margin-right: 10px;" target="_blank" title="blue-box example">More</a></div>
      </div>
      </div>
      <!--end of first flip card -->

Discovery Western

Discovery Western recently celebrated 25 years of sharing the fun and interesting sides of science, engineering and technology.

More

You can place up to 3 flip card in a row.

Kyra Moura

Kyra Moura arrives at Western in September to study Medical Sciences as one of Western’s two Schulich Leader Scholarship winners.

More

Jim Galbraith

Jim Galbraith, Manager of Landscape Services & Waste Management, is retiring, leaving behind fond memories of Western’s campus.

More

Kyra Moura

Kyra Moura arrives at Western in September to study Medical Sciences as one of Western’s two Schulich Leader Scholarship winners.

More