Edit or reference external CSS ArcGIS online iframe

[BugPie]

We are attempting to use an AGOL hosted web service in a website as an embedded map. This is the first time we have used the AGOL platform other than testing purposes so I am not totally familiar with capabilities nor do I have any experience with web development.

The web developer wants to edit the CSS file or be able to allow our web service that is being embedded to reference an external CSS file. Clearly the options for fonts and style are limited in the AGOL web map environment, compared to say, ArcGIS Desktop.

All I'm doing is copying and pasting the link from "Embed in website" option, sending it to the developer. Works like a charm, but Is it possible to use a custom CSS file in order to customize fonts and styles etc?

[KellyHutchins · Accepted solution]

If you want to modify the font and other styles for the embed app you'll need to download a copy of the source code (available on github), make the updates then host the app on your own web server.

https://github.com/Esri/embed-template​

The Basic Viewer web application template does allow you to provide custom css to modify the hosted version of the app. Your developer could customize the css for that app and then update the url in your embed iframe to use that url. Details on customizing the Basic Viewer css can be found here:

https://blogs.esri.com/esri/arcgis/2015/11/24/customize-basic-viewer-appearance-using-css/

[BugPie]

Thank you Kelly, this is a very informative post.