Customize Infographic Report Player CSS

848
1
05-06-2020 04:04 AM
RachaelChasse
Occasional Contributor

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!

1 Reply
FasilTiru
Esri Regular Contributor

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