Language selection

Government of Canada / Gouvernement du Canada

Search

v8.0.x - Migration instructions

Version 8.0

Download theme GCWeb v8.0
(Source code)

Header - Major changes

Markup below includes both the slim header change AND the GC brand text accessibility change.

Header has been broken down into pieces in order to better point out where the changes are.

Complete before/after code is at the bottom of this page.

1. Language Section

Before


<header>
	<div id="wb-bnr" class="container">
		<section id="wb-lng" class="text-right">
			<h2 class="wb-inv">Language selection</h2>
			<ul class="list-inline margin-bottom-none">
				<li><a lang="fr" hreflang="fr" href="home-fr.html">Français</a></li>
			</ul>
		</section>
		<div class="row">

After


<header>
	<div id="wb-bnr" class="container">
		<div class="row">
			<section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right">
				<h2 class="wb-inv">Language selection</h2>
				<ul class="list-inline mrgn-bttm-0">
					<li>
						<a lang="fr" hreflang="fr" href="home-fr.html">
						<span class="hidden-xs">Français</span>
						<abbr title="Français" class="visible-xs h3 mrgn-tp-sm mrgn-bttm-0 text-uppercase">fr</abbr>
						</a>
					</li>
				</ul>
			</section>

Note: Do not forget to adjust the "href" from the "<a>" tag to suit your own implementation.

2. Government of Canada brand text (FIP)

Before


<div class="brand col-xs-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
	<a href="https://www.canada.ca/en.html" property="URL">
		<img src="./GCWeb/assets/sig-blk-en.svg" alt="" property="logo">
		<span class="wb-inv" property="name"> Government of Canada /
			<span lang="fr">Gouvernement du Canada</span>
		</span>
	</a>
	<meta property="areaServed" typeof="Country" content="Canada">
	<link property="logo" href="./GCWeb/assets/wmms-blk.svg">
</div>

After


<div class="brand col-xs-9 col-sm-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
	<a href="https://www.canada.ca/en.html" property="URL">
		<img src="./GCWeb/assets/sig-blk-en.svg" alt="Government of Canada" property="logo">
			<span class="wb-inv"> /
				<span lang="fr">Gouvernement du Canada</span>
			</span></a>
	<meta property="name" content="Government of Canada">
	<meta property="areaServed" typeof="Country" content="Canada">
	<link property="logo" href="./GCWeb/assets/wmms-blk.svg">
</div>

Note: Do not forget to adjust the "src" from the "<img>" tags to suit your own implementation.

3. Search section

Before


<section id="wb-srch" class="col-lg-8 text-right">
	<h2>Search</h2>
	<form action="#" method="post" name="cse-search-box" role="search" class="form-inline">
		<div class="form-group">
			<label for="wb-srch-q" class="wb-inv">Search Canada.ca</label>
			<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca">
			<datalist id="wb-srch-q-ac"></datalist>
		</div>
		<div class="form-group submit">
			<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub">
				<span class="glyphicon-search glyphicon"></span>
				<span class="wb-inv">Search</span>
			</button>
		</div>
	</form>
</section>

After


<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
	<h2>Search</h2>
	<form action="#" method="post" name="cse-search-box" role="search">
		<div class="form-group wb-srch-qry">
			<label for="wb-srch-q" class="wb-inv">Search Canada.ca</label>
			<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca">
			<datalist id="wb-srch-q-ac"></datalist>
		</div>
		<div class="form-group submit">
			<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub">
				<span class="glyphicon-search glyphicon"></span>
				<span class="wb-inv">Search</span></button>
		</div>
	</form>
</section>

Note: Do not forget to adjust the "action" from the "<form>" tags to suit your own implementation.

4. Complete code

Before


<header>
	<div id="wb-bnr" class="container">
		<section id="wb-lng" class="text-right">
			<h2 class="wb-inv">Language selection</h2>
			<ul class="list-inline margin-bottom-none">
				<li><a lang="fr" hreflang="fr" href="home-fr.html">Français</a></li>
			</ul>
		</section>
		<div class="row">
			<div class="brand col-xs-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
				<a href="https://www.canada.ca/en.html" property="URL">
					<img src="./GCWeb/assets/sig-blk-en.svg" alt="" property="logo">
					<span class="wb-inv" property="name"> Government of Canada /
						<span lang="fr">Gouvernement du Canada</span>
					</span>
				</a>
				<meta property="areaServed" typeof="Country" content="Canada">
				<link property="logo" href="./GCWeb/assets/wmms-blk.svg">
			</div>
			<section id="wb-srch" class="col-lg-8 text-right">
				<h2>Search</h2>
				<form action="#" method="post" name="cse-search-box" role="search" class="form-inline">
					<div class="form-group">
						<label for="wb-srch-q" class="wb-inv">Search Canada.ca</label>
						<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca">
						<datalist id="wb-srch-q-ac"></datalist>
					</div>
					<div class="form-group submit">
						<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub">
							<span class="glyphicon-search glyphicon"></span>
							<span class="wb-inv">Search</span>
						</button>
					</div>
				</form>
			</section>
		</div>
	</div>
	[...]
</header>

After


<header>
	<div id="wb-bnr" class="container">
		<div class="row">
			<section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right">
				<h2 class="wb-inv">Language selection</h2>
				<ul class="list-inline mrgn-bttm-0">
					<li>
						<a lang="fr" hreflang="fr" href="home-fr.html">
						<span class="hidden-xs">Français</span>
						<abbr title="Français" class="visible-xs h3 mrgn-tp-sm mrgn-bttm-0 text-uppercase">fr</abbr>
						</a>
					</li>
				</ul>
			</section>
			<div class="brand col-xs-9 col-sm-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
				<a href="https://www.canada.ca/en.html" property="URL">
					<img src="./GCWeb/assets/sig-blk-en.svg" alt="Government of Canada" property="logo">
						<span class="wb-inv"> /
							<span lang="fr">Gouvernement du Canada</span>
						</span></a>
				<meta property="name" content="Government of Canada">
				<meta property="areaServed" typeof="Country" content="Canada">
				<link property="logo" href="./GCWeb/assets/wmms-blk.svg">
			</div>
			<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
				<h2>Search</h2>
				<form action="#" method="post" name="cse-search-box" role="search">
					<div class="form-group wb-srch-qry">
						<label for="wb-srch-q" class="wb-inv">Search Canada.ca</label>
						<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca">
						<datalist id="wb-srch-q-ac"></datalist>
					</div>
					<div class="form-group submit">
						<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub">
							<span class="glyphicon-search glyphicon"></span>
							<span class="wb-inv">Search</span></button>
					</div>
				</form>
			</section>
		</div>
	</div>
	[...]
</header>

Note: "[...]" indicates that the rest remain unchanged.

Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: