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

41802
127
07-24-2017 04:21 PM
BrianBaldwin
Esri Regular Contributor
28 127 41.8K

UPDATE: 1/6/2022 Well, this blog had a really good run, but it's nearly 'retired' by this point. ArcGIS Online has an updated homepage editor that does not support custom code (which is basically all this blog describes). So, this blog is still relevant for installations of ArcGIS Enterprise that do not have the new homepage (older versions of Enterprise), but that's about it. If you are looking for resources on styling the NEW homepage, the help documentation has some good resources: https://doc.arcgis.com/en/arcgis-online/administer/configure-home.htm

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.

127 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 Regular 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 Regular 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 Regular Contributor

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

PaulDrummond
New Contributor II

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 Regular 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!

Arnaud_Leidgens
New Contributor III

Hello,

Is it possible to do the same with ArcGIS Portal home page (Entreprise 10.9) ? Thank you in advance.

Arnaud

RobinBleeker
New Contributor

I am trying to implement this to have a nice portal on our on-prem hosted arcgis enterprise installation. 
The html code is working, but how do I get the pictures on the portal server? 
I can only upload a background image or a banner image.

I hope somebody can point me into the right direction! 

BrianBaldwin
Esri Regular Contributor

@RobinBleeker- You could upload attachments (images) in Portal and then change the sharing to be 'Public' and you could then use those URL for the image.

Or, a more traditional and I would say preferred way, would be to host the images in a web server. If you have IIS or Apache, you can just put the photos into a folder location and then reference those photos in your source code.

RobinBleeker
New Contributor

Hi Brian, 

I want to randomize the background image with a few images that I have.
Is that posssible?
All I can find is that php or javascript is needed, but that is not supported. 


Any other ideas to get this working? 
Maybe some session ID,which might be used....

Gr Robin

RobinBleeker
New Contributor

One more question. 
In the icons below, I also want to show a button about how people should be logging in.

That is easy. 
But I want that button to be hidden when the user logs in, is that possible ? 

I can do that by setting display: none;
But that should only be done when users are logged in. 
So excualy the oposite of the featuredMaps. 

BrianBaldwin
Esri Regular Contributor

@RobinBleeker- For the 'image carousel', what you should look at is a fully CSS based solution. If you Google the web for 'CSS image slideshow' or 'CSS image carousel' - there should be a lot of potentials code/ideas you could reuse.

For the 2nd idea you have... that's a great question and to be honest... I'm not sure. This gets a little beyond my 'web design skills' because you would most likely be using some JS to check the state/status of the user and then updating HTML with that return.

RobinBleeker
New Contributor

@BrianBaldwin - The examples all have the same order of the pictures that are shown. That is not what I want. I want the portal on load to pick a random picture as background, which does not change after a couple of seconds. So I need some kind of randomiser. That can't be done, so I was hoping there was some session number which I could use ..... 

For the second idea I might indeed need some JS. But is that possible ? 
I tried some php, but that doesn't work ...

I can fix the first problem too with JS if that works ....

BrianBaldwin
Esri Regular Contributor

@RobinBleeker- Ah, I got it. Unfortunately, you can't place any JS into these settings as it will get stripped out. They were trying to prevent malicious script injection, but by doing so, took a hard stance and basically won't allow any JS.

I just did a quick search for a 'random' background image generator, but it looks like it requires JS or PHP, I couldn't find any CSS/HTML workarounds.

RobinBleeker
New Contributor

@BrianBaldwin. One more question. 
I know there will be a new portal editor soon, but untill then we will use my new created page:

RobinBleeker_0-1645094369416.png

One thing I still want to change is to provide a tooltip when you hoover over the apps. 
I would like to show a small description about the app, can you help me with that ? 

 

HrEngen
New Contributor

Hi Brian.

Great post. really usefull.

I'm trying to embed one of mit arcgis sites in the code, but when I paste the code, the editor changes it. Do you know of  the limits in the editor, is it only for styling?

My code in my editor outside of arcgis

<div class="news">
<p>
<embed src="https://gis-portal.forsyningen.dk/portal/apps/sites/#/nyheder"></embed>
</p>
</div>

 

When pasted to the editor

<div class="news">
<p>
&lt;embed src=&quot;https://gis-portal.forsyningen.dk/portal/apps/sites/#/nyheder&quot;&gt;&lt;/embed&gt;
</p>
</div>

 

maybe you have an idea to why it changes the <> to &lt; ??

 

BrianBaldwin
Esri Regular Contributor

@HrEngen - did you try using <iframe> - I know that has worked in the past.

<embed> might not be supported - I have honestly never tested 'embed'.

HrEngen
New Contributor

@BrianBaldwin 

Thanks for your replay.

I have tried with iframe, but does not work either. When I paste my code into arcgis, it deletes the iframe code.

Outside arcgis:

<div class="news">
<iframe src="https://gis-portal.forsyningen.dk/portal/apps/sites/#/nyheder" width="850" height="150" align="center" ></iframe>
</div>

 

inside arcgis

<div class="news">

</div>

RobinBleeker
New Contributor

@BrianBaldwin I am trying to configure the new portal in our new environment, but the functionality of the new home page editor is very limited. 
I've set a background image, but the groups are underneath the background image, I want them over the image. 
I also want to add some more links on the start page, but all I can make are ugly looking buttons.

Is there any way to customize those ? 

RobinBleeker_0-1668066460459.png

 

BrianBaldwin
Esri Regular Contributor

@RobinBleeker - The blog that I have references the 'old' homepage editor. The questions you have refer to the newer version. If I were you - I would put these up in the ArcGIS Ideas site - or post them directly to the ArcGIS Online product page. In that way - the right product team can get a look at the short-comings and hopefully get some enhancements in place.

About the Author
Brian works as a Lead 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!