Using HTML to create a home page banner
Subscription:Creating a home page banner requires an account that is part of an ArcGIS Online organization. See Getting started for more information.
Administrators of an organization can customize the website to showcase the geographic information that's important to the organization. This includes an option to create a banner for the home page using HTML. See About configuring the website for information on the other configuration options for the website.
About the banner
The home page includes a banner at the top of the page that is 960 pixels wide by 180 pixels high. You can select an image for the banner area, choosing a predefined image or uploading a file from your desktop, or you can use HTML to create the contents of the banner. See Configuring general settings for the website for more information.
Your logo appears within the banner image. If you use HTML to set the home page banner, the logo does not appear (unless you include it in your HTML).
Tip:If your organization is set to SSL only, any image references in your HTML need to be accessed through HTTPS in order for the image or images to appear in your banner. See Configuring security settings for more information.
Supported HTML
Below is a table of the HTML tags you can use to create a custom banner.
Tag | Attribute |
|---|---|
a | href, target, style |
img | src, width, height, border, alt, style |
span | style |
table | width, height, cellpadding, cellspacing, border, style |
div | style |
font | size, color, style |
tr | height, valign, align, style |
td, th | height, width, valign, align, colspan, rowspan, nowrap, style |
b, strong, i, em, br, p, li, ul, tbody |
Tips for using HTML
- HTML tags not listed in the table above are not supported and will be filtered out.
- Allowed protocols for href and src are http and mailto.
- Tags are automatically closed if not closed.
- <>&'s are escaped outside of legal tags if not escaped using < > & ".
Examples
Below are examples of banners created with HTML. Each example includes the code that was used to create the banner.
The code below includes the HTML and the CSS used to create the Generic Environment Organization banner:
<div style="width: 960px; font-family: futura, helvetica, arial;
background: url(http://imagesite/generic_env.png); height: 180px">
<div style="width:680px; margin-left: 220px; margin-top: 60px; float: left;">
<span style="font-size:24px; color:#fdf77d;
font-weight:bold; text-transform:uppercase; text-shadow: 2px 2px 2px #085a00;">
Generic Environment Organization</span><br/>
<p style="color:#ffffff; font-size:14px;">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ullamcorper lorem pulvinar libero ultricies.</p></div> </div>
The code below includes the HTML and the CSS used to create the Government Home banner:
<div style="width: 960px; font-family: futura;
background: url(http://imagesite/generic_gov.png); height: 180px">
<div style="margin-top: 120px; float: right; margin-right: 80px">
<a href="http://www.esri.com/industries/federal/index.html/" style="background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
border-bottom:#fff 1px solid; border-left: #fff 1px solid; padding-bottom: 7px;
padding-left: 15px; padding-right: 15px; font-family: helvetica, arial, sans-serif;
color: white; font-size: 14px; vertical-align: middle;
border-top: #fff 1px solid; border-right: #fff 1px solid; text-decoration: none;
padding-top: 7px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0" target="_blank">Government Home</a></div></div>