Implementation

How to implement the header and footer branding assets

To implement the header and footer branding assets on your site, you will need to do two things:

Point to the brand.css stylesheet
Include the header-*.html and footer.html markup elements on your site's pages

You may not include tools, social media icons, other links, or anything else in the header, footer and search branding assets.

Making alterations to the brand assets

The header, footer, and search brand assets must be implemented as is unless search is a primary function of your site.

If that is the case on your site, you may make limited alterations. No other alterations are allowed.

Search

The search in the branding bar is optional. For example, if your site doesn't need search, or if your site includes the Google Programmable Search function within the primary content area of your site, you can remove the search functionality by simply not including the search asset and associated script.

How to implement Google Programmable Search on your site

To implement the Google Programmable Search assets on your site, you must include a placeholder for rendering the search form in the site header section and initialization for Google Programmable Search.

The elements needed for search implementation are:

search.css
search.js
search.html

Search initialization

The search module can be initialized using following code.

This code can be included in a local file, inline inside the $(document).ready block, or as a standalone script inside the document without being wrapped inside the $(document).ready block.

/*!
 * Site Specific IU Search Init
 */
var IUSearch = window.IUSearch || {};

var searchOptions = {
    CX: {
        site: 'xxxx:xxxx', // Replace this with a site CX value
        all: 'xxxx:xxxx' // Replace this with campus CX value
    },
    wrapClass: 'row pad',
    searchBoxIDs: ['search', 'off-canvas-search']
}

/* Initialize global search */
IUSearch.init && IUSearch.init( searchOptions );

The search.js file should be included in the document prior to initialization of search code shown above.

Search functions in the search.js file implement the Google Programmable Search Engine functions.

As shown below, CX values for both the site and campus can be passed during the search initialization. If your site doesn't have a CX ID, refer to the Google search engine documentation to find out how to create one.

Google Search CX values for a few of IU’s campuses
Campus name	CX
IU	016278320858612601979:ddl1l9og1w8
IU Bloomington	016278320858612601979:w_w23ggyftu
IU Indianapolis	016278320858612601979:pwcza8pis6k
IU Fort Wayne	014162612540646926707:vjfmkkqguyo

Search results page

Create a search results page and include the following markup. Remember to replace * with your campus name.

Please note that this will allow you to toggle between search results for your site and your campus.

Show/hide markup

<form class="search-toggle reset">
    <label>Expand your search</label> <input checked="checked" name="searchToggle" type="radio" value="site" /> <label>This Site</label> <input name="searchToggle" type="radio" value="all" /> <label>All of Indiana University</label>
</form>

<div id="inline-search" class="search-box search-results"></div>

<noscript>
    <h4>Message will be updated</h4>
    <div class="search-box no-script">
    <form class="gsc-search-box gsc-search-box-tools" accept-charset="utf-8" action="https://www.google.com/cse/publicurl" target="_blank">
        <table cellspacing="0" cellpadding="0" class="gsc-search-box">
        <tbody>
        <tr>
            <td class="gsc-input">
                <div class="gsc-input-box">
                    <table cellspacing="0" cellpadding="0">
                    <tbody>
                    <tr>
                        <td class="gsib_a">
                            <input autocomplete="off" type="text" size="10" class="gsc-input" name="q" title="search" dir="ltr" spellcheck="false">
                            <input type="hidden" name="cx" value="014109358301568672738:sj37ltqceas">
                        </td>
                    </tr>
                    </tbody>
                    </table>
                </div>
            </td>

            <td class="gsc-search-button">
                <input type="submit" class="gsc-search-button gsc-search-button-v2" title="search" value="Go">
            </td>
        </tr>
        </tbody>
        </table>
    </form>
    </div><!-- /.search-box -->
</noscript>

Page Boilerplate

All the elements described above should be included on your page as described in this HTML boilerplate:

Show/hide markup

<html>
   <head>
      <!-- stylesheet assets - brand.css, search.css -->
      <!-- site css -->
   </head>
   <body>
     <header id="header">
        <!-- include campus header element - header-*.html-->
        <!-- include search element - search.html-->
     </header>

     <main>
        <!-- site content -->
     </main>
      <!-- include footer element - footer.html-->

      <!-- javascript assets - search.js-->
      <!-- site javascript files -->
      <!-- search initialization -->
   </body>
</html>

Footer

The branding footer should feature the IU trident with links to copyright and accessibility information, as well as a link to the site’s privacy notice.

If your site does not use the IU Web Framework, update your footer’s markup to use the latest footer markup. Then, update your CSS to include the latest footer CSS. The styles required in this case are all of the selectors which include #footer .tagline (such as #footer .tagline.bicentennial), and they can be found within this CSS file. Please note that the second set of styles with these selectors are within a media query.

Updating the privacy link in the footer

The footer branding element also includes a link to the privacy policy for your site. The link defaults to an index page of the root-level ‘privacy’ folder of the site; virtualhostname/privacy/. This link can be modified by using the following javascript code:

var newPrivacyURL = 'http://site.iu.edu/privacy.html';
(oldPrivacyURL = document.getElementById('privacy-policy-link')) ? (oldPrivacyURL.href = newPrivacyURL) : '';

Social media icons and tools

If you currently house social media channels, quick links, or tools in your header or footer, you must find another place for them after installing the new brand assets.

IU Studios has created a solution for sites using a mobile-first framework. We developed a “skirt” area above the footer where these types of links can be housed.

You can see it in action on the IU Bloomington home page.

Implementation examples

The following section describes a few methods that can be used for including IU branding assets on your site.

The branding implementation method that will work best for you will depend on your hosting environment, site development technology, and other factors.

Examples for sites residing on IU Linux web hosting environment (Sitehost)

For sites residing in the IU Linux web hosting environment (Sitehost), the branding assets can be symbolically linked to the ‘gwassets’ folder and implemented using the following steps.

For sites residing in the IU Linux web hosting environment (Sitehost), the branding assets can be symbolically linked to the 'gwassets' folder and implemented using the following steps.

Create a symbolic link to the branding assets folder that is under the account 'gwassets' by running the following command:
```
ln -s /groups/gwassets/web gwassets
```
Use a PHP include script or server side include script to include the HTML markup elements that are inside the gwassets folder.
- To use the PHP include method:
```
<?php include "gwassets/brand/3.3.x/header-iu.html";>
```
  In order to avoid using the dot patterns to match the filenames created in the include path, the following lines should be added to the php.ini file.
```
<?php include_path=".:/groups/accountname/web";?>
```
- To use SSI (Server Side Includes):
  The Apache server allows you to place SSI directives that enable including elements on a HTML page. Here is an example of a Server Side Include statement.
```

```

Examples for sites requiring a local copy of the branding markup

For sites requiring a local copy of the branding markup:

Refer to the asset location section to determine the URLs that are appropriate for your site.
Create local copies of the contents of the asset files.
Copy the source markup and include it in your page as indicated above.