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

29273
113
07-24-2017 04:21 PM
BrianBaldwin
Esri Contributor
28 113 29.3K

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
BrianBaldwin
Esri Contributor

Zachary Robinson‌ & Daniel Munoz

I just spoke with the dev/product team and it looks like this was a bug that got pushed with the latest ArcGIS Online release, I was just told that a fix will be pushed in the next 24 hours or so.

Thanks so much for posting the issue! This would have affected a lot of people.

Nicole_Ueberschär
Esri Regular Contributor

Awesome, thanks for the fast action taken! I didn't have a subscription at hand to actually try it...

BrianBaldwin
Esri Contributor

Fix was pushed - if you made changes to your code and it's broken - hopefully you have a copy of the code and can just paste it in fresh to fix it. After you hit save, the custom/configured code will no longer get corrupted now.

PamelaLandy
Occasional Contributor

Is there a patch   to see the indented code ? Where do I download that patch  for my enterprise 10.7.1 ?

BrianBaldwin
Esri Contributor

Pamela Landy‌ - The patch/fix only applied to ArcGIS Online. It didn't relate to the pasted coded having spaces removed, but actually having it 'sanitized' and corrupted. All pasted HTML/CSS will still have the spacing 'unprettified' in the editor box.

My suggestion would be to just keep a copy of the code local in Notepad++ or another editor, and then simply paste it into the site when you make changes. This way you have a nice set of code to work with that is more legible.

ShionaHoward
New Contributor

Hello! Found this lovely blog post, which has been extremely helpful. I am having some issues with changing the header text to white, as it only wants to stay gray. Any suggestions? Thanks!

by Anonymous User
Not applicable

Hi Shiona, 

Are you in the Custom design area? When you select your text you should get those text color select fields to change the color of the text or the background of the text (next to it). 

If you are in coding mode the text looks for me like this and in the color style you put fff (for white) instead of 396 (green).

If this is not want you are looking for maybe you can show us what you already have 🙂

BrianBaldwin
Esri Contributor

This header area of the site?

You should be looking for the .top-nav-link element - you can then change that value to any other number to get any color you want.

JoeWard
New Contributor

So I have a question and its probably something totally simple that I'm overlooking. When I attempt to add a web application to our home page it also displays all the feature services that are associated with the web application. I don't think I need, or want, the general public to see or access the services associated with that application. 

BrianBaldwin
Esri Contributor
KylerAllen
New Contributor

I have no experience coding and I am having trouble getting my images to work within the code. Any advice would help. TIA

BrianBaldwin
Esri Contributor

Can you post what you have? Otherwise it's really hard to know what the issue might be.

KylerAllen
New Contributor

KanitaSellers
New Contributor II

How do you remove the clear line (clearfix) at the bottom of the Organization Description section? 

BrianBaldwin
Esri Contributor

Use the 'Inspector' tool in your browser to see what code might be the culprit. By doing this, you can see that the DIV - "organizationContent" has a 'border-bottom' style applied to it. You can just delete this or override it.

BrianBaldwin
Esri Contributor

I just tried to get to this image: https://ago-item-storage.s3.us-east-1.amazonaws.com/8c366d3cb47c40c3af85a854a603484f/OEI_Logo_Black.... 

Looks like it's not shared? You would need to have this shared publically - or have it on a server where the open web can get access to it.

Also - rather than putting a screen shot of the code - you can use the 'Source Code' tool to paste in your code - that way we can copy/paste/test it.

KanitaSellers
New Contributor II

Thank you, Brian. The following code worked for removing the line from bottom Content:

#bottomContent #organizationSection {

    border-bottom: none !important;

}

KylerAllen
New Contributor

Sharing the images publicly worked perfectly. Thanks! I have one other question regarding my homepage -- how do I get the names of my featured content to show?

BrianBaldwin
Esri Contributor

Find this line of code:

.galleryNode .galleryLabelContainer {
color: #fff !important;
display: none;
}

...and remove ".galleryLabelContainer" - then the labels will display.

MarianaDe_La_Peña1
Esri Contributor

This is amazing!

I was lloking for a way to add the next and previous buttons but I couldn't find it.

Can you help me with that?

Thanks!!

BrianBaldwin
Esri Contributor

Currently - they are just hidden. You just need to modify the code to make them not 'hidden'.

The item to look for should be something like "nextButton".

LanceKirby2
Occasional Contributor

Jade, did you make any progress on this?

DonaldTerrell
New Contributor

Can this be done in Portal 10.8 ? 

I am seeing the same issue as:

Zachary Robinson

BrianBaldwin
Esri Contributor

