Beautify That Homepage!: Creating a unique look and feel for your organization

28960
113
07-24-2017 04:21 PM
BrianBaldwin
Esri Contributor
28 113 29K

We frequently get questions from customers about how to to style their ArcGIS Online/Portal homepages, similar to the demonstration sites that we designed for our Electric and Gas sites. This blog is going to walk through the way that we styled our homepages, as well as providing all of the source code and imagery.

Westerville Homepage

Westerville Power & Light Homepage, our fictitious electric utility demonstration site. 

Currently (as of July 2017) the ability to customize and configure an ArcGIS Online/Portal homepage feels pretty limiting. Yet, the fact that ArcGIS Online/Portal lets you override the default CSS, apply your own styles, and link out to external content gives you the ability to start with a completely blank slate. Rather than simply hiding all elements and starting from scratch, you can restyle many of the elements that already exist, which I will be walking through in this post.

First things first, please go and download the included CSS/HTML that was attached to this post. Also, brief caveat that I am no web designer by trade, so this CSS could certainly be improved upon syntactically (feel free to roll your eyes at any point while looking at the samples). Lastly, I prefer to use a 3rd party app (Notepad++) because as the script is pasted into ArcGIS Online/Portal, all formatting is removed.

So, let's start with a blank slate:

Start

This is what pretty much every organization homepage starts out looking like. Eek. So, how do we make this look better? Honestly, with a couple of code snippets and images, it takes about 5 minutes.

After you open the attached .ZIP file, you will find 2 HTML files: Organization Description and Banner. The sections are titled for the sections of the ArcGIS Online/Portal settings that this code can be pasted into. The standard homepage is composed of roughly 3 different elements: 1 - Top Banner, 2 - Featured Content, and 3 - Organization Description. Open up the file titled Banner.html and we will work on styling Top Banner, Featured Content, and the background.

Sections

If you are looking at the 'Banner.html' code, the first thing you will note is the ability to override many of the Esri default styles. Everything in the <style> section is pretty much overriding defaults.

#bottomContent  {
    background: none;
    box-shadow: none;
    border-bottom: none;
}

#bottomContent #organizationSection .top-nav {
    border-bottom: none !important;
}
‍‍‍‍‍‍‍‍‍

A lot of these declarations are just overriding the box shadows, etc that Esri applies to elements. Play around with the Chome or Firebug Developer tools, and you can look at all of the default elements to see what other elements you may want to tweak. For example, you could hide the entire FeaturedMaps element and create a fully custom page if you so desired. 

In the code, the last two elements you will see in the <style> section are the #topBanner and #resback. For both of these, you can see that we are simply applying a background image to the DIV and then placing the element. #topBanner is placing the header banner image and #resBack is placing the background image at a fixed position.

In ArcGIS Online, navigate to My Organization, Edit Settings, Home Page, and set the Background Image to No Image. Then, set the Banner to 'custom design', click the code view icon, and paste in the Banner.html contents.

Banner

Looks pretty good already!

Now, on to the Organization Description. Open up the OrganizationDescription.html file. All of the styles associated with this file are just applying style to custom DIV elements that we can paste into the Organization Description. So, rather than just using text, we can create custom content and styles in this space.

What we are doing here, is just taking some basic images and applying a little bit of CSS style to get a rounded corner and a hover on a mouse over. All of these images then link out to ArcGIS Online content in the organization, or any other content you may want to link to. I have also seen folks embedding StoryMaps, Dashboards, and other content directly into the Organization Description. You can get as creative with this section as you want!

.customContent {       
     margin-bottom: 35px;
    text-align: center;    
}       

.groupItem img {
     background-color: rgba(119,119,119,.8);
     -webkit-border-radius: 5px 5px 5px 5px;      
     border-radius: 5px 5px 5px 5px;
     padding: 8px;
     margin: 0 10px 0 10px;         
}

.groupItem:hover img {      
     background-color: rgba(210,224,255,.4);
     opacity: .95;  
}        ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
<div class="customContent">       
     <p class="groupItems">      
          <a class="groupItem" href="" target="_blank" title="Distribution">  
               <img alt="Distribution" src="distribution.png" />   
          </a>      
          <a class="groupItem" href="" target="_blank" title="Transmission">  
               <img alt="Transmission" src="transmission.png" />
          </a>      
          <a class="groupItem" href="" target="_blank" title="Generation">  
               <img alt="Generation" src="generation.png" />
          </a>         
     </p> 
</div> ‍‍‍‍‍‍‍‍‍‍‍‍‍

Now, take all of the OrganizationDescription.html code and navigate to Organization, Edit Settings, General, Organization Description, click the code icon, and paste everything in. After you hit save and go to Home, you'll end up with this great finished product:

Done

If anyone comes up with some great examples, please feel free to post them in the comments! I would love to see what people come up with. 

Shout out to Bernie for the initial #resBack code sample.

113 Comments
MonarchAdmin
New Contributor II

Hi Brian.  Thanks again for your help.  I've noticed that the featured maps row is not displaying in certain browsers (Chrome, IE.)  Let me know if you have any advice.  Or if it's easier to email rather than thread - here is my email. Thanks. bruce@monarchweather.com 

