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?
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?
Business Analyst Team