Customize Infographic Report Player CSS

RachaelChasse — Wed, 06 May 2020 11:04:58 GMT

Good Morning,

I am using the Business Analyst web app to export a custom infographic to HTML. The exported html places the infographic into a Report Player div, which has a background and header color preset.

Looking at the source code, the background color is set on the following DIV:

<div class="esriGEReportPlayer esriGENonSelectable playerThemeDark esriGEReportPlayerFullView esriGEReportPlayerFullScreen" id="uniqName_19_0" widgetid="uniqName_19_0"">

The header color is set here:

<div class="esriGEPlayerToolbar playerThemeDark" id="dijit__TemplatedMixin_1" widgetid="dijit__TemplatedMixin_1">

Both of these colors are set by the following esri.css file:

<link href="https://bao.arcgis.com/InfographicsPlayer/BAMobile/8.1a/esri/css/esri.css" rel="stylesheet">

I tried to override this with a separate css file, which didn't work (even when using !important). How can I make these changes so I can embed this in a website?

Thank you!

Re: Customize Infographic Report Player CSS

FasilTiru — Wed, 06 May 2020 17:16:47 GMT

Hello Rachael,

You should be able to change the color, make it transparent, or hide the banner. For example, see the color changes:

Please review a similar discussion here to see how to make it transparent or hide the banner: Solution to remove BAO infographic dynamic html export banner?

Thanks,

Fasil T.

Business Analyst Team

topic Re: Customize Infographic Report Player CSS in ArcGIS Business Analyst Questions

Customize Infographic Report Player CSS

Re: Customize Infographic Report Player CSS