BrianBaldwin
Esri Contributor

It will always show 4, but you can have a bigger 'pool' of maps/apps in the mix. 

The one setting is under 'Home Page':

So - you can see how you could have more than 4 and then have the items sort how you would like.

SeanO_Neill
New Contributor II

Thanks Brian,

Yes I saw where that could be configured from the organization settings, but when I change that number and save the change, the change does not replicate to the homepage.  No matter what I choose 4 items still appear on my homepage.  Can you verify that when you change and save the changes, the number of content items it does in fact change on the homepage to help troubleshoot?  

Appreciate it,

Sean

BrianBaldwin
Esri Contributor

Yeah - it's only going to show 4 at a time. That setting just changes it to allow more or less items in the carousel.

zachgreen
New Contributor

I know I'm late to the party but I just wanted to say thank you for making this post. It's helped me design our City's homepage. Here it is!

zachgreen
New Contributor

Here's a video showing some of the functionality.

BrianBaldwin
Esri Contributor

Thanks so much for sharing Zach! Site looks great. Appreciate you putting the video together as well.

PaulDrummond
New Contributor

Hi Brian...this is such a great resource!

About the only thing you haven't covered for me is is how to change the background color of the description panel.

Is this possible?

Kind regards, Paul

Trippetoe
Occasional Contributor III

Hi Brian.

Do I understand this new-ish Configure Home Page info correctly -  the possibility of all the cool customization you and various commenters posted is now considered 'Legacy' and going away 'soon' to be replaced with the 'new home page experience'?  If so, are there expectations/plans for somehow re-enabling the ability to do custom css/html for our home pages?

Thank you.

BlairAbila
New Contributor

@BrianBaldwin  I am trying to update my portal page. I have used the code and made some changes to the portal homepage. I ran into a couple of issues. I cannot figure out how to or where to go to change the coding where the names of the maps show up at the bottom of each map like it was doing before. Also I am missing the scroll bar now where users can scroll left and right to bring up more maps than just the 4 that show on the screen. Here is a picture. I also want to remove the City of Odessa GIS Portal Banner.  Thanks. this is the only coding I have used. 

 

<style>#header, #webmap-header {    background-color: #111;}.galleryNode .galleryLabelContainer {color: #fff !important;display: none;}.prevButton {display: none;height: 0;}.nextButton {display: none;height: 0;}.galleryBackground {     height: 160px;}#matrixLayout {    box-shadow: none;}#featuredMaps {    background: none;    box-shadow: none;    border-bottom: none;     /* height: 0 !important; */     /* display: none !important; */}#featuredMaps #fHeader {    background: white;    box-shadow: black;    border-bottom: white;    h2.galleryTitle: ' ';    height: 0px;}#featuredMaps #fHeader h2 {    font-size: 0px;}.esriItemLinks a, .esriItemLinks a:link, .esriItemLinks a:hover, .esriItemLinks a:active, .esriItemLinks a:visited {    color: #111;}#bottomContent  {    background: none;    box-shadow: none;    border-bottom: none;}#bottomContent #organizationSection .top-nav {    border-bottom: none !important;}.top-nav{     border-bottom: 0 !important;}.top-nav-link {     color: #999 !important;}.esri .footer, .esri .center .footer {    border-top: none !important;} #topBanner { position:fixed;    left: 0;     top: 20;     background: url(https://geoint.odessa-tx.gov/portal/sharing/rest/content/items/b4093cebe192480ea061ad008573e46d/data);      border-radius: 0px 0px 10px 10px;      width: 420px;      height: 470px;      margin-top: 0px;      -moz-border-radius: 0 0 10px 10px;      -webkit-border-radius: 0 0 10px 10px;      -o-border-radius: 0 0 10px 10px;}#resetBack {    position: fixed;    right: 0;    bottom: 0;    min-width: 100%;    min-height: 100%;    width: auto;    height: auto;    z-index: -100;    background-image: url(https://geoint.odessa-tx.gov/portal/sharing/rest/content/items/dedf6775dbcb47cd9596a03e5d2aa3fb/data);    background-size: cover;    z-index: 0-100;}</style><div id="topBanner"></div><div id="resetBack">
BlairAbila
New Contributor

@BrianBaldwin  there is an example of mine. Thanks

 

BlairAbila_0-1607702098443.png

 

mazlianamohd_nordin
New Contributor II

Hi Brian, thank you for your great sharing.

Its possible to add picture slider in banner for homepage? how to custom with javascript code for slider?

thank you

BrianBaldwin
Esri Contributor

@mazlianamohd_nordin  - It's definitely possible. I have seen it on a couple different examples that have been deployed. I would take a look at the CSS image scrolling examples out there (there are a lot of examples if you search for it, ex. 'css image carousel').

The one thing to be cautious of - is that the 'classic' homepage editor is getting phased out. So - don't invest a lot of time in it!

About the Author
Brian works as a Solution Engineer at Esri to support customers in Education. Brian has worked as a lecturer in GIS, supported non-profits through his community planning work, and honestly just loves working with users to help solve their geospatial quandaries!