#ProTip: Changing the page background color on your Open Data site

5734
3
03-19-2015 06:27 PM

#ProTip: Changing the page background color on your Open Data site

Note: This post, from 2015, covers features that are not present in the newer versions of ArcGIS Open Data. 

----------------

If you are starting to customize your ArcGIS Open Data site, on thing we've found many others like to do is to change the background color of the pages. Using the snippet of CSS I've provided below, you can easily change the page background for your entire site.

If you've tried this and have found that there are white gaps above and below the main page-content area, you will need the last two classes to fix that. Colors do not extend to a blocks margin. Using these rules, the default margin is over-ridden and added back with the padding, which the color will extend into.

Tutorial

Here what the default styling looks like:

Screen Shot 2015-03-19 at 9.08.37 PM.png

Step 1 - Log into ArcGIS Open Data and go to the Design Layout tab for your site.

Step 2 - Switch to the code tab for the Header.

Screen Shot 2015-03-19 at 9.09.00 PM.png

Step 3 - In the Header CSS field, copy and paste the following snippet:

#header {
  background-color: #2794D9;
}
.home, .home #page-content, #slide-region {
  background-color: #B3E9F9;
}
#title-bar-region {
  background-color: #69DCFF;
}
#footer {
  background-color: #2794D9;
  margin-top: 0px;
}
#map-bar-region {
  margin-bottom: 0px;
}
#page-content {
    padding-top: 15px;
}

Step 4 - Save and Preview your site.

Screen Shot 2015-03-19 at 9.11.13 PM.png

Step 5 - Adjust color codes to reflect your organizations brand or styling.

Comments

Thank you!

Anonymous User

Is this still available in the current Open Data implementation? The interface has changed considerably and I no longer see where I can configure at this level of detail

Hi Andrew, 

No, this is not available in the newer version of Open Data. I have added a note to these customization posts for clarification. Thank you for commenting.

Version history
Last update:
‎12-12-2021 03:43 AM
Updated by:
Anonymous User