Improving your organization’s home page graphics

With an ArcGIS Online subscription, organizations can customize the look and feel of their home site. You can change the graphics, the featured content ribbon, gallery contents, and more.

In a previous post we provided an overview of how to create a great home page for your organization. Here’s a few extra tweaks you can implement that will make your home page even nicer.

Rounding your home page graphic

A nice little “extra” for your home page graphic is to add the CSS to create rounded corners. Below we’ve added a 960 x 470 pixel graphic to our home page as described in our earlier post. Here is the HTML that is inserted to add the graphic:

<div style="width: 960px; height: 470px;</span>
background: url(http://downloads2.esri.com/agol/org/samples/graphics/esri-q.jpg)"/>

Note that the bottom left and bottom right corners are not rounded:

Adding border styling (to handle all browsers) we can round the corners to make for a nicer effect. Here’s the CSS:


<div style="width: 960px;
height: 470px;
background: url(http://downloads2.esri.com/agol/org/samples/graphics/esri-q.jpg);
-webkit-border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px;
-o-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px"></div>

And here’s the result:

Popping map names

In the graphic above, the blue text is not as visible as we might like against the dark background. While we can’t currently control the color of the text, we can easily alter the graphic to make the text “pop.” Below we’ve added a semi-transparent white stripe (in this case 960 x 55 pixels with 75% transparency) to our graphic.

Here’s our site with these changes implemented.

For more information see Using HTML to create a home page banner.

This entry was posted in ArcGIS Online and tagged , , . Bookmark the permalink.

Leave a Reply