ArcGIS Hub Site and Page Customization: Tips, Tricks, and Samples!
Pending updates
We know some of our customers over the years have used this page to tweak their layout beyond the obvious. At the same time we have not maintained the page and it slowly became outdated to the point of including misleading information. While we have hidden most of the page's information, we have kept some of it exposed which still aligns with our product. Today, we are encouraging our customers to start leveraging Esri's suite of calcite components in their layout."
Creating an illusion of a split row background
While designing Hub and Open Data sites, you may find that you'd like to have images that bleed to the edges of your site. Our app is based on a fixed-width container, which prevents columns and their content from taking up 100% of available screen space, and keeps your content from resizing past a certain maximum width. We've found this works best for the majority of sites. However, the rows which are outside of the container, are set to be fluid. This is what presently allows 100% width image and color backgrounds on rows. We're going to take advantage of that to achieve a split bleed look.
How to do it:
- Create the background image in Photoshop or other image editing software (eg Pixlr Editor) and set it to the row.
- Add two text cards side by side on the row and add in the following HTML (edit your own text, of course).
<h1 style="display: inline-block; background-color:#F7CE36; padding: 10px 20px;">
Header text
</h1>
<p style="background-color: #F7CE36; padding: 10px 20px;">
Paragraph text
</p>
<div style="min-height: 350px;" aria-label="description of picture"></div>
Category Cards
Categories in Hub
- Categories can help users find relevant datasets using groups or tags
- While Hub has some icons to choose from, you might want to search for you own:
- Always look for SVG as a format for the best responsive quality (these might cost $)
- Icon Monstr
- Icons 8
- Noun Project
- Note: lots of icons require attribution on your page. Your footer can be a good place for this
Hosting Images
A few options to consider
Your Organization
Ask someone on your existing web team for a place for image hosting. This is usually the best place to go but sometimes you need something fast so....
ArcGIS Online
If you host your images in ArcGIS Online, make sure you use an API call to get the item data (the direct link from the ArcGIS Online item page uses a token that will expire, and your image won't show on your page):
arcgis.com/sharing/rest/content/items/<itemId>/data
Github
Github offers a free hosting service for up to...
- GitHub Pages source repositories have a recommended limit of 1GB . Published GitHub Pages sites may be no larger than 1 GB.
- GitHub Pages sites have a soft bandwidth limit of 100GB per month.
- GitHub Pages sites have a soft limit of 10 builds per hour.
- Compression :-( but it's still not bad (see water image above)
SVGs
We now support SVGs. Style should applied via classes & ID's and not as element attributes.
Private apps with the gallery card
This section should look decidedly boring. There is actually a gallery card beneath this text but if the user viewing the site can't see any of the apps in the gallery then the card collapses. This can be useful to put organization-facing information on your public sites. This way, an authenticated user from your organization can easily find private content. To do this:
- Create a private group and invite only relevant members of you organization
- Configure the gallery card to use the same group
- Be aware of text and surrounding elements. Only the gallery card will "collapse" so the heading text (like this text above) would still show.
To see what it looks like for a private user, click here
Custom Cards
In the event the Gallery Card isn't giving you what you need, use custom cards to highlight applications, data categories, initiatives, or anything else!
Flood mitigation efforts
How to do it:
- Add one text card to a row (we will be using the Bootstrap grid to create columns for the cards, rather than using an individual text card for each card on the row).
- Copy a code snippet from the following three and paste it in the row.
- Refer to each code snippet for instructions on how to create more cards in the row.
<style>
.featured-gallery .caption {
width:100%;
bottom: 0px;
position: absolute;
background-color: rgba(57,72,107,0.7);
}
.featured-gallery .thumbnail {
border: 0 none;
box-shadow: none;
margin:0 0 30px 0;
padding:0;
}
.featured-gallery .caption h4 {
color: #fff;
-webkit-font-smoothing: antialiased;
}
</style>
<div class="col-xs-12 col-sm-12 featured-gallery">
<div class="col-sm-12 thumbnail text-center">
<a href="#"><img alt="flood" class="img-responsive" src="http://i2.cdn.cnn.com/cnnnext/dam/assets/160813212532-15-la-flooding-0813-super-169.jpg"></a>
<div class="caption">
<h4>Flood mitigation efforts</h4>
</div>
</div>
</div>
To create additional cards in the row, copy and paste the code outside the <style> tags (from <div> to </div>). Change the image and link URLs, alt text, and <h4> text as appropriate.
Static Statistic Cards
Use text cards to create custom statistic cards. These cards will be static - you will have to update them as your data is updated. Alternatively, there is a dynamic statistic card available for use that queries the feature service and will update automatically. The design of the dynamic statistic card is currently by default only. Future updates of the dynamic statistic card will include the ability to customize the layout.
Option One:
How to do it: Paste the code below into a text card on a row. To add more than one statistic card, copy and paste the code within <li> and </li> again, within the same text card. This code uses the Bootstrap grid to create columns and does not have an individual text card for each statistic.
<style>
.stat-card h3{font-size: 16px; margin-top: 5px; line-height: 20px; padding-right: 45px; color: #333; text-align; left;}
.stat-card {position: relative; display: inline-block; background-color: #fff; width: 320px; min-height: 170px; text-align: left; padding: 15px; border-width: 1px;border-style: solid; border-color: rgb(204, 204, 204); border-image: initial; overflow: hidden;}
.stat-icon {position: absolute;top: 0px;right: 0px;width: 60px;height: 60px;line-height: 60px;text-align: center;}
.stat-icon.right {right: 0px;}
.stat-icon span {position: absolute;z-index: 8;top: -40px; left: 5px; width: 100px;height: 100px; line-height: 120px;border-radius: 50%;}
.stat-icon i {padding-left: 15px; color: rgb(255, 255, 255); z-index: 9; font-size: 24px;}
.bg-target {background-color: #E07000;}
.txt-target {color: #E07000;}
.bg-ontrack {background-color: #007613;}
.txt-ontrack {color: #007613;}
.bg-failing {background-color: #D43E3A;}
.txt-failing {color: #D43E3A;}
.bg-measure {background-color: #186EA5;}
.txt-measure {color: #186EA5;}
.stat-card h4.stat-num {font-size: 45px; text-align: left;}
.stat-card .subtext {font-size: 15px;}
.stat-card .source {font-size: 12px; margin-top: 15px;}
</style>
<ul class="cards-list">
<li class="col-xs-12 col-sm-6 col-md-4">
<div class="stat-card">
<div class="stat-icon right"><span class="bg-ontrack"></span><i class="glyphicon glyphicon-home"></i></div>
<h3>Public Housing Occupancy Rate</h3>
<h4 class="stat-num"><span class="txt-ontrack">88.8</span></h4>
<div class="subtext"><i class="glyphicon glyphicon-triangle-top txt-ontrack"></i> percent occupied</div>
<div class="source">Source: <a href="#">Davenport Housing Authority</a></div>
</div>
</li>
</ul>
Chart Card
The basic mode of the chart card lets you create Bar charts, Line charts, Pie charts, and Scatter Plots. There is an advanced mode for you to customize the chart further. Advanced mode is a "do it yourself" charting that offers flexibility of the charting engine. Explore different charting options and find code snippets here.
Pages
How to do it:
- Create a page on the Pages tab of your site editor.
- Copy the slug (
/pages/your-page-title). - On your site editor, add a text card.
- Add the following HTML tag to whatever you want to link to your page:
<a href="/pages/your-page-title">My Page</a>.
The HTML used for the button above is:
<p class="text-center"><a href="/pages/my-page" class="btn btn-primary">My Page</a></p>
What to avoid
- Don't use the ember### (i.e. ember197) css selectors to do styling. These can and will change so while the changes you make may work when you preview the site...they can break at any point
- Try to avoid using content served over HTTP. If you choose to adopt HTTPS enforcement in the future you will need to rework these resources
- Avoid absolute positioning in CSS. The rest of the site is responsive so, if you use absolute positioning, you cannot guarantee how the site will look when viewed on a phone, a small resolution, etc.
- We currently do not support
svgorscripttags in cards
Resources and examples
- ArcGIS Hub Documentation
- Say hey and access tips on our GeoNet space
Accessibility
- Colour contrast checkers:
Design
- Cropping, darkening, lightening: https://pixlr.com/editor/
Footer
The default template does not have a footer. It has a last row with footer-type information, and this last row will not appear on all pages within the site. To create a persistent footer across all pages (search results, dataset page, any pages you create), add a custom footer and edit it to match your organization info.