Update Page Template

Step 2: Change standard page template to include accessible header

Step 2.1

Go to _internal > templates > Page - Standard and edit the template.

Page - standard template in the folder tree

Step 2.2

Remove the following <div> wrappers as shown in the code below.

<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper="">

<div class="off-canvas-content" data-off-canvas-content="">

</div>
<!--/.off-canvas-content -->
</div>
<!--/.off-canvas-wrapper-inner -->

Step 2.3

Add the following header tag after <include action="show" name="emergency"/>.

Note: If you do not see the emergency notification node in your template, add the following header tag after <include action="show" name="skipnav"/>. If you want to include emergency notifications, follow the update steps.

Line numbers are only for reference and may not be the same on your site.

<header id="header"></header>

example of where to add a new header tag

Step 2.4

Move the following items into the header tag in this order:

<include action="show" name="skipnav"/>
<include action="show" name="header"/>
<include action="show" name="search"/>
<element action="show" name="nav-mobile"></element>
<include action="show" name="site-title"/>
<element action="show" name="nav-primary"></element>

example of items to move into the header tag

Step 2.5

Add the following to the end of the header section:

<element action="show" name="banner-decorative"></element>

Step 2.6

Between <header> and <main>, replace <element action="show" name="banner"></element> with:

<element action="show" name="banner-informative"></element>

Step 2.7

Within <main>, replace the code with the following:

<system-region name="DEFAULT"/>
<element action="show" name="nav-section"></element>

example of switched order of region and element in the main container div tag

Step 2.8

Go to <include action="show" name="css"/> and add the following code immediately above it:

<include action="show" name="global-css"/>

Step 2.9

The updated Page - Standard template should look like the following, though your actual code may look different if there is custom code integrated into your template.

<!--#passthrough-top<!DOCTYPE HTML>#passthrough-top--><html class="no-js ie9" lang="en-US">
<head prefix="og: http://ogp.me/ns# profile: http://ogp.me/ns/profile# article: http://ogp.me/ns/article#">
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <element action="show" name="title"></element>
    <system-page-meta-keywords/>
    <system-page-meta-description/>
    <system-page-meta-author/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <link href="https://assets.iu.edu/favicon.ico" rel="shortcut icon" type="image/x-icon"/> 
    <system-region name="SOCIAL"/>
    <include action="show" name="global-css"/>
    <include action="show" name="css"/>
    <system-region name="CSS-PAGE"/>
    <include action="show" name="custom-css"/>
    <script src="https://assets.iu.edu/web/1.5/libs/modernizr.min.js"></script>
    <!--[if lt IE 9]>
        <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <include action="show" name="analytics"/>
</head>
<body>
    <include action="show" name="tag-manager"/>
    <include action="show" name="emergency"/>
    <header id="header">
        <include action="show" name="skipnav"/>
        <include action="show" name="header"/>
        <include action="show" name="search"/>
        <element action="show" name="nav-mobile"></element>
        <include action="show" name="site-title"/>
        <element action="show" name="nav-primary"></element>
        <element action="show" name="banner-decorative"></element>
    </header>
    <element action="show" name="banner-informative"></element>
    <main>
        <system-region name="DEFAULT"/>
        <element action="show" name="nav-section"></element>
    </main>
    <system-region name="FEED"/>
    <system-region name="HIERARCHY"/>
    <include action="show" name="belt"/>
    <include action="show" name="skirt"/>
    <include action="show" name="footer"/>
    <include action="show" name="javascript"/>
    <system-region name="JS-PAGE"/>
    [system-view:internal]
    <script src="/_assets/local/wcms.js" type="text/javascript"></script>
    [/system-view:internal]
    <include action="show" name="custom-js"/>
</body>
    <system-region name="Includes"/>
    <system-region name="Navigation"/>
</html>

Step 2.10

Submit to save the template.