Widget Instructions for the 2017 Template



"Random Facts" / "Did you know" Box

Did you know???

    1. Locate the random-box.js block in the “2017 Design Master” > “js-2017”.
    2. Right-click and copy the block.
    3. Move the copied block over to your own site directory’s included “js folder”. You can then proceed to edit the script on your site as needed.

      <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>

      In the actual .js script block, edit the content items. You can add as many items as you wish, just remember to add the numbers in the square brackets. 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>"

      If you need double quotes, for instance, to include quotes by  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\"";

    4. Once you have finished editing your JavaScript block, you must add it to every page where you intend to use it. To accomplish this:

      Open the relevant page, go to “Edit” > “Configure” in the top menu.

      Scroll through the regions listed until you find five JavaScript regions.

      Click “Choose Block” on an empty path and load the corresponding block from your site’s directory.

      In the WYSIWYG source code editor insert the following script:

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

    You only need to edit the js block in your directory and your changes will be applied to all pages using the random-box




Accordion

  1. On the page where you'd like to add the accordion, go to Edit and locate Javascript region.
  2. Click on "Choose Block". In the right panel, link to 2017 Design Master / shared blocks for javascript regions / for javascript regions / accorion script.
    Save and Submit.
  • Open the relevant page(s), continue to “Edit” > “Configure”
  • Scroll through the regions listed until you find five JavaScript regions.
  • Click “Choose Block” on an empty path and load the corresponding block from your site’s directory.
  • In the WYSIWYG source code editor insert the following script:

    <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>

    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 for the accordion titles and then place what you want in the drop-down in a div under the h3.

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

  1. Locate the “tabs” block in the “2017 Design Master” > “shared blocks
  2. Right-click and copy the block. Move the copied block over to your own site directory, place it in your “xhtml” folder.
  3. You need to include the block on every page where you intend to use it. To accomplish this:
  • Go to “Edit” > “Configure” in the top horizontal are.
  • Scroll down to find five JavaScript regions you can load blocks onto.
  • Click “Choose Block” on an empty path and link to the corresponding block from your site’s directory.
  • In the WYSIWYG source code editor insert the following script:

    <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>
    </div>


    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.

  • 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

  1. Locate the “triple slider” block in the “2017 Design Master” > “shared blocks.
  2. Right-click and copy the block. Move the copied block over to your own site directory, place it in your “xhtml” folder.
  3. You need to include the block on every page where you intend to use it. To accomplish this:
  • Go to “Edit” > “Configure” in the top horizontal are.
  • Scroll down to find five JavaScript regions you can load blocks onto.
  • Click “Choose Block” on an empty path and link to the corresponding block from your site’s directory.
  • In the WYSIWYG source code editor insert the following script:

    <div class="slider-container">
    <div class="owl-carousel">
    <div>
    <img alt="" src="https://www.uwo.ca/img/academics/academics-dept.png" />
    </div>
    <div>
    <img alt="" 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-->
    </div>
    <div>
    <img alt="" src="https://www.uwo.ca/img/academics/academics-dept.png" />
    </div>
    <div>
    <img alt="" 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-->
    </div>
    </div>
    </div>

    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.




Single Image Slider

  1. Locate the “triple slider” block in the “2017 Design Master” > “shared blocks
  2. Right-click and copy the block. Move the copied block over to your own site directory, place it in your “xhtml” folder.
  3. You need to include the block on every page where you intend to use it. To accomplish this:
  • Go to “Edit” > “Configure” in the top horizontal are.
  • Scroll down to find five JavaScript regions you can load blocks onto.
  • Click “Choose Block” on an empty path and link to the corresponding block from your site’s directory.
  • In the WYSIWYG source code editor insert the following script: <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>

    This block is good to place in sidebars, or bottom social media areas.

  • Title

    In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.

  • Title

    In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.

  • Title

    In tincidunt dictum mi vitae lobortis. Vivamus id urna massa, eu tincidunt mauris.




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-->

      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 -->

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

      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>

Gallery 1. An example of 3 images in one row




Flip Card

  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.
  4. In the block line, link to flipcards-2017.css (Found in 2017 Design Master → css). Submit the changes.
  5. 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: replace 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



Adding a YouTube video to a slideshow

  1. On the YouTube website, find the video you'd like to embed.
  2. Under Embed, copy only the URL of the video

instructions

3. In Cascade slideshow block, paste the URL under 2. Choose a YouTube video.

4. Save and Submit.

instructions2.jpg