Donald Terrell‌ - Where are you seeing the issue? - I just tested this in the 'Org Description' setting in a 10.8 environment and it worked as expected.

The one box I had to tick was the 'Show Description Towards Bottom of Homepage' below the content box.

DonaldTerrell
New Contributor

Thanks Brian for the Timely Response !

Well, first and foremost, I am not a Web person.. just enough to be dangerous . I am more the nuts and bolts person.

Since I have an Electric Utility the “ HomePage, Creating a Unique Look and feel” is very Intriguing.

I have a TEST Portal I would to try this out on, and show my folks.

So basically, do you have more detailed instructions ?

On the issue - it was a FooBar on my part.

Thanks,

Donald

Donald F. Terrell, GISP

GIS Technical Architect

Information Systems

City of Jacksonville Beach

1460 Shetter Avenue

Jacksonville Beach, Florida 32250

Mobile : 904-591-3969

E-Mail: dterrell@jaxbchfl.net<mailto:dterrell@jaxbchfl.net>

Nicole_Ueberschär
Esri Regular Contributor

I managed to put a banner and beautify the menu in Enterprise 10.7 but I still have the default text that I don't seem to get rid off.:

 

Where do I remove this?

BrianBaldwin
Esri Contributor

Nicole Ueberschär‌ - add a screenshot of what you are trying to remove so I can see the element... Just try to highlight it for me.

BrianBaldwin
Esri Contributor

Donald Terrell‌ - The directions (in the initial blog) along with all of the sample code in the download (included at the bottom of the original post) should be about what you need. I would say just take one section at a time to get comfortable with it.

If there is something specific you really want to change or alter - I would say start with that. The easiest place to get started is probably just the 'Description' section. You can then add images, videos, or anything else to that area.

Nicole_Ueberschär
Esri Regular Contributor

Sorry, looks like my pasted screenshot didn't make it into the posting 😉

Enterprise homepage default text

Brian Baldwin‌, how do I get rid of this text?

EmilySimms
New Contributor

Wow - thank you so much for this post. I've been able to make it pretty far with a customization for our company. I have a couple items I'd like to change but I'm reached the limits of my experience!  

One - I was able to get the automated labels to show up but I'd like to change the font color from the default light blue but i'm not sure how and where to make that change.

Also - I think this was mentioned above, I changed the h2.galleryTitle item but it is not showing up. is there a second step to changing this title?

#featuredMaps #fHeader {
background: rgba(255,255,255,.5);
box-shadow: black;
border-bottom:none;
h2.galleryTitle: 'Maps';

JeffThornton
New Contributor

Dear Everyone,

I am brand new at this. I am trying to understand each part of the code and what it controls. I am attaching my code for my banner and organization description, along with my photos. I have been able to set my background and my top banner, but I cannot seem to get my description part to work. I am using icons I converted to 110x80 pixels. Please help. Can someone help me step thru each part of the code? I know the icons in the organization description will link to a webmap, but I don't have a webmap created presently, but I will. Thanks for any help!

Jeffrey Thornton

jthornton@bpu.com

Kansas City Board of Public Utilities  

Organization Description: 

