Page Template

Downloadable Resources

https://vcs.toronto.ca:6443/devops/dts/external-site-resources

Public Facing (toronto.ca)

We provide a c-frame (the Header and Footer) and relevant CSS and JavaScript via a url
https://www.toronto.ca/globalnav/cframe/

The simplest way for you to get the COT template is to copy the c-frame HTML and use in your own app by appending your application the following section in the DOM

<div class="container-fluid" id="main-content">

<!-- CONTENT -->

</div>

You may have to adjust the CSS and JS accordingly for your application.

Template (Library) Dependences

Required:
jQuery v3.3.1
jQuery Migrate v3.0.1
Bootstrap v3.4.1

The template supports analytics by default but the relevant scripts can be removed if it is not necessary
There may be instances where the imported application uses different library versions. It is possible to swap out libraries but this should be done in consultation with the Technology Services - Digital Technology Team. Doing so may require your application to go thru some additional testing.

HTML Fragments

Our templates use the w3-include tag and <script /> to import html fragments from our CMS to construct the page:
You can get the header content (WP menu and iWant Menu) using the following fragments

https://www.toronto.ca/globalnav/header/
https://www.toronto.ca/globalnav/iwant/

You can get footer content from this fragment

https://www.toronto.ca/globalnav/footer/?fb=true

Use the following script to import the fragments

/* Usage:
<div w3-include-html="INSERT-FRAGMENT-URI"><a href="INSERT-FRAGMENT-URI"></a></div>
*/
<script>
        w3IncludeHTML(function () {
        var scriptTag = document.createElement('script'), // create a script tag
            firstScriptTag = document.getElementsByTagName('script')[0]; // find the first script tag in the document
        scriptTag.src = "https://www.toronto.ca/wp-content/themes/cot/js/scripts.js";  // set the source of the script to your script
        firstScriptTag.parentNode.insertBefore(scriptTag, firstScriptTag);
    });
</script>

Internal Facing (insideto.toronto.ca)

The simplest way for you to get the header and footer is,
https://was-intra-sit.toronto.ca/webapps/cdn/template/app/cframe