Custom headers and footers

18447
2
10-11-2016 01:01 AM
CourtneyClaessens
Occasional Contributor III
6 2 18.4K

Custom Header

There are two components for creating a custom header for your site. There is an HTML card that you can edit in the page layout and a CSS text area in the header settings sidebar.

The custom header HTML card supports a limited set of HTML tags:

<a>
<b>
<blockquote>
<br>
<caption>
<cite>
<code>
<col>
<colgroup>
<dd>
<dl>
<dt>
<em>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<i>
<img>
<li>
<ol>
<p>
<pre>
<q>
<small>
<strike>
<strong>
<sub>
<sup>
<table>
<tbody>
<td> 
<tfoot>
<th>
<thead>
<tr>
<u>
<ul>
<center>
<style>
<div>
<spa>
<nav>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

These can be used in conjunction with many documented Bootstrap classes

Frequently used classes include: 

class
use
.pull-right
Position elements by floating them to the right of the page
.pull-left
Position elements by floating them to the left of the page
.clearfix

Use on a  <div>  after floats to prevent other elements from wrapping around your floated item

.center-block
Center block-level elements 
.text-left
Left-align text
.text-right
Right-align text
.text-center
Center-align text

Presently, we do not support Javascript embedded in the header HTML section. Script tags will be ignored by our compiler. We do intend to add limited Bootstrap Javascript support to allow dropdown menus in navigation and collapsable mobile navigation in a future iteration of our product.

Supported attributes that can be used in conjunction with the  <a>  tag: 

aria-label
class
href
role
src
style
target

 

Supported attributes that can be used in conjunction with the  <img>  tag:

align
alt
aria-label
class
height
role
src
title
width

Supported attributes that can be used to support accessibility:

alt
aria-label
role

Supported attributes supported on any of the the allowed HTML tags:

aria-label
class
role
style

To get you started in adding your own custom header CSS, we have pre-populated the CSS text box in the settings with a few key classes you might want to use if you are working with the default custom header:

class
use
.custom-header
Wraps the entire component - you can only style tags within this class
.first-tier
First level of navigation, including the site logo 
.second-tier

Second level of navigation

Custom Footer

Like our custom header, our custom footer is made up of two components, an HTML editing card in the page layout and a CSS text input box under the sidebar settings.

Please read the supported tags and attributes in the custom header above for best practices. The only additional classes of importance found in the footer are related to layout:  .container  and  .col-xs-12 classes. These are part of the Bootstrap grid structure and are necessary to constrain columns within a fixed width page layout. You may modify the columns as you wish. These classes were not necessary in the header as the Bootstrap  <nav> classes take care of all of this for you in regards to navigation.

Tags (1)
2 Comments
About the Author
Product Engineer on the ArcGIS Hub team.