<style>
.customContent {
margin-bottom: 35px;
text-align: center;
}
.groupItem img {
background-color: rgba(119, 119, 119, .9);
-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(0, 150, 148, .9);
opacity: .95;
}
</style>
<div class="customContent">
<p class="groupItems">
<a class="groupItem" href="https://uecoop.maps.arcgis.com/home/webmap/viewer.html?webmap=2bd2eec657684e74a3cb1c1cc53c1e0f" target="_blank" title="ElectricGeneration">
<img alt="ElectricGeneration" src="https://egis.bpu.com/portal/sharing/rest/content/items/d3fbc4cb1b594acc9b65ff80e307ef89/data" />
</a>
<a class="groupItem" href="https://uecoop.maps.arcgis.com/home/group.html?id=48bce920d40d41e5b1c9303da5d0923a#overview" target="_blank" title="ElectricTransmission">
<img alt="ElectricTransmission" src="https://egis.bpu.com/portal/sharing/rest/content/items/ca2398a88d8346deb2e38c1ccbf82d74/data" />
</a>
<a class="groupItem" home="" href="https://uecoop.maps.arcgis.com/home/group.html?id=bf4029a107a342b0a0633418db90a5a8#overview" target="_blank" title="ElectricDistribution">
<img alt="ElectricDistribution" src="https://egis.bpu.com/portal/sharing/rest/content/items/7b8b76954d9742e8aaba1b65a9bd415e/data" />
</a>
</p>
</div>
<div class="customContent">
<p class="groupItems">
<a class="groupItem" href="https://uecoop.maps.arcgis.com/home/group.html?id=9388739ead844e8bb5fab27beddc17d1#overview" target="_blank" title="WaterProduction">
<img alt="WaterProduction" src="https://egis.bpu.com/portal/sharing/rest/content/items/02e57e0bf06c49f0aece78fbc8fe12b6/data" />
</a>
<a class="groupItem" href="https://uecoop.maps.arcgis.com/home/group.html?id=a104b13f31d94e37a54271fb9af482a3#overview" target="_blank" title="WaterDistribution">
<img alt="WaterDistribution" src="https://egis.bpu.com/portal/sharing/rest/content/items/6f34fbae36fa43f5b488ff24557c1719/data" />
</a>
<a class="groupItem" href="https://uecoop.maps.arcgis.com/home/webmap/viewer.html?webmap=d82def0c401e4edea5644713e1db9a6b" target="_blank" title="UnifiedGovernment">
<img alt="UnifiedGovernment" src="https://egis.bpu.com/portal/sharing/rest/content/items/e3c56241b68e4d97bd39cb0458160a04/data" />
</a>
</p>
<p class="groupItems"><font color="#ffffff" size="2"><br /></font>
</p>
<p class="groupItems"><span style="color: rgb(255, 255, 255); font-size: small;"><br /></span>
</p>
<p class="groupItems"><span style="color: rgb(255, 255, 255); font-size: small;"><b>Questions, comments or concerns?</b> </span>
</p>
<p class="groupItems"><span style="color: rgb(255, 255, 255); font-size: small;">Email: jthornton@bpu.com or call (913) 573-9086.</span>
<br />
</p>
</div>

Banner: 

<div><style>
#header, #webmap-header {
background-color: #111;
}

.galleryNode .galleryLabelContainer {
color: #fff !important;
display: Maps;
}

.prevButton {
display: none;
height: 0;
}

.nextButton {
display: none;
height: 0;
}

.galleryBackground {
height: 160px;
}

#matrixLayout {
box-shadow: none;
}

#featuredMaps {
background: gray;
box-shadow: black;
border-bottom: black;
height: 210px !important;
display: fixed !important;
}

#featuredMaps #fHeader {
background: white;
box-shadow: black;
border-bottom: white;
h2.galleryTitle: ' ';
height: 12px;
}

#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: 475;
top: 20;
align-content: center;
background:
url(https://egis.bpu.com/portal/sharing/rest/content/items/d007bdd356994200978cada0d623821b/data);
background-size: contain;
background-repeat: no-repeat;
border-radius: 0px 0px 10px 10px;
width: 960px;
height: 200px;
max-width: 90%;
max-height: 90%;
-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://egis.bpu.com/portal/sharing/rest/content/items/c19387ec507d4b68bc0c68d0e1259073/data);
background-size: cover;
z-index: 0-100;
}
</style>
<div id="topBanner"></div>
<div id="resetBack"></div>
</div>

ThomasPayne
New Contributor

First & foremost thank you so much for this blog - it is has been so useful.

I have one query - not sure if you can help. When I hover over the icons in the featured content bar, is there anyway to make text (such as the item description) display.

Thank you again

BrianBaldwin
Esri Contributor

Nicole Ueberschär‌ - Organization settings, homepage tab, then down at the bottom, just uncheck the box or change the text:

Nicole_Ueberschär
Esri Regular Contributor

Ha, funny, I don't have that checkbox. Is that different in Enterprise maybe?

homepage no checkbox

BrianBaldwin
Esri Contributor

Jeff Thornton‌ - I responded with some detail on the blog post you put together - but copying the same response here:

An easy test is to just see if you can load the pictures in a browser with the URL that you are trying to insert into the code. Right now, I tried to load up the images you have in your 'egis.bru.com' Portal site - but I am guessing that those images are not shared publicly? (It might have worked for you because you were logged in, try a different browser that you have not logged into the Portal or ArcGIS Online site).

BrianBaldwin
Esri Contributor

Jeff Thornton‌ - Here is some updated, cleaned up code for the Org Description as well - try this as your base to built upon.

Also - make sure you are entering the code in the 'code view' when you edit the description.

<style>    
.info-section {      
     margin-bottom: 15px;
     color: #444;   
}       

#homeRotate {
     margin-bottom: 0px !important;
}    

.groupItems, .groupItem img {      
     margin: 0 5px 0 5px;      
     overflow: hidden;
     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;
}

.groupItem:hover img {      
     background-color: rgba(90,90,90);
     opacity: .95;  
}       

