Select to view content in your preferred language

Add option to change background color of Embed widget

109
3
Thursday
Status: Open
Brian_McLeer
Frequent Contributor

I had the embed widget in a splash screen on an AGOL EB app. Within this, I had HTML to make the background color transparent. After the recent AGOL update last week, my background is now white. Please allow the option to choose the background color within the Embed widget on the Style tab, which should include a transparent selection. This would be no different than other widgets that offer background selection color.

Brian_McLeer_0-1761876703049.png

 

3 Comments
TonghuiMing

@Brian_McLeer 

After the recent AGOL update last week, my background is now white.

I am curious about this. What does your HTML code look like? Sounds like a regression issue based on your description, instead of a new option ENH.

Brian_McLeer

Thank you @TonghuiMing. My HTML is pasted below using psuedo contact information. 

<div style="max-width:800px; margin:0 auto; padding:16px 14px; text-align:center; font-family:Poppins, Arial, sans-serif; color:#FFFFFF;">
  &lt;!-- Generic placeholder logo (fake URL) --&gt;
  <img src="https://example.com/assets/logo-placeholder.png" alt="City logo" style="max-width:160px; margin-bottom:12px;">

  <div style="font-size:22px; font-weight:700; margin:0 0 10px; font-family:Oswald, Arial, sans-serif; color:#002D56;">
    Welcome to the City Interactive Zoning and Future Land Use Plan Map
  </div>

  <div style="height:2px; background:#E9D8C2; margin:8px auto 12px; max-width:720px;"></div>

  <div style="font-size:18px; font-weight:700; color:#C41230; margin:8px 0 6px; font-family:Oswald, Arial, sans-serif;">
    Disclaimer
  </div>

  <div style="font-size:14px; margin:0 auto 8px; max-width:720px; color:#002D56;">
    This map is intended for informative and educational purposes only. The data represented has been sourced from multiple entities. While the City has done its due diligence in maintaining accuracy of boundaries to the best of its abilities, it cannot guarantee all boundaries are represented as recorded with the county. Therefore, this zoning map should not be considered a legal record.
  </div>

  <div style="font-size:14px; margin:0 auto 14px; max-width:720px; color:#002D56;">
    Please note the zoning represented and boundaries shown on the map may have changed between map updates. For questions regarding the information displayed, please contact the City Planning &amp; Development Department.
  </div>

  <div style="font-size:14px; max-width:720px; margin:0 auto; color:#002D56;">
    <div style="margin:6px 0;"><strong>Phone:</strong> <a href="tel:+15550100" style="color:#002D56; text-decoration:none;">(555) 0100 x156</a></div>
    <div style="margin:6px 0;"><strong>Email:</strong> <a href="mailto:planning@example.org" style="color:#002D56; text-decoration:none;">planning@example.org</a></div>
    <div style="margin:6px 0;"><strong>Web:</strong> <a href="https://www.example.org/planning-development" target="_blank" style="color:#002D56; text-decoration:none;">City Planning &amp; Development</a></div>
  </div>
</div>

 

TonghuiMing

@Brian_McLeer Thank you for the HTML info.

Per our investigation, this is a regression indeed, caused by the framework theme upgrade. We have resolved it in a patch just released, and per my testing, the default widget background is still transparent now, after the fix:

TonghuiMing_0-1762236080356.png

Your code example in a window

TonghuiMing_1-1762236195412.png

Let me know if this is resolved in your app and if there's anything odd about it.

 

Best,

Tonghui