#footer-text{
     margin-bottom: 20px;
     color: black;
}

hr.rule{
     border-top: 5px solid #999;
    border-radius: 5px;
    margin-bottom: 25px;
    margin-top: 30px;
    width: 50%;
}

</style>
 
<div class="info-section">      
     <p class="groupItems">      
          <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>      
          <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>      
          <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>
     </p>
</div>
<hr class="rule">
<div id="footer-text">
     <b>Footer text - whatever you want to enter.</b></a>
</div>
<div class="info-section">    
     <p class="groupItems">      
          <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>     
          <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>  
          <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>
          <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>
        <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>
     </p> 
</div>
BrianBaldwin
Esri Contributor

Thomas Payne‌ - Thanks for the feedback Thomas - glad it has been helpful.

I just took a look at the source code... and I honestly don't know how to do it fairly easily. I'm sure there would be some kind of workaround - but upon inspecting the elements, there is no name or description saved in the HTML of the image thumbnail - so no seamless way to bring that text up on a mouse over.

If you want the image description text - I would just suggest that you not hide the title as a workaround.

Nicole_Ueberschär
Esri Regular Contributor

Brian Baldwin‌, I managed to hide the text from the home.css file but I would rather prefer to edit it somewhere...

JeffThornton
New Contributor

Brian. Thanks for your reply and your help so far. Is this the correct place to place the code: (Org Description) 

Thanks!

Jeffrey Thornton 

BrianBaldwin
Esri Contributor

Jeff Thornton‌ - You got it, just make sure to hit the 'code' button on the side (I highlighted in yellow). You will know it's active when the other formatting buttons are greyed out.

Then - paste the code in and you should be good to go.

JeffThornton
New Contributor

Brian,

So far this is what my page look like and what is my content and shared now: 

Here is my URL to my images: 

Background image: https://egis.bpu.com/portal/sharing/rest/content/items/adb2e77712d64712a6525487d3783f67/data 

BannerBPU2020 image: https://egis.bpu.com/portal/sharing/rest/content/items/0612af5b03d343c99e1c1a20c52a3470/data 

Transmission image: https://egis.bpu.com/portal/sharing/rest/content/items/3c55b232f15a46378841007031f72af4/data 

I don't have all the images for the organization Description yet uploaded yet, but i plan to add 5 more images to link to web-app/web-map. 

Here is my code for Banner presently: 

<div><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 {
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 {
background: url(https://egis.bpu.com/portal/sharing/rest/content/items/0612af5b03d343c99e1c1a20c52a3470/data);
border-radius: 0px 0px 10px 10px;
width: 960px;
height: 200px;
margin-top: 20px;
-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://egis.bpu.com/portal/sharing/rest/content/items/adb2e77712d64712a6525487d3783f67/data);
background-size: cover;
z-index: 0-100;
}
</style>
<div id="topBanner"></div>
<div id="resetBack"></div></div>

Here is my code that I just got from you this morning for Org Description: 

<style>    
.info-section {      
     margin-bottom: 15px;
     color: #444;   
}       

#homeRotate {
     margin-bottom: 0px !important;
}    

.groupItems, .groupItem img {      
     margin: 0 5px 0 5px;      
     overflow: hidden;
     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;
}

.groupItem:hover img {      
     background-color: rgba(90,90,90);
     opacity: .95;  
}       

#footer-text{
     margin-bottom: 20px;
     color: black;
}

hr.rule{
     border-top: 5px solid #999;
    border-radius: 5px;
    margin-bottom: 25px;
    margin-top: 30px;
    width: 50%;
}

</style>
 
<div class="info-section">      
     <p class="groupItems">      
          <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>      
          <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>      
          <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>
     </p>
</div>
<hr class="rule">
<div id="footer-text">
     <b>Footer text - whatever you want to enter.</b></a>
</div>
<div class="info-section">    
     <p class="groupItems">      
          <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>     
          <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>  
          <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>
          <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>
        <a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="Image Name" src="img URL here"/></a>
     </p> 
</div>

Again,

Thanks for your help Brian! How did you learn all these coding elements from ESRI?

Have a great day! 

Jeffrey Thornton 

JeffThornton
New Contributor

Brian,

How do I center the following footer-text at the bottom of this page?

Thanks,

Jeffrey Thornton 

<style>
.info-section {
margin-bottom: 15px;
color: #444;
}

#homeRotate {
margin-bottom: 0px !important;
}

.groupItems, .groupItem img {
margin: 0 5px 0 5px;
overflow: hidden;
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;
}

.groupItem:hover img {
background-color: rgba(90,90,90);
opacity: .95;
}

#footer-text{
margin-bottom: 20px;
color: black;
}

hr.rule{
border-top: 5px solid #999;
border-radius: 5px;
margin-bottom: 25px;
margin-top: 30px;
width: 50%;
}


</style>
<div class="info-section">
<p class="groupItems">
<a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="ElectricGeneration" src="https://egis.bpu.com/portal/sharing/rest/content/items/62299722b1c1488fb549caa71cb4b433/data"/></a>
<a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="ElectricTransmission" src="https://egis.bpu.com/portal/sharing/rest/content/items/9e685d4264724bd08d5e53e7f0985d17/data"/></a>
<a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="ElectricDistribution" src="https://egis.bpu.com/portal/sharing/rest/content/items/e95f6700cf024122806cb2d8fef02601/data"/></a>
</p>
</div>
<div class="info-section">
<p class="groupItems">
<a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="WaterProduction" src="https://egis.bpu.com/portal/sharing/rest/content/items/1e4af121dd1c40a0b6349f5231ad4371/data"/></a>
<a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="WaterDistribution" src="https://egis.bpu.com/portal/sharing/rest/content/items/5ab7f18c809343e085f2186257328019/data"/></a>
<a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="UnifiedGovernment" src="https://egis.bpu.com/portal/sharing/rest/content/items/e1410575346b41cf99724213121ba219/data"/></a>
<a class="groupItem" href="App URL HERE" target="_blank" title="App Name"><img alt="KCBPUGISNews" src="https://egis.bpu.com/portal/sharing/rest/content/items/6f830ed84be64a47b379683563b649d9/data"/></a>
</p>
</div>
<hr class="rule">
<div id="footer-text">
<b>Footer text - whatever you want to enter.</b></a>
</div>

JeffThornton
New Contributor

Brian 2 more questions. What controls the featured content in the banner part of the code. Specifically the border around the maps and the color of the border? 

Thanks!

Jeffrey Thornton 

The other question is what part of the code controls the contact us at the bottom of the page?

BrianBaldwin
Esri Contributor

Jeff Thornton‌ - Looking good so far!

For the border and color of the thumbnails - you could add this to your 'style' section in your code:

.galleryNode.small .galleryThumbnail {

    border: 1px solid #FFFFFF; !important;

}

  • The #FFFFFF can be changed to any other color
  • The '1px' will make the border larger or smaller

To hide the 'Contact Us' - you can add this to your code:

.esri .footer, .esri .center .footer {
    visibility: hidden;

}

JeffThornton
New Contributor

Brian,

Thanks for all the help! Would their be any way I could contact thru email for some more detailed questions? If so could you email at jthornton@bpu.com.

Thanks again!

Jeffrey Thornton 

JeffThornton
New Contributor

Brian,

I am still having difficulties with the borders around the featured maps. I am also having trouble centering the footer text below the gray line at the bottom of the page.I really appreciate your help!

Thanks!

Jeff 

MonarchAdmin
New Contributor II

Hi Brian,

Thank you so much for this blog post!  It's been so helpful.


I have one quick question.  I'm trying to add the title text back underneath the map post thumbnail.  I've tried removing ".galleryLabelContainer" in the following line but it doesn't seem to work - it actually takes off the thumbnail image instead. 

.galleryNode .galleryLabelContainer {
color: #fff !important;
display: none;
}

 

https://monarchweather.maps.arcgis.com/home/index.html 

Any advice you have I'd appreciate it.

Cheers,

Bruce

---
Code below.  Only change was the banner image url.

---

<style>
#header, #webmap-header {
    background-color: #111;
}

.galleryNode  {
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: none;
    box-shadow: none;
    border-bottom: none;
    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 {
    background: url(https://monarchweather.maps.arcgis.com/sharing/rest/content/items/d4c4251fa3434a43a7cca51f73ce7afd/d...
    border-radius: 0px 0px 10px 10px;
    width: 960px;
    height: 200px;
    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(images/back.jpg);
    background-size: cover;
    z-index: 0-100;
}
</style>
<div id="topBanner"></div>
<div id="resetBack"></div>

BrianBaldwin
Esri Contributor

You are in the right spot - try just removing the whole line: 'display: none;' in that section.

Could just look like this:

.galleryNode .galleryLabelContainer {
color: #fff !important;

}

MonarchAdmin
New Contributor II

Ha!  Awesome.  Thanks so much Brian!

SeanO_Neill
New Contributor II

Hi Brian, is there a way to have more than 4 featured maps?  If I change this setting from the organization page to more featured items, there still is only 4.  Any advice?

Thank you for a great blog!

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!